@kerfjs/ui 5.0.0-beta.50 → 5.0.0-beta.52

package/dist/grid.d.ts

@@ -2,6 +2,12 @@ import * as kerfjs from 'kerfjs';
 import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
+type GridRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-columns'?: never;
+    'data-flex'?: never;
+    'data-fill'?: never;
+}>;
 interface GridProps {
     children?: KerfUiContent;
     /** Number of equal-width columns. Must be a positive safe integer. */
@@ -10,11 +16,19 @@ interface GridProps {
     gap?: UiSpaceName | CssLength;
     /** Allow this grid to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */
     flex?: boolean | CssFlexKeyword | CssFlex;
+    /**
+     * Fill the height of a parent with a definite height, such as an app root or
+     * a fixed-height frame, when this grid is that parent's layout root. Inside a
+     * flex layout use `flex` instead. Defaults to false.
+     */
+    fill?: boolean;
     className?: string;
+    /** Safe `data-*` metadata; Grid-owned structural attributes remain protected. */
+    rootAttributes?: GridRootAttributes;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
 /** A fixed-count grid whose columns share the available width equally. */
-declare function Grid({ children, columns, gap, flex, className, slot, }: GridProps): kerfjs.SafeHtml;
+declare function Grid({ children, columns, gap, flex, fill, className, rootAttributes, slot, }: GridProps): kerfjs.SafeHtml;
 
 export { CssFlex, CssFlexKeyword, CssLength, Grid, type GridProps, UiSpaceName };

package/dist/grid.js

@@ -1,4 +1,5 @@
-export { Grid } from './chunk-ELRMBQEC.js';
+export { Grid } from './chunk-T7C2VZUB.js';
+
 
 
 //# sourceMappingURL=grid.js.map

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { AppTab, AppTabPresentation, AppTabProps, AppTabSize } from './app-tab.js';
 export { Badge, BadgeAppearance, BadgeProps, BadgeShape, BadgeSize, BadgeTone } from './badge.js';
-export { CssColor, CssFlex, CssFlexBasis, CssFlexKeyword, CssLength, CssLengthExpression, CssSize, CssSizeKeyword, CssValue, UiColorName, UiSpaceName, calc, colorVar, em, flex, lengthVar, pct, plus, px, rem, space, uiColor } from './css-values.js';
+export { CssColor, CssFlex, CssFlexBasis, CssFlexKeyword, CssForegroundColor, CssLength, CssLengthExpression, CssSize, CssSizeKeyword, CssValue, UiColor, UiColorName, UiForegroundColorName, UiSpaceName, calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './css-values.js';
 export { DisclosureArrow, DisclosureArrowProps, DisclosureDirection } from './disclosure-arrow.js';
 export { EmptyState, EmptyStateProps } from './empty-state.js';
 export { FloatingToolbar, FloatingToolbarPosition, FloatingToolbarProps } from './floating-toolbar.js';

package/dist/index.js

@@ -1,38 +1,38 @@
 export { wireTokenSearchFields } from './chunk-CMUIXJZM.js';
-export { ValueTable, ValueTableRow } from './chunk-SIU2AC5W.js';
-export { wireResizableRegions } from './chunk-J3EE6XWD.js';
+export { ValueTable, ValueTableRow } from './chunk-2S7OWAEV.js';
+export { wireResizableRegions } from './chunk-EKYZCRCX.js';
 export { reorderTabs, wireTabBars } from './chunk-UKKSMZYT.js';
 export { DialogSurface, PopupSurface } from './chunk-NN6GYOA2.js';
 export { TabBar } from './chunk-N3GKMPDW.js';
 export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-HJKRCKDR.js';
-export { SegmentedControl } from './chunk-S6ZTTTV7.js';
-export { Select } from './chunk-KKNK3JUT.js';
-export { Spacer } from './chunk-2WMSE4MK.js';
-export { StateBanner } from './chunk-3V75EQIP.js';
+export { SegmentedControl } from './chunk-M6GLI6A6.js';
+export { Select } from './chunk-ABAXNUXU.js';
+export { Spacer } from './chunk-4XE2CDYB.js';
+export { StateBanner } from './chunk-JGFZ42ZF.js';
 export { SunkenPanel } from './chunk-6ZXOQEAN.js';
 export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-VOCPXGQN.js';
-export { Row } from './chunk-AQSKJ6U6.js';
+export { Row } from './chunk-DNCOFEUL.js';
 export { EmptyState } from './chunk-E36EVCKG.js';
 export { FloatingToolbar } from './chunk-NDUGJ4TU.js';
-export { Grid } from './chunk-ELRMBQEC.js';
-export { ListActionRow } from './chunk-5CE64WGC.js';
+export { Grid } from './chunk-T7C2VZUB.js';
+export { ListActionRow } from './chunk-OSCL5TKR.js';
 export { ListInsetControl } from './chunk-D7GWXIAS.js';
 export { ListInsetText } from './chunk-ZK5EGVFP.js';
-export { AppTab } from './chunk-COUPLRZG.js';
+export { AppTab } from './chunk-IR53BQUJ.js';
 export { ToolbarActionLink, ToolbarControlGroup } from './chunk-ZIYOJFZD.js';
-export { Toolbar } from './chunk-OQI7RCRP.js';
-export { ListItem } from './chunk-ZSYLBVWG.js';
-export { List } from './chunk-UMGY5JSP.js';
-export { ToolbarText } from './chunk-DJKWFYAA.js';
-export { Pane } from './chunk-V6RZWDII.js';
+export { Toolbar } from './chunk-MTM43SJO.js';
+export { ListItem } from './chunk-LIOXPQ7N.js';
+export { List } from './chunk-7XJO4D6A.js';
+export { ToolbarText } from './chunk-YZV2PTY4.js';
+export { Pane } from './chunk-7GUQYHKA.js';
 
 export { LoadingSpinner } from './chunk-ZLWQZUGF.js';
-export { ListHeader } from './chunk-2YOUUEWR.js';
-export { Text } from './chunk-ZNZ2JDBW.js';
-export { Skeleton } from './chunk-54HM36IQ.js';
+export { ListHeader } from './chunk-3S7OUHUN.js';
+export { Text } from './chunk-7IUSV4XG.js';
+export { Skeleton } from './chunk-KAQUUTZR.js';
 
 export { Badge } from './chunk-XD7DWYXG.js';
-export { calc, colorVar, em, flex, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-OL4TC3U2.js';
+export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-2CE22Q2K.js';
 export { DisclosureArrow } from './chunk-HMQ2ZDGG.js';
 export { LucideIcon } from './chunk-4R777DUZ.js';
 

package/dist/list-action-row.js

@@ -1,4 +1,4 @@
-export { ListActionRow } from './chunk-5CE64WGC.js';
+export { ListActionRow } from './chunk-OSCL5TKR.js';
 
 
 

package/dist/list-header.js

@@ -1,4 +1,4 @@
-export { ListHeader } from './chunk-2YOUUEWR.js';
+export { ListHeader } from './chunk-3S7OUHUN.js';
 
 
 

package/dist/list-item.js

@@ -1,4 +1,4 @@
-export { ListItem } from './chunk-ZSYLBVWG.js';
+export { ListItem } from './chunk-LIOXPQ7N.js';
 
 
 

package/dist/list.d.ts

@@ -5,12 +5,29 @@ import { H as HorizontalAlignment, L as ListVerticalAlignment } from './flex-ali
 export { V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
+type ListRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-gap'?: never;
+    'data-flex'?: never;
+    'data-fill'?: never;
+    'data-h-align'?: never;
+    'data-v-align'?: never;
+    'data-scrollable'?: never;
+    'data-text-insets'?: never;
+    'data-control-insets'?: never;
+}>;
 interface ListProps {
     children?: KerfUiContent;
     /** Use the standard item gap, a named UI spacing token, or a typed CSS length. Defaults to no gap. */
     gap?: boolean | UiSpaceName | CssLength;
     /** Allow this list to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */
     flex?: boolean | CssFlexKeyword | CssFlex;
+    /**
+     * Fill the height of a parent with a definite height, such as an app root or
+     * a fixed-height frame, when this list is that parent's layout root. Inside a
+     * flex layout use `flex` instead. Defaults to false.
+     */
+    fill?: boolean;
     /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */
     hAlign?: HorizontalAlignment;
     /** Vertical distribution. Defaults to top. */
@@ -24,10 +41,12 @@ interface ListProps {
     /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */
     controlInsets?: Sides;
     className?: string;
+    /** Safe `data-*` metadata; List-owned structural attributes remain protected. */
+    rootAttributes?: ListRootAttributes;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-/** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */
-declare function List({ children, gap, flex, hAlign, vAlign, scrollable, dividerSides, textInsets, controlInsets, className, slot, }: ListProps): kerfjs.SafeHtml;
+/** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */
+declare function List({ children, gap, flex, fill, hAlign, vAlign, scrollable, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
 
 export { CssFlex, CssFlexKeyword, CssLength, DividerSides, HorizontalAlignment, List, type ListProps, ListVerticalAlignment, Sides, UiSpaceName };

package/dist/list.js

@@ -1,4 +1,5 @@
-export { List } from './chunk-UMGY5JSP.js';
+export { List } from './chunk-7XJO4D6A.js';
+
 
 
 

package/dist/nav-stack.js

@@ -1,4 +1,4 @@
-export { NavStack } from './chunk-DARTMI5Z.js';
+export { NavStack } from './chunk-SV22UIW4.js';
 
 
 

package/dist/pane.d.ts

@@ -1,7 +1,10 @@
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
-/** Logical sides that can show a {@link Pane} separator. */
+/**
+ * Logical pane sides: where a {@link Pane} can show a separator and where it can
+ * compensate for a device safe-area inset.
+ */
 type PaneSeparatorSide = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';
 /** Semantic root elements supported by {@link Pane}. */
 type PaneElement = 'article' | 'aside' | 'div' | 'main' | 'section';
@@ -13,6 +16,10 @@ type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
     'data-separator-block-end'?: never;
     'data-separator-inline-start'?: never;
     'data-separator-inline-end'?: never;
+    'data-safe-area-block-start'?: never;
+    'data-safe-area-block-end'?: never;
+    'data-safe-area-inline-start'?: never;
+    'data-safe-area-inline-end'?: never;
 }>;
 interface PaneProps {
     /** Optional fixed chrome above the scrolling content, arranged vertically. */
@@ -27,6 +34,14 @@ interface PaneProps {
     contentElement?: PaneContentElement;
     /** Independent logical-edge separator lines. Defaults to none. */
     separators?: readonly PaneSeparatorSide[];
+    /**
+     * Sides on which the pane may compensate for a device safe-area inset.
+     * Defaults to every side: the pane pads its slots for each side that still
+     * reaches an unsafe screen edge, as its surrounding layout reports, while its
+     * background and separators paint through. List only the sides an app-owned
+     * layout places at a screen edge, or pass `[]` to opt out.
+     */
+    safeAreaEdges?: readonly PaneSeparatorSide[];
     id?: string;
     /** Accessible name for a landmark root such as `aside` or `main`. */
     label?: string;
@@ -47,6 +62,6 @@ interface PaneProps {
  * each logical edge, so the same component works as a sidebar, main area,
  * inspector, or dialog column.
  */
-declare function Pane({ header, children, footer, element, contentElement, separators, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
+declare function Pane({ header, children, footer, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
 
 export { Pane, type PaneContentElement, type PaneElement, type PaneProps, type PaneSeparatorSide };

package/dist/pane.js

@@ -1,4 +1,4 @@
-export { Pane } from './chunk-V6RZWDII.js';
+export { Pane } from './chunk-7GUQYHKA.js';
 
 
 //# sourceMappingURL=pane.js.map

package/dist/row.d.ts

@@ -4,6 +4,16 @@ import { S as Sides } from './divider-sides-BzB6rphT.js';
 import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
+type RowRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-h-align'?: never;
+    'data-v-align'?: never;
+    'data-flex'?: never;
+    'data-fill'?: never;
+    'data-wrap'?: never;
+    'data-text-insets'?: never;
+    'data-control-insets'?: never;
+}>;
 interface RowProps {
     children?: KerfUiContent;
     /** Horizontal distribution. Defaults to left. */
@@ -14,6 +24,12 @@ interface RowProps {
     gap?: UiSpaceName | CssLength;
     /** Allow this row to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */
     flex?: boolean | CssFlexKeyword | CssFlex;
+    /**
+     * Fill the height of a parent with a definite height, such as an app root or
+     * a fixed-height frame, when this row is that parent's layout root. Inside a
+     * flex layout use `flex` instead. Defaults to false.
+     */
+    fill?: boolean;
     /** Allow children to wrap onto additional lines. */
     wrap?: boolean;
     /** Physical sides that receive the standard 17px text inset. */
@@ -21,10 +37,12 @@ interface RowProps {
     /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */
     controlInsets?: Sides;
     className?: string;
+    /** Safe `data-*` metadata; Row-owned structural attributes remain protected. */
+    rootAttributes?: RowRootAttributes;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
 /** A horizontal flex row with explicit physical-axis alignment and spacing. */
-declare function Row({ children, hAlign, vAlign, gap, flex, wrap, textInsets, controlInsets, className, slot, }: RowProps): kerfjs.SafeHtml;
+declare function Row({ children, hAlign, vAlign, gap, flex, fill, wrap, textInsets, controlInsets, className, rootAttributes, slot, }: RowProps): kerfjs.SafeHtml;
 
 export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, Row, type RowProps, Sides, UiSpaceName, VerticalAlignment };

package/dist/row.js

@@ -1,4 +1,5 @@
-export { Row } from './chunk-AQSKJ6U6.js';
+export { Row } from './chunk-DNCOFEUL.js';
+
 
 
 

package/dist/segmented-control.js

@@ -1,4 +1,4 @@
-export { SegmentedControl } from './chunk-S6ZTTTV7.js';
+export { SegmentedControl } from './chunk-M6GLI6A6.js';
 
 
 

package/dist/select.d.ts

@@ -1,5 +1,5 @@
 import { SafeHtml } from 'kerfjs';
-import { CssColor } from './css-values.js';
+import { CssForegroundColor } from './css-values.js';
 import { LucideNode } from './lucide-icon.js';
 import 'lucide';
 
@@ -8,9 +8,19 @@ interface SelectChoice<Value extends string = string> {
     label: string;
     icon?: LucideNode;
     iconName?: string;
-    /** Typed semantic or application-owned color for the optional icon. */
-    color?: CssColor;
+    /**
+     * Foreground color for the optional icon: a semantic foreground token such
+     * as `uiColor('success-on-quiet')`, or an application-owned
+     * `foregroundColorVar('--app-icon-color')`. Fill tokens such as
+     * `uiColor('success')` are pale background tints and do not type-check.
+     */
+    color?: CssForegroundColor;
     group?: string;
+    /**
+     * Draw a divider between this choice and the previous choice in the same
+     * list. A group boundary is already a separator, so the first choice of a
+     * group (or of the whole menu) never draws a second one.
+     */
     separatorBefore?: boolean;
 }
 type SelectAccessibleName = {

package/dist/select.js

@@ -1,4 +1,4 @@
-export { Select } from './chunk-KKNK3JUT.js';
+export { Select } from './chunk-ABAXNUXU.js';
 
 
 

package/dist/skeleton.d.ts

@@ -10,6 +10,10 @@ interface SkeletonProps {
     radius?: CssLength;
     /** Render this many stacked lines (the last one shorter), for multi-line text. */
     lines?: number;
+    /** Lay the block out as `display: block` instead of the default
+     *  `inline-block`, so it takes no text line of its own: no baseline gap
+     *  below it, and it centers like an icon in a slot. Defaults to `false`. */
+    block?: boolean;
     /** Accessible label. Omit to keep the block decorative (`aria-hidden`). */
     label?: string;
     className?: string;
@@ -22,6 +26,6 @@ interface SkeletonProps {
  * `placeholder` prop. Decorative by default (`aria-hidden`); pass `label` to
  * announce it. Sizes to its slot unless `width`/`height` are given.
  */
-declare function Skeleton({ width, height, radius, lines, label, className, slot, }: SkeletonProps): kerfjs.SafeHtml;
+declare function Skeleton({ width, height, radius, lines, block, label, className, slot, }: SkeletonProps): kerfjs.SafeHtml;
 
 export { Skeleton, type SkeletonProps };

package/dist/skeleton.js

@@ -1,4 +1,4 @@
-export { Skeleton } from './chunk-54HM36IQ.js';
+export { Skeleton } from './chunk-KAQUUTZR.js';
 
 
 //# sourceMappingURL=skeleton.js.map

package/dist/spacer.js

@@ -1,4 +1,4 @@
-export { Spacer } from './chunk-2WMSE4MK.js';
+export { Spacer } from './chunk-4XE2CDYB.js';
 
 
 //# sourceMappingURL=spacer.js.map

package/dist/split-view.js

@@ -1,4 +1,4 @@
-import { NavStack } from './chunk-DARTMI5Z.js';
+import { NavStack } from './chunk-SV22UIW4.js';
 import { ResizableRegion } from './chunk-VOCPXGQN.js';
 
 

package/dist/state-banner.js

@@ -1,4 +1,4 @@
-export { StateBanner } from './chunk-3V75EQIP.js';
+export { StateBanner } from './chunk-JGFZ42ZF.js';
 
 
 

package/dist/styles/app-tab.css

@@ -148,6 +148,15 @@
 .kui-app-tab__close:hover {
   color: var(--kui-color-text);
 }
+/* A dormant tab keeps its close button's space, so it matches the live tab's
+   geometry, but never shows a control it has disabled. */
+.kui-app-tab:is([data-placeholder="true"], [data-pending="true"])
+  .kui-app-tab__close {
+  visibility: hidden;
+}
+.kui-app-tab[data-pending="true"] .kui-app-tab__name {
+  color: var(--kui-color-text-quiet);
+}
 .kui-app-tab__close-icon {
   display: grid;
   width: 0.6375rem;

package/dist/styles/catalog/components/catalog-example-stack.css

@@ -1,6 +1,9 @@
 .kui-catalog-example-stack {
   display: flex;
-  width: min(46rem, 100%);
+  width: 100%;
+  min-width: 0;
+  max-width: 46rem;
+  box-sizing: border-box;
   flex-direction: column;
   gap: 1rem;
 }

package/dist/styles/catalog/components/catalog-example.css

@@ -21,6 +21,151 @@
   font-size: var(--kui-font-xs);
 }
 
+.kui-catalog-example__viewport {
+  position: relative;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.kui-catalog-example__viewport > * {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.kui-catalog-example__viewport[data-layout="grid"] {
+  display: grid;
+}
+
+.kui-catalog-example__viewport[data-layout="flex"] {
+  display: flex;
+}
+
+.kui-catalog-example__viewport[data-layout="flex-column"] {
+  display: flex;
+  flex-direction: column;
+}
+
+.kui-catalog-example__viewport[data-width="full"] {
+  width: 100%;
+}
+
+.kui-catalog-example__viewport[data-width="compact"] {
+  width: min(100%, 27.5rem);
+}
+
+.kui-catalog-example__viewport[data-width="medium"] {
+  width: min(100%, 40rem);
+}
+
+.kui-catalog-example__viewport[data-width="wide"] {
+  width: 100%;
+  max-width: 54rem;
+}
+
+.kui-catalog-example__viewport[data-width="text"] {
+  width: 17.5rem;
+}
+
+.kui-catalog-example__viewport[data-width="control"] {
+  min-width: min(24rem, 100%);
+}
+
+.kui-catalog-example__viewport[data-height="short"] {
+  height: 13.75rem;
+}
+
+.kui-catalog-example__viewport[data-height="reduced"] {
+  height: 17.5rem;
+}
+
+.kui-catalog-example__viewport[data-height="medium"] {
+  height: 20rem;
+}
+
+.kui-catalog-example__viewport[data-height="tall"] {
+  height: 22.5rem;
+}
+
+/* An application-sized frame for app shells and whole-screen layouts, which
+   read cramped in the component-sized heights above. The frame stands in for
+   the screen, so it is the containing block for screen-fixed chrome: a compact
+   CollapsiblePanel overlay, its backdrop, and restore controls dock to the
+   frame's edges instead of the page's, where the frame's inset and clip would
+   cut them off. An identity transform establishes that containing block.
+   `contain: layout` does too, but WebKit then mis-hit-tests any transformed
+   descendant of that fixed chrome once the frame also clips (every pressed
+   ListItem scales), so taps on an open overlay's items were lost. */
+.kui-catalog-example__viewport[data-height="app"] {
+  height: 37rem;
+  transform: translate(0);
+}
+
+.kui-catalog-example__viewport[data-min-height="short"] {
+  min-height: 16rem;
+}
+
+.kui-catalog-example__viewport[data-min-height="medium"] {
+  min-height: 20rem;
+}
+
+.kui-catalog-example__viewport[data-frame] {
+  border: 1px solid var(--kui-color-border);
+  border-radius: var(--kui-radius-m);
+}
+
+.kui-catalog-example__viewport[data-frame="dashed"] {
+  border-style: dashed;
+}
+
+.kui-catalog-example__viewport[data-surface="default"] {
+  background: var(--kui-color-surface);
+}
+
+.kui-catalog-example__viewport[data-surface="lowered"] {
+  background: var(--kui-color-surface-lowered);
+}
+
+.kui-catalog-example__viewport[data-overflow="hidden"] {
+  overflow: hidden;
+}
+
+.kui-catalog-example__viewport[data-overflow="auto-x"] {
+  overflow-x: auto;
+}
+
+.kui-catalog-example__viewport[data-shadow="true"] {
+  box-shadow: var(--kui-shadow-s);
+}
+
+.kui-catalog-example__compact-fallback {
+  display: none;
+  margin: 0;
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s);
+}
+
+@media ((max-width: 52rem)) {
+  .kui-catalog-example__viewport[data-responsive="roomy-only"] {
+    display: none;
+  }
+
+  .kui-catalog-example__compact-fallback {
+    display: block;
+  }
+}
+
+@media ((max-width: 30rem)) {
+  .kui-catalog-example__viewport[data-min-height="medium"] {
+    min-height: 16rem;
+  }
+}
+
+@media ((forced-colors: active)) {
+  .kui-catalog-example__viewport[data-frame] {
+    forced-color-adjust: auto;
+  }
+}
+
 /* The published inset lets the geometry overlay exclude this authoring aid. */
 .kui-catalog-example[data-align="glyph"]
   > :not([data-catalog-example-label]):not([data-catalog-example-note]) {