feat(grid, col): resolve breakpoints from config - #31518

Issue number: internal

What is the current behavior?

The previous PR in this stack added the screenBreakpoints config option and the @utils/breakpoints helpers, but nothing consumes them yet.

ion-grid gets its responsive padding and fixed widths purely from @media queries, with the thresholds compiled into the CSS. ion-col only expresses per-breakpoint values through breakpoint-suffixed properties (size-xs through size-xl, plus the order-* and offset-* equivalents). Neither reads the configured breakpoints, and neither can target xxl.

ion-grid also declared its own ION_GRID_BREAKPOINTS / IonGridBreakpoint (carrying a TODO(FW-7285)) rather than using the shared type.

What is the new behavior?

• ion-grid resolves the active breakpoint in JavaScript and reflects it on the host as a screen-breakpoint attribute. It subscribes via onBreakpointChange in connectedCallback and unsubscribes in disconnectedCallback, so it re-renders when the screen crosses a configured threshold.
• The grid Sass now emits every breakpoint rule twice: a @media copy scoped to :host(:not([screen-breakpoint])), and an attribute copy :host([screen-breakpoint="md"]). The attribute copy is what the config drives; the @media copy is the baseline before the component hydrates and when JavaScript never runs. This split is necessary because CSS media queries cannot read custom properties, so a var() cannot be used to change a breakpoint.
• ion-col accepts an object of breakpoint values for size, order and offset: col.size = { xs: 12, md: 6 }. This is resolved against the configured breakpoints. xxl is added to this object. An empty string or null at a breakpoint resets that column to the default flex layout.
• All suffixed properties are deprecated, but not removed. They still work and log a deprecation warning. If both forms are set for the same property, the object form wins and the suffixed ones are ignored with a warning. They will be removed in a future major release.
• ION_GRID_BREAKPOINTS / IonGridBreakpoint are replaced by the shared ScreenBreakpoint.

Does this introduce a breaking change?

• Yes
• No

The size, order, and offset prop types have been widened from string | undefined to BreakpointMap<string | number | null> | number | string | undefined. The suffixed properties continue to work as before.

BREAKING.md has been updated under 10.x with migration guidance for these deprecations. The push/pull entry has also been moved from the Grid section to Col, where the properties are defined.

Other information

Preview