CngxContainer

Observes a query container and publishes its size to descendants through CNGX_CONTAINER_SIZE.

The directive declares nothing visual. Both container-type and container-name belong in the stylesheet, next to the @container rules that use them: the name is API (an unnamed query matches the nearest container of any name, so a consumer wrapping the component in their own container would silently re-target it), and containment is a layout decision a skin must be able to opt out of with a plain CSS rule rather than !important against a host style.

cngx-thing-layout {
  container-type: inline-size;
  container-name: cngx-thing-layout;
}

cngx-thing-layout > cngx-thing { --cngx-thing-wide: 0; }

@container cngx-thing-layout (min-inline-size: 64rem) {
  cngx-thing-layout > cngx-thing { --cngx-thing-wide: 1; }
}

<div cngxContainer>
  <app-panel />
</div>

A descendant reads the resolved value with injectContainerSize(), so the breakpoint exists exactly once - in CSS. Note that container-type: inline-size applies size containment: an element that must shrink-wrap its content (an inline chip, a width: max-content bar) must not be a container.

https://cngxjs.github.io/cngx/examples/#/common/layout/container/css-decides-js-reads