@windmorph/react 0.1.2 → 0.2.1

package/dist/components/navigation/navigation-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-styles.js","names":[],"sources":["../../../src/components/navigation/navigation-styles.ts"],"sourcesContent":["import { reducedMotionFade } from '../../motion/reduced-motion';\nimport { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (WideNavigationRail.kt, ShortNavigationBar.kt and the\n * NavigationRail* / NavigationBar* token files).\n *\n * Rail: `surface`, 96px collapsed; expanded it is as wide as its widest item plus the 20px\n * insets, 220–360px, and the width springs on the default spatial spring. Content starts\n * 44px down; a header sits 40px above the items, which are 4px apart collapsed and flush\n * expanded. The modal expanded rail is `surface-container` at level 2 with 16px end\n * corners over a 32% scrim; it grows from the collapsed width on the fast spatial spring, or\n * slides in on the default one when the collapsed rail is hidden. It stays mounted until its\n * own width or slide (or, under reduced motion, its fade) has ended.\n *\n * Icons stay on one line in both states, through the middle of the collapsed rail, as in\n * M3's rail motion: only the labels and the rail's edge move. While the width springs open\n * (and while the modal sheet shrinks away) labels stay on one line, clipped by the rail, so\n * none wraps letter by letter in a rail that is still narrow and no item grows taller. So nothing is centred in\n * the animated width. The collapsed width is `--m3-rail-collapsed-width` (96px), and the\n * item inset `--m3-rail-item-inset` is half of what's left beside a 56px pill (20px). The\n * header is a 56px column at that inset: anything up to 56px (the menu button, a FAB) is\n * centred on the icon line, and anything wider (an extended FAB) keeps its width and starts\n * at the column's edge.\n *\n * Items align as a group to the top (default) or, with `itemAlignment=\"center\"`, to the\n * middle of the space below the header (M3: centre alignment on tablets); the header stays\n * at the top. An optional divider (`outline-variant`) marks the edge next to the content.\n *\n * Bar: `surface-container`, at least 64px (it grows when labels wrap), no elevation.\n * Stacked items share the width equally, or, when centred, sit within side padding of\n * (100% − 10% × (items + 3)) / 2 (up to 6 items). Items beside their icons\n * (`iconPlacement=\"start\"`) are centred by default and sized to their content, so the extra\n * space goes to the bar's ends (M3: \"Horizontal navigation items have a fixed width\").\n * With `scrollBehavior=\"hide-on-scroll\"` the bar is sticky at the bottom and its offset\n * (`--m3-nav-bar-offset`, 0 down to minus its height) follows the page scroll.\n *\n * The rail's width is the `--m3-rail-width` variable, so a consumer `w-*` class still wins;\n * a narrower or wider collapsed rail sets `--m3-rail-collapsed-width` instead.\n *\n * Container colours and the modal rail's corners come from the component tokens\n * (`navigation-tokens.ts`, `--md-comp-nav-bar-*` and `--md-comp-nav-rail-*`): the bar, the\n * rail and the modal rail's sheet (`data-modal`) carry `data-tokens`. A consumer class still\n * wins in `cn()`.\n * Every class is written out in full so Tailwind can find it.\n */\n\n/** Half of what's left beside a 56px pill in the collapsed rail. */\nconst itemInset = '[--m3-rail-item-inset:calc((var(--m3-rail-collapsed-width)_-_56px)/2)]';\n\n/**\n * While the expanded rail is still widening (`data-widening`), labels stay on one line and\n * the rail clips them, so the items keep their height and the icons their places.\n */\nconst oneLineWhileResizing = '[&[data-widening]_[data-nav-label]]:text-nowrap';\n\nconst widthMotion = [\n  '[transition-property:width]',\n  '[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]',\n  '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n];\n\n/** Variant definitions for {@link NavigationRail}; extend them to add variants. */\nexport const navigationRailStyles = tv({\n  slots: {\n    root: [\n      'flex w-(--m3-rail-width) shrink-0 flex-col text-on-surface',\n      'bg-[var(--_md-comp-nav-rail-collapsed-container-color)] data-expanded:bg-[var(--_md-comp-nav-rail-expanded-container-color)]',\n      itemInset,\n      oneLineWhileResizing,\n      ...widthMotion,\n    ],\n    // Library-owned wrapper: clips labels while the width animates.\n    body: 'flex min-h-0 flex-1 flex-col overflow-x-clip overflow-y-auto pt-[44px]',\n    // Children keep their own width (a centred grid item would shrink to the 56px column).\n    header:\n      'grid grid-cols-[56px] justify-items-center-safe ps-(--m3-rail-item-inset) pb-[40px] [&>*]:min-w-max',\n    // The gap between items springs 4 → 0px as the rail expands (default spatial, as\n    // Compose's itemVerticalSpacedBy; 2026-10-17), instant under reduced motion.\n    items: [\n      'flex flex-col',\n      '[transition-property:gap] [transition-duration:var(--md-sys-motion-spring-spatial-default-duration)] [transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n    ],\n    scrim: [\n      'fixed inset-0 z-(--md-sys-z-scrim) bg-scrim/32 opacity-100',\n      '[transition-property:opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n      // In and out on the default effects spring, as Compose's modal rail scrim (2026-10-15).\n      'starting:opacity-0 data-exiting:opacity-0',\n    ],\n    sheet: [\n      'fixed inset-y-0 start-0 z-(--md-sys-z-sheet) flex w-(--m3-rail-width) flex-col overflow-x-clip overflow-y-auto pt-[44px]',\n      'rounded-e-[var(--_md-comp-nav-rail-expanded-modal-container-shape)] bg-[var(--_md-comp-nav-rail-expanded-modal-container-color)]',\n      'text-on-surface shadow-elevation-2 outline-none',\n      itemInset,\n      oneLineWhileResizing,\n      '[&[data-exiting]_[data-nav-label]]:text-nowrap',\n      '[transition-property:width,translate]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]',\n      // Under reduced motion it fades in and out at its full width.\n      ...reducedMotionFade,\n    ],\n  },\n  variants: {\n    expanded: {\n      true: { items: 'gap-0' },\n      false: { items: 'gap-[4px]' },\n    },\n    /** Auto margins centre the items without hiding any when the rail overflows. */\n    itemAlignment: {\n      top: {},\n      center: { items: 'my-auto' },\n    },\n    /** A divider on the edge next to the content. */\n    divider: {\n      true: { root: 'border-e border-outline-variant' },\n      false: {},\n    },\n    /**\n     * `indicatorMotion=\"slide\"` in the expanded rail: the list is isolated, so the items'\n     * raised content stays above a sliding pill and no higher.\n     */\n    slidingIndicator: {\n      true: { items: 'isolate' },\n      false: {},\n    },\n    /**\n     * Modal sheet entry: from the collapsed width, or sliding in from the start edge. Under\n     * reduced motion it fades instead.\n     */\n    sheetEntry: {\n      grow: {\n        sheet:\n          'motion-safe:starting:w-(--m3-rail-collapsed-width) motion-safe:data-exiting:w-(--m3-rail-collapsed-width)',\n      },\n      // Sliding in, the sheet takes the default spatial spring, as Compose's modal rail\n      // (`WideNavigationRail.kt`): the fast one overshot 21px off the window edge (2026-10-15).\n      slide: {\n        sheet: [\n          'motion-safe:starting:-translate-x-full motion-safe:data-exiting:-translate-x-full motion-safe:rtl:starting:translate-x-full motion-safe:rtl:data-exiting:translate-x-full',\n          '[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]',\n          '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n        ],\n      },\n    },\n  },\n  defaultVariants: {\n    expanded: false,\n    sheetEntry: 'grow',\n    itemAlignment: 'top',\n    divider: false,\n    slidingIndicator: false,\n  },\n});\n\n/** Variant definitions for {@link NavigationBar}; extend them to add variants. */\nexport const navigationBarStyles = tv({\n  slots: {\n    root: 'flex min-h-[64px] w-full bg-[var(--_md-comp-nav-bar-container-color)] text-on-surface',\n    item: 'min-w-0',\n  },\n  variants: {\n    arrangement: {\n      equal: { item: 'flex-1 basis-0' },\n      centered: { root: 'justify-center', item: 'flex-1 basis-0' },\n    },\n    iconPlacement: { top: {}, start: {} },\n    hideOnScroll: {\n      // Settling after a scroll ends (`data-settling`), the offset eases to shown or hidden on\n      // the default effects spring; while scrolling it follows the scroll directly.\n      true: {\n        root: [\n          'sticky bottom-(--m3-nav-bar-offset) z-(--md-sys-z-sticky)',\n          'data-settling:[transition-property:bottom]',\n          'data-settling:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n          'data-settling:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n        ],\n      },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // Items beside their icons keep their own width; the extra space goes to the ends.\n    { arrangement: 'centered', iconPlacement: 'start', class: { item: 'flex-initial basis-auto' } },\n  ],\n  defaultVariants: { arrangement: 'equal', iconPlacement: 'top', hideOnScroll: false },\n});\n\n/**\n * The variants of {@link navigationBarStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type NavigationBarStyleProps = VariantProps<typeof navigationBarStyles>;\nexport type NavigationBarArrangement = NonNullable<NavigationBarStyleProps['arrangement']>;\n"],"mappings":";;;;AAgDA,MAAM,YAAY;;;;;AAMlB,MAAM,uBAAuB;;AAS7B,MAAa,uBAAuB,GAAG;CACrC,OAAO;EACL,MAAM;GACJ;GACA;GACA;GACA;GACA,GAAG;IAbP;IACA;IACA;GAWO;EACL;EAEA,MAAM;EAEN,QACE;EAGF,OAAO,CACL,iBACA,sLACF;EACA,OAAO;GACL;GACA;GACA;GACA;GAEA;EACF;EACA,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA,GAAG;EACL;CACF;CACA,UAAU;EACR,UAAU;GACR,MAAM,EAAE,OAAO,QAAQ;GACvB,OAAO,EAAE,OAAO,YAAY;EAC9B;;EAEA,eAAe;GACb,KAAK,CAAC;GACN,QAAQ,EAAE,OAAO,UAAU;EAC7B;;EAEA,SAAS;GACP,MAAM,EAAE,MAAM,kCAAkC;GAChD,OAAO,CAAC;EACV;;;;;EAKA,kBAAkB;GAChB,MAAM,EAAE,OAAO,UAAU;GACzB,OAAO,CAAC;EACV;;;;;EAKA,YAAY;GACV,MAAM,EACJ,OACE,4GACJ;GAGA,OAAO,EACL,OAAO;IACL;IACA;IACA;GACF,EACF;EACF;CACF;CACA,iBAAiB;EACf,UAAU;EACV,YAAY;EACZ,eAAe;EACf,SAAS;EACT,kBAAkB;CACpB;AACF,CAAC;;AAGD,MAAa,sBAAsB,GAAG;CACpC,OAAO;EACL,MAAM;EACN,MAAM;CACR;CACA,UAAU;EACR,aAAa;GACX,OAAO,EAAE,MAAM,iBAAiB;GAChC,UAAU;IAAE,MAAM;IAAkB,MAAM;GAAiB;EAC7D;EACA,eAAe;GAAE,KAAK,CAAC;GAAG,OAAO,CAAC;EAAE;EACpC,cAAc;GAGZ,MAAM,EACJ,MAAM;IACJ;IACA;IACA;IACA;GACF,EACF;GACA,OAAO,CAAC;EACV;CACF;CACA,kBAAkB,CAEhB;EAAE,aAAa;EAAY,eAAe;EAAS,OAAO,EAAE,MAAM,0BAA0B;CAAE,CAChG;CACA,iBAAiB;EAAE,aAAa;EAAS,eAAe;EAAO,cAAc;CAAM;AACrF,CAAC"}
+{"version":3,"file":"navigation-styles.js","names":[],"sources":["../../../src/components/navigation/navigation-styles.ts"],"sourcesContent":["import { reducedMotionFade } from '../../motion/reduced-motion';\nimport { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (WideNavigationRail.kt, ShortNavigationBar.kt and the\n * NavigationRail* / NavigationBar* token files).\n *\n * Rail: `surface`, 96px collapsed; expanded it is as wide as its widest item plus the 20px\n * insets, 220–360px, and the width springs on the default spatial spring. Content starts\n * 44px down; a header sits 40px above the items, which are 4px apart collapsed and flush\n * expanded. The modal expanded rail is `surface-container` at level 2 with 16px end\n * corners over a 32% scrim; it grows from the collapsed width on the fast spatial spring, or\n * slides in on the default one when the collapsed rail is hidden. It stays mounted until its\n * own width or slide (or, under reduced motion, its fade) has ended.\n *\n * Icons stay on one line in both states, through the middle of the collapsed rail, as in\n * M3's rail motion: only the labels and the rail's edge move. While the width springs open\n * (and while the modal sheet shrinks away) labels stay on one line, clipped by the rail, so\n * none wraps letter by letter in a rail that is still narrow and no item grows taller. So nothing is centred in\n * the animated width. The collapsed width is `--m3-rail-collapsed-width` (96px), and the\n * item inset `--m3-rail-item-inset` is half of what's left beside a 56px pill (20px). The\n * header is a 56px column at that inset: anything up to 56px (the menu button, a FAB) is\n * centred on the icon line, and anything wider (an extended FAB) keeps its width and starts\n * at the column's edge.\n *\n * Items align as a group to the top (default) or, with `itemAlignment=\"center\"`, to the\n * middle of the space below the header (M3: centre alignment on tablets); the header stays\n * at the top. An optional divider (`outline-variant`) marks the edge next to the content.\n *\n * Bar: `surface-container`, at least 64px (it grows when labels wrap), no elevation.\n * Stacked items share the width equally, or, when centred, sit within side padding of\n * (100% − 10% × (items + 3)) / 2 (up to 6 items). Items beside their icons\n * (`iconPlacement=\"start\"`) are centred by default and sized to their content, so the extra\n * space goes to the bar's ends (M3: \"Horizontal navigation items have a fixed width\").\n * With `scrollBehavior=\"hide-on-scroll\"` the bar is sticky at the bottom and its offset\n * (`--m3-nav-bar-offset`, 0 down to minus its height) follows the page scroll.\n *\n * The rail's width is the `--m3-rail-width` variable, so a consumer `w-*` class still wins;\n * a narrower or wider collapsed rail sets `--m3-rail-collapsed-width` instead.\n *\n * Container colours and the modal rail's corners come from the component tokens\n * (`navigation-tokens.ts`, `--md-comp-nav-bar-*` and `--md-comp-nav-rail-*`): the bar, the\n * rail and the modal rail's sheet (`data-modal`) carry `data-tokens`. A consumer class still\n * wins in `cn()`.\n * Every class is written out in full so Tailwind can find it.\n */\n\n/** Half of what's left beside a 56px pill in the collapsed rail. */\nconst itemInset = '[--m3-rail-item-inset:calc((var(--m3-rail-collapsed-width)_-_56px)/2)]';\n\n/**\n * While the expanded rail is still widening (`data-widening`), labels stay on one line and\n * the rail clips them, so the items keep their height and the icons their places.\n */\nconst oneLineWhileResizing = '[&[data-widening]_[data-nav-label]]:text-nowrap';\n\nconst widthMotion = [\n  '[transition-property:width]',\n  '[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]',\n  '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n];\n\n/** Variant definitions for {@link NavigationRail}; extend them to add variants. */\nexport const navigationRailStyles = tv({\n  slots: {\n    root: [\n      // Positioned, so a secondary column placed against it escapes the body's scrolling.\n      'relative flex w-(--m3-rail-width) shrink-0 flex-col text-on-surface',\n      'bg-[var(--_md-comp-nav-rail-collapsed-container-color)] data-expanded:bg-[var(--_md-comp-nav-rail-expanded-container-color)]',\n      itemInset,\n      oneLineWhileResizing,\n      ...widthMotion,\n    ],\n    // Library-owned wrapper: clips labels while the width animates.\n    body: 'flex min-h-0 flex-1 flex-col overflow-x-clip overflow-y-auto pt-[44px]',\n    // Children keep their own width (a centred grid item would shrink to the 56px column).\n    header:\n      'grid grid-cols-[56px] justify-items-center-safe ps-(--m3-rail-item-inset) pb-[40px] [&>*]:min-w-max',\n    // The gap between items springs 4 → 0px as the rail expands (default spatial, as\n    // Compose's itemVerticalSpacedBy; 2026-10-17), instant under reduced motion.\n    items: [\n      'flex flex-col',\n      '[transition-property:gap] [transition-duration:var(--md-sys-motion-spring-spatial-default-duration)] [transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n    ],\n    scrim: [\n      'fixed inset-0 z-(--md-sys-z-scrim) bg-scrim/32 opacity-100',\n      '[transition-property:opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n      // In and out on the default effects spring, as Compose's modal rail scrim (2026-10-15).\n      'starting:opacity-0 data-exiting:opacity-0',\n    ],\n    sheet: [\n      'fixed inset-y-0 start-0 z-(--md-sys-z-sheet) flex w-(--m3-rail-width) flex-col overflow-x-clip overflow-y-auto pt-[44px]',\n      'rounded-e-[var(--_md-comp-nav-rail-expanded-modal-container-shape)] bg-[var(--_md-comp-nav-rail-expanded-modal-container-color)]',\n      'text-on-surface shadow-elevation-2 outline-none',\n      itemInset,\n      oneLineWhileResizing,\n      '[&[data-exiting]_[data-nav-label]]:text-nowrap',\n      '[transition-property:width,translate]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-fast-easing)]',\n      // Under reduced motion it fades in and out at its full width.\n      ...reducedMotionFade,\n    ],\n  },\n  variants: {\n    expanded: {\n      true: { items: 'gap-0' },\n      false: { items: 'gap-[4px]' },\n    },\n    /** Auto margins centre the items without hiding any when the rail overflows. */\n    itemAlignment: {\n      top: {},\n      center: { items: 'my-auto' },\n    },\n    /** `hideOnCollapse=\"compact\"`: the collapsed rail shows from 600px wide. */\n    hiddenOnCompact: {\n      true: { root: 'max-medium:hidden' },\n      false: {},\n    },\n    /** A divider on the edge next to the content. */\n    divider: {\n      true: { root: 'border-e border-outline-variant' },\n      false: {},\n    },\n    /**\n     * `indicatorMotion=\"slide\"` in the expanded rail: the list is isolated, so the items'\n     * raised content stays above a sliding pill and no higher.\n     */\n    slidingIndicator: {\n      true: { items: 'isolate' },\n      false: {},\n    },\n    /**\n     * Modal sheet entry: from the collapsed width, or sliding in from the start edge. Under\n     * reduced motion it fades instead.\n     */\n    sheetEntry: {\n      grow: {\n        sheet:\n          'motion-safe:starting:w-(--m3-rail-collapsed-width) motion-safe:data-exiting:w-(--m3-rail-collapsed-width)',\n      },\n      // Sliding in, the sheet takes the default spatial spring, as Compose's modal rail\n      // (`WideNavigationRail.kt`): the fast one overshot 21px off the window edge (2026-10-15).\n      slide: {\n        sheet: [\n          'motion-safe:starting:-translate-x-full motion-safe:data-exiting:-translate-x-full motion-safe:rtl:starting:translate-x-full motion-safe:rtl:data-exiting:translate-x-full',\n          '[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]',\n          '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n        ],\n      },\n    },\n  },\n  defaultVariants: {\n    expanded: false,\n    sheetEntry: 'grow',\n    itemAlignment: 'top',\n    divider: false,\n    slidingIndicator: false,\n  },\n});\n\n/** Variant definitions for {@link NavigationBar}; extend them to add variants. */\nexport const navigationBarStyles = tv({\n  slots: {\n    root: 'flex min-h-[64px] w-full bg-[var(--_md-comp-nav-bar-container-color)] text-on-surface',\n    item: 'min-w-0',\n  },\n  variants: {\n    arrangement: {\n      equal: { item: 'flex-1 basis-0' },\n      centered: { root: 'justify-center', item: 'flex-1 basis-0' },\n    },\n    iconPlacement: { top: {}, start: {} },\n    hideOnScroll: {\n      // Settling after a scroll ends (`data-settling`), the offset eases to shown or hidden on\n      // the default effects spring; while scrolling it follows the scroll directly.\n      true: {\n        root: [\n          'sticky bottom-(--m3-nav-bar-offset) z-(--md-sys-z-sticky)',\n          'data-settling:[transition-property:bottom]',\n          'data-settling:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n          'data-settling:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n        ],\n      },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // Items beside their icons keep their own width; the extra space goes to the ends.\n    { arrangement: 'centered', iconPlacement: 'start', class: { item: 'flex-initial basis-auto' } },\n  ],\n  defaultVariants: { arrangement: 'equal', iconPlacement: 'top', hideOnScroll: false },\n});\n\n/**\n * The variants of {@link navigationBarStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type NavigationBarStyleProps = VariantProps<typeof navigationBarStyles>;\nexport type NavigationBarArrangement = NonNullable<NavigationBarStyleProps['arrangement']>;\n"],"mappings":";;;;AAgDA,MAAM,YAAY;;;;;AAMlB,MAAM,uBAAuB;;AAS7B,MAAa,uBAAuB,GAAG;CACrC,OAAO;EACL,MAAM;GAEJ;GACA;GACA;GACA;GACA,GAAG;IAdP;IACA;IACA;GAYO;EACL;EAEA,MAAM;EAEN,QACE;EAGF,OAAO,CACL,iBACA,sLACF;EACA,OAAO;GACL;GACA;GACA;GACA;GAEA;EACF;EACA,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA,GAAG;EACL;CACF;CACA,UAAU;EACR,UAAU;GACR,MAAM,EAAE,OAAO,QAAQ;GACvB,OAAO,EAAE,OAAO,YAAY;EAC9B;;EAEA,eAAe;GACb,KAAK,CAAC;GACN,QAAQ,EAAE,OAAO,UAAU;EAC7B;;EAEA,iBAAiB;GACf,MAAM,EAAE,MAAM,oBAAoB;GAClC,OAAO,CAAC;EACV;;EAEA,SAAS;GACP,MAAM,EAAE,MAAM,kCAAkC;GAChD,OAAO,CAAC;EACV;;;;;EAKA,kBAAkB;GAChB,MAAM,EAAE,OAAO,UAAU;GACzB,OAAO,CAAC;EACV;;;;;EAKA,YAAY;GACV,MAAM,EACJ,OACE,4GACJ;GAGA,OAAO,EACL,OAAO;IACL;IACA;IACA;GACF,EACF;EACF;CACF;CACA,iBAAiB;EACf,UAAU;EACV,YAAY;EACZ,eAAe;EACf,SAAS;EACT,kBAAkB;CACpB;AACF,CAAC;;AAGD,MAAa,sBAAsB,GAAG;CACpC,OAAO;EACL,MAAM;EACN,MAAM;CACR;CACA,UAAU;EACR,aAAa;GACX,OAAO,EAAE,MAAM,iBAAiB;GAChC,UAAU;IAAE,MAAM;IAAkB,MAAM;GAAiB;EAC7D;EACA,eAAe;GAAE,KAAK,CAAC;GAAG,OAAO,CAAC;EAAE;EACpC,cAAc;GAGZ,MAAM,EACJ,MAAM;IACJ;IACA;IACA;IACA;GACF,EACF;GACA,OAAO,CAAC;EACV;CACF;CACA,kBAAkB,CAEhB;EAAE,aAAa;EAAY,eAAe;EAAS,OAAO,EAAE,MAAM,0BAA0B;CAAE,CAChG;CACA,iBAAiB;EAAE,aAAa;EAAS,eAAe;EAAO,cAAc;CAAM;AACrF,CAAC"}

package/dist/components/select/Select.js

@@ -34,6 +34,8 @@ const COMPACT_WINDOW = "(max-width: 599.98px)";
 * results did, and sank behind the keyboard (2026-11-07).
 */
 const SEARCH_SHEET_HEIGHT = "h-[calc(100dvh_-_72px_-_var(--m3-sheet-keyboard-inset,0px))] min-[641px]:h-[calc(100dvh_-_56px_-_var(--m3-sheet-keyboard-inset,0px))]";
+/** Options scrolled to by the keyboard stop below the sticky search (52px at most). */
+const SEARCH_SHEET_CONTENT = "scroll-pt-[52px]";
 /** A read-only Select's keyboard finds no option, so arrows and typeahead change nothing. */
 const READ_ONLY_DELEGATE = {
 	getFirstKey: () => null,
@@ -300,7 +302,10 @@ function Select(props) {
 		skipPartiallyExpanded: true,
 		open: state.isOpen,
 		onOpenChange: (open) => open ? state.open() : state.close(),
-		classNames: searchable || classNames?.sheet ? { panel: cn(searchable && SEARCH_SHEET_HEIGHT, classNames?.sheet) } : void 0,
+		classNames: searchable ? {
+			panel: cn(SEARCH_SHEET_HEIGHT, classNames?.sheet),
+			content: SEARCH_SHEET_CONTENT
+		} : classNames?.sheet ? { panel: classNames.sheet } : void 0,
 		...typeof label === "string" ? { "aria-label": label } : { "aria-label": rest["aria-label"] ?? "" },
 		children: /* @__PURE__ */ jsx("div", {
 			...densityAttribute(density),

package/dist/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useId,\n  useRef,\n  useSyncExternalStore,\n  type AriaAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  HiddenSelect,\n  mergeProps,\n  useButton,\n  useFocusRing,\n  useHover,\n  useObjectRef,\n  useSelect,\n  type AriaSelectOptions,\n} from 'react-aria';\nimport {\n  useSelectState,\n  type SelectionMode,\n  type SelectProps as StatelySelectProps,\n} from 'react-stately/useSelectState';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport type { Key } from 'react-stately';\nimport { matchesSearch } from '../../utils/search';\nimport { assertCollectionChildren } from '../../utils/assert-collection-children';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { renderedDescription } from '../../utils/rendered-description';\nimport {\n  ariaFlag,\n  pickDescriptionAria,\n  splitRootProps,\n  type WrapperRootDOMProps,\n} from '../../utils/root-props';\nimport { useTypeaheadDelegate } from '../../utils/typeahead';\nimport { usePreloadLoadingIndicator } from '../loading-indicator/lazy-loading-indicator';\nimport { LazyBottomSheet, usePreloadBottomSheet } from '../sheet/lazy-bottom-sheet';\nimport type { TextFieldVariant } from '../text-field/text-field-styles';\nimport { DropdownArrow, FieldShell, fieldState, type FieldShellClassNames } from './field-shell';\nimport {\n  FOCUSABLE_DISABLED_OPTIONS,\n  OptionList,\n  OptionPopover,\n  type OptionListClassNames,\n} from './option-list';\nimport { SearchList } from './search-list';\nimport { useSelectionCap } from './selection-cap';\n\n/** How the options open: a menu under the field (M3), a bottom sheet, or a sheet on phones. */\nexport type SelectPresentation = 'menu' | 'sheet' | 'auto';\n\n/** Words the Select shows or announces; override them for other languages. */\nexport interface SelectLabels {\n  /** Shown in an empty list. @default \"No options\" */\n  empty: string;\n  /** The loading indicator's name. @default \"Loading options\" */\n  loading: string;\n  /** For more chosen options than fit: `+{count}`. @default (count) => `+${count}` */\n  more: (count: number) => string;\n  /** With `searchable`: the search field's placeholder and name. @default \"Search\" */\n  search: string;\n  /** With `searchable`: shown when no option matches the search. @default \"No results\" */\n  noResults: string;\n  /** The error icon's name (M3: \"Error\"). @default \"Error\" */\n  error: string;\n}\n\nconst DEFAULT_LABELS: SelectLabels = {\n  empty: 'No options',\n  loading: 'Loading options',\n  more: (count) => `+${count}`,\n  search: 'Search',\n  noResults: 'No results',\n  error: 'Error',\n};\n\n/** A chosen option, as `renderValue` receives it. */\nexport interface SelectedOption<T> {\n  key: Key;\n  /** Its plain text (`textValue`, or the item's text). */\n  textValue: string;\n  /** Its object from `items`, if the options come from `items`. */\n  value: T | null;\n}\n\nexport interface SelectClassNames extends FieldShellClassNames, OptionListClassNames {\n  /** The text showing the chosen option(s) or the placeholder. */\n  value?: string;\n  /** With `searchable`: the search field. */\n  search?: string;\n  /**\n   * The bottom sheet the options open in (`presentation=\"sheet\"`, or `\"auto\"` on compact\n   * windows): the sheet's surface, as its `classNames.panel`.\n   */\n  sheet?: string;\n}\n\n/** React Aria props this API names the library's way (`disabled`, `open`…), or leaves out. */\ntype RenamedProps =\n  | 'isDisabled'\n  | 'isRequired'\n  | 'isInvalid'\n  | 'isOpen'\n  | 'label'\n  | 'description'\n  | 'validationState'\n  // React Stately's deprecated single-selection API; `value` / `defaultValue` / `onChange` replace it.\n  | 'selectedKey'\n  | 'defaultSelectedKey'\n  | 'onSelectionChange'\n  | 'shouldCloseOnSelect'\n  | 'allowsEmptyCollection';\n\nexport type SelectProps<T extends object, M extends SelectionMode = 'single'> = Omit<\n  StatelySelectProps<T, M>,\n  RenamedProps\n> &\n  Pick<AriaSelectOptions<T, M>, 'id' | 'name' | 'autoComplete' | 'form'> &\n  Omit<WrapperRootDOMProps, keyof StatelySelectProps<T, M>> & {\n    /** The trigger button's id, for a `<label for>` or an error summary's link. */\n    id?: string;\n    /** The container style, as `TextField`'s: a filled surface or an outline. @default \"filled\" */\n    variant?: TextFieldVariant;\n    /**\n     * Web density, `0` to `-3`: each step takes 4px off the field (56px at 0, 44px at -3) and\n     * off its menu's options (44px at 0, 32px at -3). Left out, it takes the density of the\n     * nearest `ThemeProvider` or `ThemeScope`. M3 asks for density to be the reader's choice\n     * rather than a default, so prefer setting it there, from a setting.\n     * @default 0\n     */\n    density?: Density;\n    /** The field's label. Give `aria-label` instead when there's no visible label. */\n    label?: ReactNode;\n    /** Accessible name when there's no visible label. */\n    'aria-label'?: string;\n    /**\n     * Shown in the field when nothing is chosen. With a `label`, it appears once the label\n     * floats (on focus), as in `TextField`.\n     */\n    placeholder?: string;\n    /**\n     * Helper text below the field. Replaced visually by the error when invalid, and shown in\n     * the error colour while the field is invalid.\n     */\n    supportingText?: ReactNode;\n    /** Marks the field invalid (in addition to `validate` and `required`). */\n    invalid?: boolean;\n    /** A choice is required: adds the `*` to the label and validates on submit. */\n    required?: boolean;\n    /**\n     * Read as `invalid` when that's left out, for a form library that sets the attribute. The\n     * trigger is a button, which ARIA doesn't let carry `aria-invalid`, so the state reaches\n     * assistive technology as the field's error text, its description.\n     */\n    'aria-invalid'?: AriaAttributes['aria-invalid'];\n    /**\n     * Read as `required` when that's left out, for a form library that sets the attribute: the\n     * label's `*`, in the trigger's name (a button can't carry `aria-required`).\n     */\n    'aria-required'?: AriaAttributes['aria-required'];\n    /** Disables the field: it can't be focused or opened. @default false */\n    disabled?: boolean;\n    /**\n     * The choice can be seen but not changed: the menu doesn't open and the keyboard doesn't\n     * change it. The root gets `data-readonly`; say so in the supporting text (M3).\n     * @default false\n     */\n    readOnly?: boolean;\n    /** Decorative icon at the start, in a 48px box. */\n    leadingIcon?: ReactNode;\n    /**\n     * The icon shown before the arrow while the field is invalid (M3 strongly recommends one).\n     * Defaults to Material Symbols `error`, named by `labels.error`; `false` turns it off.\n     */\n    errorIcon?: ReactNode | false;\n    /** Whether the menu is open (controlled); with `defaultOpen` and `onOpenChange`. */\n    open?: boolean;\n    /**\n     * Whether choosing an option closes the menu.\n     * @default true for a single choice, false with `selectionMode=\"multiple\"`\n     */\n    closeOnSelect?: boolean;\n    /**\n     * With `selectionMode=\"multiple\"`, the most options that can be chosen; the rest show as\n     * disabled until one is removed.\n     */\n    maxSelections?: number;\n    /**\n     * `menu` (default) opens an M3 menu under the field on every window, as Compose's exposed\n     * dropdown menu does; `sheet` always opens a bottom sheet; `auto` opens a sheet on\n     * compact windows and a menu on larger ones, for long lists.\n     * @default \"menu\"\n     */\n    presentation?: SelectPresentation;\n    /**\n     * A search field at the top of the menu or sheet that filters the options as you type,\n     * for long lists (pair it with `presentation=\"auto\"`). The search takes focus in the menu;\n     * a sheet shows the list first, so the keyboard doesn't cover it.\n     * @default false\n     */\n    searchable?: boolean;\n    /**\n     * With `searchable`: whether an option matches the search. Defaults to a match anywhere in\n     * its text, ignoring case and accents (\"thai\" finds \"Thailand\"). The option's `key` lets\n     * it match on more than its text, e.g. a country's ISO code.\n     */\n    filter?: (textValue: string, search: string, key: Key) => boolean;\n    /** With `searchable`: the typed text (controlled); cleared when the list closes. */\n    searchValue?: string;\n    /** With `searchable`: the initial typed text, when uncontrolled. @default \"\" */\n    defaultSearchValue?: string;\n    /**\n     * With `searchable`: called as the search changes. Given it, the app filters `items` itself\n     * (e.g. on a server, with `loading` meanwhile) and the built-in filter is off.\n     */\n    onSearchChange?: (search: string) => void;\n    /**\n     * What the field shows for the chosen option(s), e.g. a dialling code or a flag, instead of\n     * their text. Screen readers still hear the options' text.\n     */\n    renderValue?: (selected: SelectedOption<T>[]) => ReactNode;\n    /**\n     * Shows a loading indicator in the list, e.g. while options are fetched.\n     * The indicator's code loads when it first shows, and ahead of that when the field is\n     * hovered or focused while this prop is set at all, so pass `loading={false}` (rather than\n     * leaving it out) on a field that loads options.\n     */\n    loading?: boolean;\n    /** Words the Select shows or announces, for other languages. */\n    labels?: Partial<SelectLabels>;\n    /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n    className?: string;\n    /** Classes for each part, by slot. */\n    classNames?: SelectClassNames;\n    /** Inline styles for the root element. */\n    style?: CSSProperties;\n    /** Ref to the root `<div>` element. Use `triggerRef` for the field's button. */\n    ref?: Ref<HTMLDivElement>;\n    /** Ref to the field's button. */\n    triggerRef?: Ref<HTMLButtonElement>;\n  };\n\nconst COMPACT_WINDOW = '(max-width: 599.98px)';\n\n/**\n * A searchable list's sheet takes the full height it may (above an on-screen keyboard too), so\n * filtering changes the list inside, never the sheet: at its own height it shrank as the\n * results did, and sank behind the keyboard (2026-11-07).\n */\nconst SEARCH_SHEET_HEIGHT =\n  'h-[calc(100dvh_-_72px_-_var(--m3-sheet-keyboard-inset,0px))] min-[641px]:h-[calc(100dvh_-_56px_-_var(--m3-sheet-keyboard-inset,0px))]';\n\n/** A read-only Select's keyboard finds no option, so arrows and typeahead change nothing. */\nconst READ_ONLY_DELEGATE: NonNullable<AriaSelectOptions<object>['keyboardDelegate']> = {\n  getFirstKey: () => null,\n  getLastKey: () => null,\n  getKeyBelow: () => null,\n  getKeyAbove: () => null,\n  getKeyForSearch: () => null,\n};\n\nfunction subscribeToWindow(onChange: () => void) {\n  const query = window.matchMedia(COMPACT_WINDOW);\n  query.addEventListener('change', onChange);\n  return () => query.removeEventListener('change', onChange);\n}\n\n/**\n * M3 exposed dropdown menu, read-only (Compose's `ExposedDropdownMenuBox` with a\n * `PrimaryNotEditable` anchor): a text-field-styled button that opens a menu of options.\n * Single or multiple selection, sections, descriptions and icons, typeahead, a hidden\n * native `<select>` for forms, and validation as in `TextField` (React Aria `useSelect`).\n *\n * @example\n * <Select label=\"Sort by\" defaultValue=\"newest\">\n *   <SelectItem key=\"newest\">Newest first</SelectItem>\n *   <SelectItem key=\"price\">Price, low to high</SelectItem>\n * </Select>\n */\nexport function Select<T extends object, M extends SelectionMode = 'single'>(\n  props: SelectProps<T, M>,\n) {\n  const {\n    variant = 'filled',\n    density,\n    label,\n    placeholder,\n    supportingText,\n    invalid: invalidProp,\n    required: requiredProp,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    disabled = false,\n    readOnly = false,\n    leadingIcon,\n    errorIcon,\n    open,\n    maxSelections,\n    presentation = 'menu',\n    searchable = false,\n    filter = matchesSearch,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    renderValue,\n    loading,\n    labels: labelsProp,\n    className,\n    classNames,\n    style,\n    ref,\n    triggerRef: triggerRefProp,\n    name,\n    autoComplete,\n    form,\n    errorMessage,\n    closeOnSelect,\n    ...otherProps\n  } = props;\n  // Items given as elements (not `items` with a render function) must come from a client.\n  if (typeof props.children !== 'function') {\n    assertCollectionChildren(props.children, 'Select', 'SelectItem and SelectSection elements');\n  }\n  const { root: rootData, rest } = splitRootProps(otherProps, { wrapper: true });\n  const invalid = invalidProp ?? ariaFlag(ariaInvalid);\n  const required = requiredProp ?? ariaFlag(ariaRequired);\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const stately = rest as Omit<StatelySelectProps<T, M>, RenamedProps>;\n  const cap = useSelectionCap({\n    multiple: stately.selectionMode === 'multiple',\n    maxSelections,\n    value: stately.value,\n    defaultValue: stately.defaultValue,\n    onChange: stately.onChange,\n  });\n  const [search, setSearch] = useControlledState(\n    searchValue,\n    defaultSearchValue ?? '',\n    onSearchChange,\n  );\n  const ariaProps = {\n    ...stately,\n    ...cap.valueProps,\n    // The search starts afresh each time the list opens.\n    onOpenChange: (isOpen: boolean) => {\n      if (!isOpen && search !== '') setSearch('');\n      stately.onOpenChange?.(isOpen);\n    },\n    label,\n    description: supportingText,\n    errorMessage,\n    isInvalid: invalid,\n    isRequired: required,\n    isDisabled: disabled,\n    ...(closeOnSelect !== undefined && { shouldCloseOnSelect: closeOnSelect }),\n    ...FOCUSABLE_DISABLED_OPTIONS,\n    ...(readOnly\n      ? { isOpen: false, keyboardDelegate: READ_ONLY_DELEGATE }\n      : open !== undefined && { isOpen: open }),\n    placeholder,\n    name,\n    autoComplete,\n    form,\n  } as AriaSelectOptions<T, M>;\n\n  const state = useSelectState<T, M>(ariaProps);\n  const triggerRef = useObjectRef(triggerRefProp);\n  // Typeahead on the closed field moves to the next option starting with the letter (M3),\n  // and still skips disabled options.\n  const typeaheadDelegate = useTypeaheadDelegate(state, triggerRef, {\n    disabledBehavior: 'all',\n    currentKey: state.selectionManager.selectionMode === 'single' ? state.selectedKey : null,\n  });\n  const containerRef = useRef<HTMLDivElement>(null);\n  // Set by a press outside the menu and the field: the focus the menu hands back to the\n  // field on closing (WAI-ARIA, right after Escape or a choice) is let go, so one press\n  // outside leaves the field, as it does any other field.\n  const releaseFocusRef = useRef(false);\n  // Chrome's touch adjustment can split a tap between the trigger and the padding just above\n  // or below it (the 8px either side of the value line): `pointerdown` reaches the trigger\n  // while `pointerup` or the click lands beside it, so React Aria cancels the press or never\n  // sees it, and about a third of the field ignored a finger (2026-10-17). A touch that\n  // starts on the trigger but doesn't end there (its `pointerup` and its click both on it)\n  // opens the menu on its click instead. The mouse never gets here: it opens on the press\n  // start.\n  const touchOnTriggerRef = useRef(false);\n  const touchLeftTriggerRef = useRef(false);\n  const onTrigger = (target: EventTarget) => Boolean(triggerRef.current?.contains(target as Node));\n  const strayTouchProps: HTMLAttributes<HTMLDivElement> = {\n    onPointerDownCapture: (event) => {\n      touchOnTriggerRef.current = event.pointerType !== 'mouse' && onTrigger(event.target);\n      touchLeftTriggerRef.current = false;\n    },\n    onPointerUpCapture: (event) => {\n      touchLeftTriggerRef.current = !onTrigger(event.target);\n    },\n    onClickCapture: (event) => {\n      if (!touchOnTriggerRef.current) return;\n      touchOnTriggerRef.current = false;\n      if (!touchLeftTriggerRef.current && onTrigger(event.target)) return;\n      if (disabled || state.isOpen) return;\n      releaseFocusRef.current = false;\n      triggerRef.current?.focus({ preventScroll: true });\n      if (!readOnly) state.open();\n    },\n  };\n  const listBoxRef = useRef<HTMLUListElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const dialogId = useId();\n  const {\n    labelProps,\n    triggerProps,\n    valueProps,\n    menuProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails,\n  } = useSelect<T, M>(\n    readOnly ? ariaProps : { ...ariaProps, keyboardDelegate: typeaheadDelegate },\n    state,\n    triggerRef,\n  );\n  const isCompact = useSyncExternalStore(\n    subscribeToWindow,\n    () => window.matchMedia(COMPACT_WINDOW).matches,\n    () => false,\n  );\n  const asSheet = presentation === 'sheet' || (presentation === 'auto' && isCompact);\n  // The sheet's code loads on first open, or ahead of it when the field is hovered or focused.\n  usePreloadBottomSheet(containerRef, asSheet);\n  // A field that takes `loading` (it loads options) preloads the indicator on hover or focus.\n  usePreloadLoadingIndicator(containerRef, loading !== undefined);\n  // `useSelect`'s trigger props are React Aria button props; `useButton` makes them DOM props.\n  const { buttonProps } = useButton(\n    // A searchable field opens a dialog holding the search and the list (as PhoneField's).\n    searchable\n      ? {\n          ...triggerProps,\n          'aria-haspopup': 'dialog',\n          'aria-controls': state.isOpen && !asSheet ? dialogId : undefined,\n        }\n      : triggerProps,\n    triggerRef,\n  );\n  const { focusProps, isFocusVisible, isFocused } = useFocusRing();\n  // The trigger sets its own widget attributes; an app's description ones join them.\n  const fieldButtonProps = mergeProps(pickDescriptionAria(rest), buttonProps, focusProps);\n  const { hoverProps, isHovered } = useHover({ isDisabled: disabled });\n\n  // In the list's order, not the order they were picked, so the field reads like the list.\n  const chosenOptions: SelectedOption<T>[] = [...state.collection.getKeys()]\n    .filter((key) => state.selectionManager.isSelected(key))\n    .map((key) => {\n      const item = state.collection.getItem(key);\n      return { key, textValue: item?.textValue ?? '', value: item?.value ?? null };\n    });\n  const chosen = chosenOptions.map((option) => option.textValue);\n  const valueText =\n    chosen.length > 2\n      ? `${chosen.slice(0, 2).join(', ')} ${labels.more(chosen.length - 2)}`\n      : chosen.join(', ');\n  const hasValue = chosen.length > 0;\n  const hasLabel = label !== undefined && label !== null;\n  const focused = isFocused || state.isOpen;\n  const resolvedError =\n    typeof errorMessage === 'function'\n      ? errorMessage({ isInvalid, validationErrors, validationDetails })\n      : (errorMessage ?? validationErrors.join(' '));\n\n  const searchLabelling = hasLabel\n    ? { 'aria-labelledby': labelProps.id }\n    : { 'aria-label': (rest as { 'aria-label'?: string })['aria-label'] };\n  const list = searchable ? (\n    <SearchList\n      listProps={{\n        ...(stately.items !== undefined && { items: stately.items }),\n        children: stately.children,\n        ...(stately.disabledKeys !== undefined && { disabledKeys: stately.disabledKeys }),\n        selectionMode: stately.selectionMode ?? 'single',\n        // A single choice stays chosen when pressed again, as in a non-searchable Select.\n        disallowEmptySelection: stately.selectionMode !== 'multiple',\n        selectedKeys: state.selectionManager.selectedKeys,\n        onSelectionChange: (keys) => {\n          state.selectionManager.setSelectedKeys(keys === 'all' ? [] : keys);\n          if (stately.selectionMode !== 'multiple') state.close();\n        },\n      }}\n      search={search}\n      onSearchChange={setSearch}\n      filter={onSearchChange ? null : filter}\n      autoFocusSearch={!asSheet}\n      labelling={searchLabelling}\n      dialogProps={asSheet ? undefined : { id: dialogId, role: 'dialog', ...searchLabelling }}\n      labels={{ search: labels.search, noResults: labels.noResults, loading: labels.loading }}\n      loading={loading ?? false}\n      isBlocked={cap.isBlocked}\n      embedded={asSheet}\n      classNames={classNames}\n    />\n  ) : (\n    <OptionList\n      embedded={asSheet}\n      listBoxProps={menuProps}\n      state={state}\n      listBoxRef={listBoxRef}\n      emptyLabel={labels.empty}\n      loading={loading}\n      loadingLabel={labels.loading}\n      isBlocked={cap.isBlocked}\n      classNames={classNames}\n    />\n  );\n\n  return (\n    <>\n      <FieldShell\n        variant={variant}\n        density={density}\n        label={label}\n        labelProps={labelProps}\n        required={required}\n        state={fieldState({ disabled, invalid: isInvalid, focused, hovered: isHovered })}\n        floated={hasValue || focused}\n        open={state.isOpen}\n        leadingIcon={leadingIcon}\n        trailing={<DropdownArrow open={state.isOpen} />}\n        errorIcon={errorIcon}\n        errorIconLabel={labels.error}\n        readOnly={readOnly}\n        supportingText={supportingText}\n        descriptionProps={descriptionProps}\n        errorText={resolvedError}\n        errorMessageProps={errorMessageProps}\n        showError={isInvalid && Boolean(resolvedError)}\n        containerRef={containerRef}\n        // No handler is shared: the hover ones and the touch fallback's capture ones.\n        containerProps={{ ...hoverProps, ...strayTouchProps }}\n        onContainerPointerDown={(event) => {\n          // A press anywhere on the field (not only its text) opens it, like Compose.\n          if (disabled || triggerRef.current?.contains(event.target as Node)) return;\n          event.preventDefault();\n          releaseFocusRef.current = false;\n          triggerRef.current?.focus();\n          if (!readOnly) state.toggle();\n        }}\n        rootProps={{ ...rootData, 'data-focus-visible': isFocusVisible || undefined }}\n        rootRef={ref}\n        className={className}\n        classNames={classNames}\n        style={style}\n      >\n        {/* The native select is for forms: submitting under `name`, autofill and native\n            validation. Without them it's left out, so a long list's text (e.g. country names\n            from Intl, which can differ between server and browser) isn't rendered twice. */}\n        {name || autoComplete || form || stately.validationBehavior === 'native' ? (\n          <HiddenSelect\n            state={state}\n            triggerRef={triggerRef}\n            label={label}\n            name={name}\n            isDisabled={disabled}\n            {...(autoComplete && { autoComplete })}\n            {...(form && { form })}\n          />\n        ) : null}\n        <button\n          {...fieldButtonProps}\n          aria-describedby={renderedDescription(fieldButtonProps['aria-describedby'], [\n            !supportingText && descriptionProps.id,\n            !(isInvalid && resolvedError) && errorMessageProps.id,\n          ])}\n          onFocus={(event) => {\n            fieldButtonProps.onFocus?.(event);\n            if (!releaseFocusRef.current) return;\n            releaseFocusRef.current = false;\n            triggerRef.current?.blur();\n          }}\n          // Using the field again means it's wanted, whatever came before.\n          onPointerDown={(event) => {\n            releaseFocusRef.current = false;\n            fieldButtonProps.onPointerDown?.(event);\n          }}\n          onKeyDown={(event) => {\n            releaseFocusRef.current = false;\n            fieldButtonProps.onKeyDown?.(event);\n          }}\n          ref={triggerRef}\n          type=\"button\"\n          className={cn(\n            'flex min-w-0 flex-1 cursor-pointer items-center self-stretch bg-transparent p-0 text-start outline-none',\n            'disabled:cursor-default',\n          )}\n        >\n          <span\n            {...valueProps}\n            className={cn(\n              'min-w-0 flex-1 truncate text-body-large',\n              hasValue\n                ? 'text-[color:var(--_md-comp-text-field-input-text-color)]'\n                : 'text-on-surface-variant',\n              // With a label, the placeholder shows once the label floats (as TextField).\n              !hasValue && hasLabel && 'opacity-0 group-data-floated/field:opacity-100',\n              'group-data-[field-state=disabled]/field:text-on-surface/38',\n              classNames?.value,\n            )}\n          >\n            {hasValue && renderValue ? (\n              <>\n                <span aria-hidden=\"true\">{renderValue(chosenOptions)}</span>\n                <span className=\"sr-only\">{valueText}</span>\n              </>\n            ) : hasValue ? (\n              valueText\n            ) : (\n              (placeholder ?? ' ')\n            )}\n          </span>\n        </button>\n      </FieldShell>\n      {asSheet ? (\n        <LazyBottomSheet\n          // Opens at its own height (up to the window, the list scrolling inside), never half\n          // the window, which left the last options off-screen on a short phone.\n          skipPartiallyExpanded\n          open={state.isOpen}\n          onOpenChange={(open) => (open ? state.open() : state.close())}\n          classNames={\n            searchable || classNames?.sheet\n              ? { panel: cn(searchable && SEARCH_SHEET_HEIGHT, classNames?.sheet) }\n              : undefined\n          }\n          {...(typeof label === 'string'\n            ? { 'aria-label': label }\n            : { 'aria-label': (rest as { 'aria-label'?: string })['aria-label'] ?? '' })}\n        >\n          <div\n            {...densityAttribute(density)}\n            className=\"flex min-h-0 flex-1 flex-col px-[8px] pb-[16px]\"\n          >\n            {list}\n          </div>\n        </LazyBottomSheet>\n      ) : (\n        <OptionPopover\n          state={state}\n          triggerRef={containerRef}\n          popoverRef={popoverRef}\n          density={density}\n          onPressOutside={() => {\n            releaseFocusRef.current = true;\n          }}\n          // Room to type in a searchable menu, however narrow the field.\n          minWidth={searchable ? 280 : 0}\n        >\n          {list}\n        </OptionPopover>\n      )}\n    </>\n  );\n}\n\nexport type { Key as SelectKey } from 'react-stately';\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useId,\n  useRef,\n  useSyncExternalStore,\n  type AriaAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  HiddenSelect,\n  mergeProps,\n  useButton,\n  useFocusRing,\n  useHover,\n  useObjectRef,\n  useSelect,\n  type AriaSelectOptions,\n} from 'react-aria';\nimport {\n  useSelectState,\n  type SelectionMode,\n  type SelectProps as StatelySelectProps,\n} from 'react-stately/useSelectState';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport type { Key } from 'react-stately';\nimport { matchesSearch } from '../../utils/search';\nimport { assertCollectionChildren } from '../../utils/assert-collection-children';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { renderedDescription } from '../../utils/rendered-description';\nimport {\n  ariaFlag,\n  pickDescriptionAria,\n  splitRootProps,\n  type WrapperRootDOMProps,\n} from '../../utils/root-props';\nimport { useTypeaheadDelegate } from '../../utils/typeahead';\nimport { usePreloadLoadingIndicator } from '../loading-indicator/lazy-loading-indicator';\nimport { LazyBottomSheet, usePreloadBottomSheet } from '../sheet/lazy-bottom-sheet';\nimport type { TextFieldVariant } from '../text-field/text-field-styles';\nimport { DropdownArrow, FieldShell, fieldState, type FieldShellClassNames } from './field-shell';\nimport {\n  FOCUSABLE_DISABLED_OPTIONS,\n  OptionList,\n  OptionPopover,\n  type OptionListClassNames,\n} from './option-list';\nimport { SearchList } from './search-list';\nimport { useSelectionCap } from './selection-cap';\n\n/** How the options open: a menu under the field (M3), a bottom sheet, or a sheet on phones. */\nexport type SelectPresentation = 'menu' | 'sheet' | 'auto';\n\n/** Words the Select shows or announces; override them for other languages. */\nexport interface SelectLabels {\n  /** Shown in an empty list. @default \"No options\" */\n  empty: string;\n  /** The loading indicator's name. @default \"Loading options\" */\n  loading: string;\n  /** For more chosen options than fit: `+{count}`. @default (count) => `+${count}` */\n  more: (count: number) => string;\n  /** With `searchable`: the search field's placeholder and name. @default \"Search\" */\n  search: string;\n  /** With `searchable`: shown when no option matches the search. @default \"No results\" */\n  noResults: string;\n  /** The error icon's name (M3: \"Error\"). @default \"Error\" */\n  error: string;\n}\n\nconst DEFAULT_LABELS: SelectLabels = {\n  empty: 'No options',\n  loading: 'Loading options',\n  more: (count) => `+${count}`,\n  search: 'Search',\n  noResults: 'No results',\n  error: 'Error',\n};\n\n/** A chosen option, as `renderValue` receives it. */\nexport interface SelectedOption<T> {\n  key: Key;\n  /** Its plain text (`textValue`, or the item's text). */\n  textValue: string;\n  /** Its object from `items`, if the options come from `items`. */\n  value: T | null;\n}\n\nexport interface SelectClassNames extends FieldShellClassNames, OptionListClassNames {\n  /** The text showing the chosen option(s) or the placeholder. */\n  value?: string;\n  /** With `searchable`: the search field. */\n  search?: string;\n  /**\n   * The bottom sheet the options open in (`presentation=\"sheet\"`, or `\"auto\"` on compact\n   * windows): the sheet's surface, as its `classNames.panel`.\n   */\n  sheet?: string;\n}\n\n/** React Aria props this API names the library's way (`disabled`, `open`…), or leaves out. */\ntype RenamedProps =\n  | 'isDisabled'\n  | 'isRequired'\n  | 'isInvalid'\n  | 'isOpen'\n  | 'label'\n  | 'description'\n  | 'validationState'\n  // React Stately's deprecated single-selection API; `value` / `defaultValue` / `onChange` replace it.\n  | 'selectedKey'\n  | 'defaultSelectedKey'\n  | 'onSelectionChange'\n  | 'shouldCloseOnSelect'\n  | 'allowsEmptyCollection';\n\nexport type SelectProps<T extends object, M extends SelectionMode = 'single'> = Omit<\n  StatelySelectProps<T, M>,\n  RenamedProps\n> &\n  Pick<AriaSelectOptions<T, M>, 'id' | 'name' | 'autoComplete' | 'form'> &\n  Omit<WrapperRootDOMProps, keyof StatelySelectProps<T, M>> & {\n    /** The trigger button's id, for a `<label for>` or an error summary's link. */\n    id?: string;\n    /** The container style, as `TextField`'s: a filled surface or an outline. @default \"filled\" */\n    variant?: TextFieldVariant;\n    /**\n     * Web density, `0` to `-3`: each step takes 4px off the field (56px at 0, 44px at -3) and\n     * off its menu's options (44px at 0, 32px at -3). Left out, it takes the density of the\n     * nearest `ThemeProvider` or `ThemeScope`. M3 asks for density to be the reader's choice\n     * rather than a default, so prefer setting it there, from a setting.\n     * @default 0\n     */\n    density?: Density;\n    /** The field's label. Give `aria-label` instead when there's no visible label. */\n    label?: ReactNode;\n    /** Accessible name when there's no visible label. */\n    'aria-label'?: string;\n    /**\n     * Shown in the field when nothing is chosen. With a `label`, it appears once the label\n     * floats (on focus), as in `TextField`.\n     */\n    placeholder?: string;\n    /**\n     * Helper text below the field. Replaced visually by the error when invalid, and shown in\n     * the error colour while the field is invalid.\n     */\n    supportingText?: ReactNode;\n    /** Marks the field invalid (in addition to `validate` and `required`). */\n    invalid?: boolean;\n    /** A choice is required: adds the `*` to the label and validates on submit. */\n    required?: boolean;\n    /**\n     * Read as `invalid` when that's left out, for a form library that sets the attribute. The\n     * trigger is a button, which ARIA doesn't let carry `aria-invalid`, so the state reaches\n     * assistive technology as the field's error text, its description.\n     */\n    'aria-invalid'?: AriaAttributes['aria-invalid'];\n    /**\n     * Read as `required` when that's left out, for a form library that sets the attribute: the\n     * label's `*`, in the trigger's name (a button can't carry `aria-required`).\n     */\n    'aria-required'?: AriaAttributes['aria-required'];\n    /** Disables the field: it can't be focused or opened. @default false */\n    disabled?: boolean;\n    /**\n     * The choice can be seen but not changed: the menu doesn't open and the keyboard doesn't\n     * change it. The root gets `data-readonly`; say so in the supporting text (M3).\n     * @default false\n     */\n    readOnly?: boolean;\n    /** Decorative icon at the start, in a 48px box. */\n    leadingIcon?: ReactNode;\n    /**\n     * The icon shown before the arrow while the field is invalid (M3 strongly recommends one).\n     * Defaults to Material Symbols `error`, named by `labels.error`; `false` turns it off.\n     */\n    errorIcon?: ReactNode | false;\n    /** Whether the menu is open (controlled); with `defaultOpen` and `onOpenChange`. */\n    open?: boolean;\n    /**\n     * Whether choosing an option closes the menu.\n     * @default true for a single choice, false with `selectionMode=\"multiple\"`\n     */\n    closeOnSelect?: boolean;\n    /**\n     * With `selectionMode=\"multiple\"`, the most options that can be chosen; the rest show as\n     * disabled until one is removed.\n     */\n    maxSelections?: number;\n    /**\n     * `menu` (default) opens an M3 menu under the field on every window, as Compose's exposed\n     * dropdown menu does; `sheet` always opens a bottom sheet; `auto` opens a sheet on\n     * compact windows and a menu on larger ones, for long lists.\n     * @default \"menu\"\n     */\n    presentation?: SelectPresentation;\n    /**\n     * A search field at the top of the menu or sheet that filters the options as you type,\n     * for long lists (pair it with `presentation=\"auto\"`). The search takes focus in the menu;\n     * a sheet shows the list first, so the keyboard doesn't cover it.\n     * @default false\n     */\n    searchable?: boolean;\n    /**\n     * With `searchable`: whether an option matches the search. Defaults to a match anywhere in\n     * its text, ignoring case and accents (\"thai\" finds \"Thailand\"). The option's `key` lets\n     * it match on more than its text, e.g. a country's ISO code.\n     */\n    filter?: (textValue: string, search: string, key: Key) => boolean;\n    /** With `searchable`: the typed text (controlled); cleared when the list closes. */\n    searchValue?: string;\n    /** With `searchable`: the initial typed text, when uncontrolled. @default \"\" */\n    defaultSearchValue?: string;\n    /**\n     * With `searchable`: called as the search changes. Given it, the app filters `items` itself\n     * (e.g. on a server, with `loading` meanwhile) and the built-in filter is off.\n     */\n    onSearchChange?: (search: string) => void;\n    /**\n     * What the field shows for the chosen option(s), e.g. a dialling code or a flag, instead of\n     * their text. Screen readers still hear the options' text.\n     */\n    renderValue?: (selected: SelectedOption<T>[]) => ReactNode;\n    /**\n     * Shows a loading indicator in the list, e.g. while options are fetched.\n     * The indicator's code loads when it first shows, and ahead of that when the field is\n     * hovered or focused while this prop is set at all, so pass `loading={false}` (rather than\n     * leaving it out) on a field that loads options.\n     */\n    loading?: boolean;\n    /** Words the Select shows or announces, for other languages. */\n    labels?: Partial<SelectLabels>;\n    /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n    className?: string;\n    /** Classes for each part, by slot. */\n    classNames?: SelectClassNames;\n    /** Inline styles for the root element. */\n    style?: CSSProperties;\n    /** Ref to the root `<div>` element. Use `triggerRef` for the field's button. */\n    ref?: Ref<HTMLDivElement>;\n    /** Ref to the field's button. */\n    triggerRef?: Ref<HTMLButtonElement>;\n  };\n\nconst COMPACT_WINDOW = '(max-width: 599.98px)';\n\n/**\n * A searchable list's sheet takes the full height it may (above an on-screen keyboard too), so\n * filtering changes the list inside, never the sheet: at its own height it shrank as the\n * results did, and sank behind the keyboard (2026-11-07).\n */\nconst SEARCH_SHEET_HEIGHT =\n  'h-[calc(100dvh_-_72px_-_var(--m3-sheet-keyboard-inset,0px))] min-[641px]:h-[calc(100dvh_-_56px_-_var(--m3-sheet-keyboard-inset,0px))]';\n\n/** Options scrolled to by the keyboard stop below the sticky search (52px at most). */\nconst SEARCH_SHEET_CONTENT = 'scroll-pt-[52px]';\n\n/** A read-only Select's keyboard finds no option, so arrows and typeahead change nothing. */\nconst READ_ONLY_DELEGATE: NonNullable<AriaSelectOptions<object>['keyboardDelegate']> = {\n  getFirstKey: () => null,\n  getLastKey: () => null,\n  getKeyBelow: () => null,\n  getKeyAbove: () => null,\n  getKeyForSearch: () => null,\n};\n\nfunction subscribeToWindow(onChange: () => void) {\n  const query = window.matchMedia(COMPACT_WINDOW);\n  query.addEventListener('change', onChange);\n  return () => query.removeEventListener('change', onChange);\n}\n\n/**\n * M3 exposed dropdown menu, read-only (Compose's `ExposedDropdownMenuBox` with a\n * `PrimaryNotEditable` anchor): a text-field-styled button that opens a menu of options.\n * Single or multiple selection, sections, descriptions and icons, typeahead, a hidden\n * native `<select>` for forms, and validation as in `TextField` (React Aria `useSelect`).\n *\n * @example\n * <Select label=\"Sort by\" defaultValue=\"newest\">\n *   <SelectItem key=\"newest\">Newest first</SelectItem>\n *   <SelectItem key=\"price\">Price, low to high</SelectItem>\n * </Select>\n */\nexport function Select<T extends object, M extends SelectionMode = 'single'>(\n  props: SelectProps<T, M>,\n) {\n  const {\n    variant = 'filled',\n    density,\n    label,\n    placeholder,\n    supportingText,\n    invalid: invalidProp,\n    required: requiredProp,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    disabled = false,\n    readOnly = false,\n    leadingIcon,\n    errorIcon,\n    open,\n    maxSelections,\n    presentation = 'menu',\n    searchable = false,\n    filter = matchesSearch,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    renderValue,\n    loading,\n    labels: labelsProp,\n    className,\n    classNames,\n    style,\n    ref,\n    triggerRef: triggerRefProp,\n    name,\n    autoComplete,\n    form,\n    errorMessage,\n    closeOnSelect,\n    ...otherProps\n  } = props;\n  // Items given as elements (not `items` with a render function) must come from a client.\n  if (typeof props.children !== 'function') {\n    assertCollectionChildren(props.children, 'Select', 'SelectItem and SelectSection elements');\n  }\n  const { root: rootData, rest } = splitRootProps(otherProps, { wrapper: true });\n  const invalid = invalidProp ?? ariaFlag(ariaInvalid);\n  const required = requiredProp ?? ariaFlag(ariaRequired);\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const stately = rest as Omit<StatelySelectProps<T, M>, RenamedProps>;\n  const cap = useSelectionCap({\n    multiple: stately.selectionMode === 'multiple',\n    maxSelections,\n    value: stately.value,\n    defaultValue: stately.defaultValue,\n    onChange: stately.onChange,\n  });\n  const [search, setSearch] = useControlledState(\n    searchValue,\n    defaultSearchValue ?? '',\n    onSearchChange,\n  );\n  const ariaProps = {\n    ...stately,\n    ...cap.valueProps,\n    // The search starts afresh each time the list opens.\n    onOpenChange: (isOpen: boolean) => {\n      if (!isOpen && search !== '') setSearch('');\n      stately.onOpenChange?.(isOpen);\n    },\n    label,\n    description: supportingText,\n    errorMessage,\n    isInvalid: invalid,\n    isRequired: required,\n    isDisabled: disabled,\n    ...(closeOnSelect !== undefined && { shouldCloseOnSelect: closeOnSelect }),\n    ...FOCUSABLE_DISABLED_OPTIONS,\n    ...(readOnly\n      ? { isOpen: false, keyboardDelegate: READ_ONLY_DELEGATE }\n      : open !== undefined && { isOpen: open }),\n    placeholder,\n    name,\n    autoComplete,\n    form,\n  } as AriaSelectOptions<T, M>;\n\n  const state = useSelectState<T, M>(ariaProps);\n  const triggerRef = useObjectRef(triggerRefProp);\n  // Typeahead on the closed field moves to the next option starting with the letter (M3),\n  // and still skips disabled options.\n  const typeaheadDelegate = useTypeaheadDelegate(state, triggerRef, {\n    disabledBehavior: 'all',\n    currentKey: state.selectionManager.selectionMode === 'single' ? state.selectedKey : null,\n  });\n  const containerRef = useRef<HTMLDivElement>(null);\n  // Set by a press outside the menu and the field: the focus the menu hands back to the\n  // field on closing (WAI-ARIA, right after Escape or a choice) is let go, so one press\n  // outside leaves the field, as it does any other field.\n  const releaseFocusRef = useRef(false);\n  // Chrome's touch adjustment can split a tap between the trigger and the padding just above\n  // or below it (the 8px either side of the value line): `pointerdown` reaches the trigger\n  // while `pointerup` or the click lands beside it, so React Aria cancels the press or never\n  // sees it, and about a third of the field ignored a finger (2026-10-17). A touch that\n  // starts on the trigger but doesn't end there (its `pointerup` and its click both on it)\n  // opens the menu on its click instead. The mouse never gets here: it opens on the press\n  // start.\n  const touchOnTriggerRef = useRef(false);\n  const touchLeftTriggerRef = useRef(false);\n  const onTrigger = (target: EventTarget) => Boolean(triggerRef.current?.contains(target as Node));\n  const strayTouchProps: HTMLAttributes<HTMLDivElement> = {\n    onPointerDownCapture: (event) => {\n      touchOnTriggerRef.current = event.pointerType !== 'mouse' && onTrigger(event.target);\n      touchLeftTriggerRef.current = false;\n    },\n    onPointerUpCapture: (event) => {\n      touchLeftTriggerRef.current = !onTrigger(event.target);\n    },\n    onClickCapture: (event) => {\n      if (!touchOnTriggerRef.current) return;\n      touchOnTriggerRef.current = false;\n      if (!touchLeftTriggerRef.current && onTrigger(event.target)) return;\n      if (disabled || state.isOpen) return;\n      releaseFocusRef.current = false;\n      triggerRef.current?.focus({ preventScroll: true });\n      if (!readOnly) state.open();\n    },\n  };\n  const listBoxRef = useRef<HTMLUListElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const dialogId = useId();\n  const {\n    labelProps,\n    triggerProps,\n    valueProps,\n    menuProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails,\n  } = useSelect<T, M>(\n    readOnly ? ariaProps : { ...ariaProps, keyboardDelegate: typeaheadDelegate },\n    state,\n    triggerRef,\n  );\n  const isCompact = useSyncExternalStore(\n    subscribeToWindow,\n    () => window.matchMedia(COMPACT_WINDOW).matches,\n    () => false,\n  );\n  const asSheet = presentation === 'sheet' || (presentation === 'auto' && isCompact);\n  // The sheet's code loads on first open, or ahead of it when the field is hovered or focused.\n  usePreloadBottomSheet(containerRef, asSheet);\n  // A field that takes `loading` (it loads options) preloads the indicator on hover or focus.\n  usePreloadLoadingIndicator(containerRef, loading !== undefined);\n  // `useSelect`'s trigger props are React Aria button props; `useButton` makes them DOM props.\n  const { buttonProps } = useButton(\n    // A searchable field opens a dialog holding the search and the list (as PhoneField's).\n    searchable\n      ? {\n          ...triggerProps,\n          'aria-haspopup': 'dialog',\n          'aria-controls': state.isOpen && !asSheet ? dialogId : undefined,\n        }\n      : triggerProps,\n    triggerRef,\n  );\n  const { focusProps, isFocusVisible, isFocused } = useFocusRing();\n  // The trigger sets its own widget attributes; an app's description ones join them.\n  const fieldButtonProps = mergeProps(pickDescriptionAria(rest), buttonProps, focusProps);\n  const { hoverProps, isHovered } = useHover({ isDisabled: disabled });\n\n  // In the list's order, not the order they were picked, so the field reads like the list.\n  const chosenOptions: SelectedOption<T>[] = [...state.collection.getKeys()]\n    .filter((key) => state.selectionManager.isSelected(key))\n    .map((key) => {\n      const item = state.collection.getItem(key);\n      return { key, textValue: item?.textValue ?? '', value: item?.value ?? null };\n    });\n  const chosen = chosenOptions.map((option) => option.textValue);\n  const valueText =\n    chosen.length > 2\n      ? `${chosen.slice(0, 2).join(', ')} ${labels.more(chosen.length - 2)}`\n      : chosen.join(', ');\n  const hasValue = chosen.length > 0;\n  const hasLabel = label !== undefined && label !== null;\n  const focused = isFocused || state.isOpen;\n  const resolvedError =\n    typeof errorMessage === 'function'\n      ? errorMessage({ isInvalid, validationErrors, validationDetails })\n      : (errorMessage ?? validationErrors.join(' '));\n\n  const searchLabelling = hasLabel\n    ? { 'aria-labelledby': labelProps.id }\n    : { 'aria-label': (rest as { 'aria-label'?: string })['aria-label'] };\n  const list = searchable ? (\n    <SearchList\n      listProps={{\n        ...(stately.items !== undefined && { items: stately.items }),\n        children: stately.children,\n        ...(stately.disabledKeys !== undefined && { disabledKeys: stately.disabledKeys }),\n        selectionMode: stately.selectionMode ?? 'single',\n        // A single choice stays chosen when pressed again, as in a non-searchable Select.\n        disallowEmptySelection: stately.selectionMode !== 'multiple',\n        selectedKeys: state.selectionManager.selectedKeys,\n        onSelectionChange: (keys) => {\n          state.selectionManager.setSelectedKeys(keys === 'all' ? [] : keys);\n          if (stately.selectionMode !== 'multiple') state.close();\n        },\n      }}\n      search={search}\n      onSearchChange={setSearch}\n      filter={onSearchChange ? null : filter}\n      autoFocusSearch={!asSheet}\n      labelling={searchLabelling}\n      dialogProps={asSheet ? undefined : { id: dialogId, role: 'dialog', ...searchLabelling }}\n      labels={{ search: labels.search, noResults: labels.noResults, loading: labels.loading }}\n      loading={loading ?? false}\n      isBlocked={cap.isBlocked}\n      embedded={asSheet}\n      classNames={classNames}\n    />\n  ) : (\n    <OptionList\n      embedded={asSheet}\n      listBoxProps={menuProps}\n      state={state}\n      listBoxRef={listBoxRef}\n      emptyLabel={labels.empty}\n      loading={loading}\n      loadingLabel={labels.loading}\n      isBlocked={cap.isBlocked}\n      classNames={classNames}\n    />\n  );\n\n  return (\n    <>\n      <FieldShell\n        variant={variant}\n        density={density}\n        label={label}\n        labelProps={labelProps}\n        required={required}\n        state={fieldState({ disabled, invalid: isInvalid, focused, hovered: isHovered })}\n        floated={hasValue || focused}\n        open={state.isOpen}\n        leadingIcon={leadingIcon}\n        trailing={<DropdownArrow open={state.isOpen} />}\n        errorIcon={errorIcon}\n        errorIconLabel={labels.error}\n        readOnly={readOnly}\n        supportingText={supportingText}\n        descriptionProps={descriptionProps}\n        errorText={resolvedError}\n        errorMessageProps={errorMessageProps}\n        showError={isInvalid && Boolean(resolvedError)}\n        containerRef={containerRef}\n        // No handler is shared: the hover ones and the touch fallback's capture ones.\n        containerProps={{ ...hoverProps, ...strayTouchProps }}\n        onContainerPointerDown={(event) => {\n          // A press anywhere on the field (not only its text) opens it, like Compose.\n          if (disabled || triggerRef.current?.contains(event.target as Node)) return;\n          event.preventDefault();\n          releaseFocusRef.current = false;\n          triggerRef.current?.focus();\n          if (!readOnly) state.toggle();\n        }}\n        rootProps={{ ...rootData, 'data-focus-visible': isFocusVisible || undefined }}\n        rootRef={ref}\n        className={className}\n        classNames={classNames}\n        style={style}\n      >\n        {/* The native select is for forms: submitting under `name`, autofill and native\n            validation. Without them it's left out, so a long list's text (e.g. country names\n            from Intl, which can differ between server and browser) isn't rendered twice. */}\n        {name || autoComplete || form || stately.validationBehavior === 'native' ? (\n          <HiddenSelect\n            state={state}\n            triggerRef={triggerRef}\n            label={label}\n            name={name}\n            isDisabled={disabled}\n            {...(autoComplete && { autoComplete })}\n            {...(form && { form })}\n          />\n        ) : null}\n        <button\n          {...fieldButtonProps}\n          aria-describedby={renderedDescription(fieldButtonProps['aria-describedby'], [\n            !supportingText && descriptionProps.id,\n            !(isInvalid && resolvedError) && errorMessageProps.id,\n          ])}\n          onFocus={(event) => {\n            fieldButtonProps.onFocus?.(event);\n            if (!releaseFocusRef.current) return;\n            releaseFocusRef.current = false;\n            triggerRef.current?.blur();\n          }}\n          // Using the field again means it's wanted, whatever came before.\n          onPointerDown={(event) => {\n            releaseFocusRef.current = false;\n            fieldButtonProps.onPointerDown?.(event);\n          }}\n          onKeyDown={(event) => {\n            releaseFocusRef.current = false;\n            fieldButtonProps.onKeyDown?.(event);\n          }}\n          ref={triggerRef}\n          type=\"button\"\n          className={cn(\n            'flex min-w-0 flex-1 cursor-pointer items-center self-stretch bg-transparent p-0 text-start outline-none',\n            'disabled:cursor-default',\n          )}\n        >\n          <span\n            {...valueProps}\n            className={cn(\n              'min-w-0 flex-1 truncate text-body-large',\n              hasValue\n                ? 'text-[color:var(--_md-comp-text-field-input-text-color)]'\n                : 'text-on-surface-variant',\n              // With a label, the placeholder shows once the label floats (as TextField).\n              !hasValue && hasLabel && 'opacity-0 group-data-floated/field:opacity-100',\n              'group-data-[field-state=disabled]/field:text-on-surface/38',\n              classNames?.value,\n            )}\n          >\n            {hasValue && renderValue ? (\n              <>\n                <span aria-hidden=\"true\">{renderValue(chosenOptions)}</span>\n                <span className=\"sr-only\">{valueText}</span>\n              </>\n            ) : hasValue ? (\n              valueText\n            ) : (\n              (placeholder ?? ' ')\n            )}\n          </span>\n        </button>\n      </FieldShell>\n      {asSheet ? (\n        <LazyBottomSheet\n          // Opens at its own height (up to the window, the list scrolling inside), never half\n          // the window, which left the last options off-screen on a short phone.\n          skipPartiallyExpanded\n          open={state.isOpen}\n          onOpenChange={(open) => (open ? state.open() : state.close())}\n          classNames={\n            searchable\n              ? {\n                  panel: cn(SEARCH_SHEET_HEIGHT, classNames?.sheet),\n                  content: SEARCH_SHEET_CONTENT,\n                }\n              : classNames?.sheet\n                ? { panel: classNames.sheet }\n                : undefined\n          }\n          {...(typeof label === 'string'\n            ? { 'aria-label': label }\n            : { 'aria-label': (rest as { 'aria-label'?: string })['aria-label'] ?? '' })}\n        >\n          <div\n            {...densityAttribute(density)}\n            className=\"flex min-h-0 flex-1 flex-col px-[8px] pb-[16px]\"\n          >\n            {list}\n          </div>\n        </LazyBottomSheet>\n      ) : (\n        <OptionPopover\n          state={state}\n          triggerRef={containerRef}\n          popoverRef={popoverRef}\n          density={density}\n          onPressOutside={() => {\n            releaseFocusRef.current = true;\n          }}\n          // Room to type in a searchable menu, however narrow the field.\n          minWidth={searchable ? 280 : 0}\n        >\n          {list}\n        </OptionPopover>\n      )}\n    </>\n  );\n}\n\nexport type { Key as SelectKey } from 'react-stately';\n"],"mappings":"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"}

package/dist/components/select/search-list.js

@@ -89,7 +89,7 @@ function SearchList({ listProps, search, onSearchChange, filter, autoFocusSearch
 		"data-variant": "standard",
 		className: cn("flex min-h-0 flex-col", embedded ? "flex-1" : [menu.group(), "max-h-[inherit] overflow-hidden"]),
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex h-[calc(52px+var(--md-sys-density,0)*4px)] shrink-0 pb-[4px]",
+			className: cn("flex h-[calc(52px+var(--md-sys-density,0)*4px)] shrink-0 pb-[4px]", embedded && "sticky top-0 z-[1] bg-[var(--_md-comp-sheet-bottom-docked-container-color)]"),
 			children: /* @__PURE__ */ jsxs("div", {
 				...focusProps,
 				"data-tokens": "md-comp-search-bar",

package/dist/components/select/search-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-list.js","names":[],"sources":["../../../src/components/select/search-list.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type RefObject,\n} from 'react';\nimport { useAutocomplete, useFocusRing, useSearchField } from 'react-aria';\nimport { useListState, type Node } from 'react-stately';\nimport type { ListProps } from 'react-stately/useListState';\nimport { cn } from '../../utils/cn';\nimport { menuStyles } from '../menu/menu-styles';\nimport { searchBarStyles } from '../search/search-styles';\nimport { FOCUSABLE_DISABLED_OPTIONS, OptionList, type OptionListClassNames } from './option-list';\n\n/** Material Symbols `search`. */\nconst SearchIcon = () => (\n  <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z\" />\n  </svg>\n);\n\n/**\n * Keeps the items that match, and the sections that still hold one (as React Stately's\n * combobox filters), so a section with no matches disappears with its heading.\n */\nfunction filterNodes<T>(nodes: Iterable<Node<T>>, matches: (node: Node<T>) => boolean): Node<T>[] {\n  const kept: Node<T>[] = [];\n  for (const node of nodes) {\n    if (node.type === 'section') {\n      const children = filterNodes(node.childNodes, matches);\n      if (children.some((child) => child.type === 'item')) {\n        kept.push({ ...node, childNodes: children });\n      }\n    } else if (node.type !== 'item' || matches(node)) {\n      kept.push(node);\n    }\n  }\n  return kept;\n}\n\nexport interface SearchListProps<T> {\n  /** The options, their selection and disabled keys, as for `useListState`. */\n  listProps: ListProps<T>;\n  /** The typed text. */\n  search: string;\n  onSearchChange: (search: string) => void;\n  /** Whether an option matches the search; `null` when the app filters the options itself. */\n  filter: ((textValue: string, search: string, key: Node<T>['key']) => boolean) | null;\n  /** Focus the search when the list opens (in a menu; a sheet shows the list first). */\n  autoFocusSearch: boolean;\n  /** Names the list (the field's label): `aria-labelledby`, or `aria-label` without one. */\n  labelling: { 'aria-label'?: string | undefined; 'aria-labelledby'?: string | undefined };\n  /** In a menu, the panel is the dialog the field opens (`role`, `id`, its name). */\n  dialogProps?: HTMLAttributes<HTMLDivElement> | undefined;\n  labels: { search: string; noResults: string; loading: string };\n  loading: boolean;\n  isBlocked: ((key: Node<T>['key']) => boolean) | undefined;\n  /** In a sheet: no menu panel of its own. */\n  embedded: boolean;\n  classNames?: (OptionListClassNames & { search?: string }) | undefined;\n}\n\n/*\n * A dense search field (44, 40 or 36px tall at -1 to -3) extends its hit area by up to 4px\n * below it (the gap above the list) and up to 4px above it (the panel's padding, which clips\n * anything further): 48px at -1 and -2, 44px at -3. Like dense menu rows, it can't reach 48px\n * at -3 without covering the first option; it stays well above WCAG 2.5.8's 24px.\n */\nconst denseSearchTarget = [\n  'relative',\n  \"before:absolute before:inset-x-0 before:bottom-full before:h-[clamp(0px,calc(var(--md-sys-density,0)*-4px-clamp(0px,calc(var(--md-sys-density,0)*-2px),4px)),4px)] before:content-['']\",\n  \"after:absolute after:inset-x-0 after:top-full after:h-[clamp(0px,calc(var(--md-sys-density,0)*-2px),4px)] after:content-['']\",\n];\n\n/**\n * A search field over an option list, wired as one editable combobox with list autocomplete\n * (React Aria `useAutocomplete`): typing filters the options, the arrow keys move through\n * them while focus stays in the search (`aria-activedescendant`), Enter chooses, and Escape\n * clears the search, then reaches the menu or sheet to close it. The search is the M3 search\n * bar's field at 48px, M3's minimum touch target, so it doesn't dominate the 44px rows.\n * Used by `Select`'s `searchable` and `PhoneField`'s country field.\n */\nexport function SearchList<T>({\n  listProps,\n  search,\n  onSearchChange,\n  filter,\n  autoFocusSearch,\n  labelling,\n  dialogProps,\n  labels,\n  loading,\n  isBlocked,\n  embedded,\n  classNames,\n}: SearchListProps<T>) {\n  const matches = useCallback(\n    (nodes: Iterable<Node<T>>) =>\n      filter ? filterNodes(nodes, (node) => filter(node.textValue, search, node.key)) : [...nodes],\n    [filter, search],\n  );\n  const state = useListState<T>({ ...listProps, ...FOCUSABLE_DISABLED_OPTIONS, filter: matches });\n\n  const [focusedNodeId, setFocusedNodeId] = useState<string | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listBoxRef = useRef<HTMLUListElement>(null);\n  const {\n    inputProps: autocompleteInputProps,\n    collectionProps,\n    collectionRef,\n  } = useAutocomplete(\n    { inputRef, collectionRef: listBoxRef },\n    { inputValue: search, setInputValue: onSearchChange, focusedNodeId, setFocusedNodeId },\n  );\n  const { inputProps } = useSearchField(\n    { ...autocompleteInputProps, 'aria-label': labels.search, placeholder: labels.search },\n    { value: search, setValue: onSearchChange },\n    inputRef,\n  );\n  const { focusProps, isFocusVisible } = useFocusRing({ within: true, isTextInput: true });\n\n  useEffect(() => {\n    if (autoFocusSearch) inputRef.current?.focus();\n  }, [autoFocusSearch]);\n\n  const field = searchBarStyles({ hasLeading: true });\n  const menu = menuStyles({ variant: 'standard', groupPosition: 'only' });\n\n  return (\n    <div\n      {...dialogProps}\n      // The menu's component tokens (menu-tokens.ts) for its panel and options.\n      data-tokens=\"md-comp-menus\"\n      data-variant=\"standard\"\n      className={cn(\n        'flex min-h-0 flex-col',\n        embedded ? 'flex-1' : [menu.group(), 'max-h-[inherit] overflow-hidden'],\n      )}\n    >\n      {/* 48px (4px less per density step), 4px above the list, like the panel's 4px padding\n          around it. */}\n      <div className=\"flex h-[calc(52px+var(--md-sys-density,0)*4px)] shrink-0 pb-[4px]\">\n        <div\n          {...focusProps}\n          data-tokens=\"md-comp-search-bar\"\n          data-focus-visible={isFocusVisible || undefined}\n          // A press on the hit area around a dense field (below) puts the caret in the input.\n          onPointerDown={(event) => {\n            if (event.target !== event.currentTarget) return;\n            event.preventDefault();\n            inputRef.current?.focus();\n          }}\n          className={field.field({ class: cn(denseSearchTarget, classNames?.search) })}\n        >\n          <span data-slot=\"leading\" className={field.leading({ class: 'h-full' })}>\n            <SearchIcon />\n          </span>\n          <input {...inputProps} ref={inputRef} data-slot=\"input\" className={field.input()} />\n        </div>\n      </div>\n      <OptionList\n        embedded\n        animateFiltering\n        listBoxProps={{\n          ...collectionProps,\n          ...labelling,\n          // Escape belongs to the search and then the menu; the list must not take it to\n          // clear the selection (which also kept a chosen option's menu from closing).\n          escapeKeyBehavior: 'none',\n        }}\n        state={state}\n        listBoxRef={collectionRef as RefObject<HTMLUListElement | null>}\n        emptyLabel={labels.noResults}\n        loading={loading}\n        loadingLabel={labels.loading}\n        isBlocked={isBlocked}\n        classNames={classNames}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"search-list.js","names":[],"sources":["../../../src/components/select/search-list.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type RefObject,\n} from 'react';\nimport { useAutocomplete, useFocusRing, useSearchField } from 'react-aria';\nimport { useListState, type Node } from 'react-stately';\nimport type { ListProps } from 'react-stately/useListState';\nimport { cn } from '../../utils/cn';\nimport { menuStyles } from '../menu/menu-styles';\nimport { searchBarStyles } from '../search/search-styles';\nimport { FOCUSABLE_DISABLED_OPTIONS, OptionList, type OptionListClassNames } from './option-list';\n\n/** Material Symbols `search`. */\nconst SearchIcon = () => (\n  <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z\" />\n  </svg>\n);\n\n/**\n * Keeps the items that match, and the sections that still hold one (as React Stately's\n * combobox filters), so a section with no matches disappears with its heading.\n */\nfunction filterNodes<T>(nodes: Iterable<Node<T>>, matches: (node: Node<T>) => boolean): Node<T>[] {\n  const kept: Node<T>[] = [];\n  for (const node of nodes) {\n    if (node.type === 'section') {\n      const children = filterNodes(node.childNodes, matches);\n      if (children.some((child) => child.type === 'item')) {\n        kept.push({ ...node, childNodes: children });\n      }\n    } else if (node.type !== 'item' || matches(node)) {\n      kept.push(node);\n    }\n  }\n  return kept;\n}\n\nexport interface SearchListProps<T> {\n  /** The options, their selection and disabled keys, as for `useListState`. */\n  listProps: ListProps<T>;\n  /** The typed text. */\n  search: string;\n  onSearchChange: (search: string) => void;\n  /** Whether an option matches the search; `null` when the app filters the options itself. */\n  filter: ((textValue: string, search: string, key: Node<T>['key']) => boolean) | null;\n  /** Focus the search when the list opens (in a menu; a sheet shows the list first). */\n  autoFocusSearch: boolean;\n  /** Names the list (the field's label): `aria-labelledby`, or `aria-label` without one. */\n  labelling: { 'aria-label'?: string | undefined; 'aria-labelledby'?: string | undefined };\n  /** In a menu, the panel is the dialog the field opens (`role`, `id`, its name). */\n  dialogProps?: HTMLAttributes<HTMLDivElement> | undefined;\n  labels: { search: string; noResults: string; loading: string };\n  loading: boolean;\n  isBlocked: ((key: Node<T>['key']) => boolean) | undefined;\n  /** In a sheet: no menu panel of its own. */\n  embedded: boolean;\n  classNames?: (OptionListClassNames & { search?: string }) | undefined;\n}\n\n/*\n * A dense search field (44, 40 or 36px tall at -1 to -3) extends its hit area by up to 4px\n * below it (the gap above the list) and up to 4px above it (the panel's padding, which clips\n * anything further): 48px at -1 and -2, 44px at -3. Like dense menu rows, it can't reach 48px\n * at -3 without covering the first option; it stays well above WCAG 2.5.8's 24px.\n */\nconst denseSearchTarget = [\n  'relative',\n  \"before:absolute before:inset-x-0 before:bottom-full before:h-[clamp(0px,calc(var(--md-sys-density,0)*-4px-clamp(0px,calc(var(--md-sys-density,0)*-2px),4px)),4px)] before:content-['']\",\n  \"after:absolute after:inset-x-0 after:top-full after:h-[clamp(0px,calc(var(--md-sys-density,0)*-2px),4px)] after:content-['']\",\n];\n\n/**\n * A search field over an option list, wired as one editable combobox with list autocomplete\n * (React Aria `useAutocomplete`): typing filters the options, the arrow keys move through\n * them while focus stays in the search (`aria-activedescendant`), Enter chooses, and Escape\n * clears the search, then reaches the menu or sheet to close it. The search is the M3 search\n * bar's field at 48px, M3's minimum touch target, so it doesn't dominate the 44px rows.\n * Used by `Select`'s `searchable` and `PhoneField`'s country field.\n */\nexport function SearchList<T>({\n  listProps,\n  search,\n  onSearchChange,\n  filter,\n  autoFocusSearch,\n  labelling,\n  dialogProps,\n  labels,\n  loading,\n  isBlocked,\n  embedded,\n  classNames,\n}: SearchListProps<T>) {\n  const matches = useCallback(\n    (nodes: Iterable<Node<T>>) =>\n      filter ? filterNodes(nodes, (node) => filter(node.textValue, search, node.key)) : [...nodes],\n    [filter, search],\n  );\n  const state = useListState<T>({ ...listProps, ...FOCUSABLE_DISABLED_OPTIONS, filter: matches });\n\n  const [focusedNodeId, setFocusedNodeId] = useState<string | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listBoxRef = useRef<HTMLUListElement>(null);\n  const {\n    inputProps: autocompleteInputProps,\n    collectionProps,\n    collectionRef,\n  } = useAutocomplete(\n    { inputRef, collectionRef: listBoxRef },\n    { inputValue: search, setInputValue: onSearchChange, focusedNodeId, setFocusedNodeId },\n  );\n  const { inputProps } = useSearchField(\n    { ...autocompleteInputProps, 'aria-label': labels.search, placeholder: labels.search },\n    { value: search, setValue: onSearchChange },\n    inputRef,\n  );\n  const { focusProps, isFocusVisible } = useFocusRing({ within: true, isTextInput: true });\n\n  useEffect(() => {\n    if (autoFocusSearch) inputRef.current?.focus();\n  }, [autoFocusSearch]);\n\n  const field = searchBarStyles({ hasLeading: true });\n  const menu = menuStyles({ variant: 'standard', groupPosition: 'only' });\n\n  return (\n    <div\n      {...dialogProps}\n      // The menu's component tokens (menu-tokens.ts) for its panel and options.\n      data-tokens=\"md-comp-menus\"\n      data-variant=\"standard\"\n      className={cn(\n        'flex min-h-0 flex-col',\n        embedded ? 'flex-1' : [menu.group(), 'max-h-[inherit] overflow-hidden'],\n      )}\n    >\n      {/* 48px (4px less per density step), 4px above the list, like the panel's 4px padding\n          around it. In a sheet the whole content scrolls (its swipe-to-dismiss reads that\n          scroller's position), so the search sticks to the top, over the options passing under. */}\n      <div\n        className={cn(\n          'flex h-[calc(52px+var(--md-sys-density,0)*4px)] shrink-0 pb-[4px]',\n          embedded && 'sticky top-0 z-[1] bg-[var(--_md-comp-sheet-bottom-docked-container-color)]',\n        )}\n      >\n        <div\n          {...focusProps}\n          data-tokens=\"md-comp-search-bar\"\n          data-focus-visible={isFocusVisible || undefined}\n          // A press on the hit area around a dense field (below) puts the caret in the input.\n          onPointerDown={(event) => {\n            if (event.target !== event.currentTarget) return;\n            event.preventDefault();\n            inputRef.current?.focus();\n          }}\n          className={field.field({ class: cn(denseSearchTarget, classNames?.search) })}\n        >\n          <span data-slot=\"leading\" className={field.leading({ class: 'h-full' })}>\n            <SearchIcon />\n          </span>\n          <input {...inputProps} ref={inputRef} data-slot=\"input\" className={field.input()} />\n        </div>\n      </div>\n      <OptionList\n        embedded\n        animateFiltering\n        listBoxProps={{\n          ...collectionProps,\n          ...labelling,\n          // Escape belongs to the search and then the menu; the list must not take it to\n          // clear the selection (which also kept a chosen option's menu from closing).\n          escapeKeyBehavior: 'none',\n        }}\n        state={state}\n        listBoxRef={collectionRef as RefObject<HTMLUListElement | null>}\n        emptyLabel={labels.noResults}\n        loading={loading}\n        loadingLabel={labels.loading}\n        isBlocked={isBlocked}\n        classNames={classNames}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/sheet/SideSheet.d.ts

@@ -9,6 +9,8 @@ export interface SideSheetClassNames {
   container?: string;
   /** The dimmed layer behind a modal sheet. */
   scrim?: string;
+  /** The box around a standard sheet's surface, which holds a detached sheet's margins. */
+  frame?: string;
   /** The sheet's surface: its colour, corners, width and shadow. */
   panel?: string;
   /** The header row: back button, title, actions and close button. */

package/dist/components/sheet/SideSheet.js

@@ -268,7 +268,7 @@ function StandardSideSheet({ state, detached = false, edge = "end", swipeable: _
 			className: styles.standardClip(),
 			children: /* @__PURE__ */ jsx("div", {
 				ref: frameRef,
-				className: styles.standardFrame(),
+				className: styles.standardFrame({ class: body.classNames?.frame }),
 				children: /* @__PURE__ */ jsx("div", {
 					"data-slot": "panel",
 					className: styles.panel({ class: body.classNames?.panel }),

package/dist/components/sheet/SideSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideSheet.js","names":["Overlay"],"sources":["../../../src/components/sheet/SideSheet.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type FocusEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  mergeProps,\n  useDialog,\n  useModalOverlay,\n  useObjectRef,\n  type AriaDialogProps,\n} from 'react-aria';\nimport { useOverlayTriggerState, type OverlayTriggerState } from 'react-stately';\nimport { Overlay } from '../../primitives/Overlay';\nimport { TriggerContext } from '../../primitives/TriggerContext';\nimport { usePresence } from '../../primitives/use-presence';\nimport { closedByOverlayOptions, type ClosedBy } from '../../utils/closed-by';\nimport { cn } from '../../utils/cn';\nimport { focusFirstInteractive, tabbables } from '../../utils/focus';\nimport { DensityZeroButtons } from '../button/DensityZeroButtons';\nimport { IconButton } from '../icon-button/IconButton';\nimport { BackIcon, CloseIcon } from './sheet-icons';\nimport { SHEET_EXIT_PROPERTIES, sideSheetStyles } from './sheet-styles';\nimport { SheetTriggerContext } from './SheetTrigger';\nimport { useSideSwipe } from './use-side-swipe';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\nexport interface SideSheetClassNames {\n  /**\n   * The outermost element, which places the sheet (where `className` and `style` go too):\n   * a modal sheet's box `fixed` to the window's `edge`, or a standard sheet's layout box.\n   */\n  container?: string;\n  /** The dimmed layer behind a modal sheet. */\n  scrim?: string;\n  /** The sheet's surface: its colour, corners, width and shadow. */\n  panel?: string;\n  /** The header row: back button, title, actions and close button. */\n  header?: string;\n  /** The back button. */\n  back?: string;\n  /** The headline. */\n  title?: string;\n  /** The end of the header: `actions` and the close button. */\n  headerActions?: string;\n  /** The close button. */\n  close?: string;\n  /** The scrollable content area. */\n  content?: string;\n  /** The bottom row of action buttons. */\n  footer?: string;\n}\n\n/** Words the side sheet announces. */\nexport interface SideSheetLabels {\n  /** The close button. @default \"Close\" */\n  close: string;\n  /** The back button (with `onBack`). @default \"Back\" */\n  back: string;\n}\n\nconst DEFAULT_LABELS: SideSheetLabels = { close: 'Close', back: 'Back' };\n\ninterface SideSheetRenderProps {\n  /** Closes a modal sheet, or reports `onOpenChange(false)` for a standard one. */\n  close: () => void;\n}\n\ninterface SideSheetOwnProps {\n  /**\n   * `modal` opens over a scrim as a dialog; `standard` sits in the layout beside the\n   * content and opens and closes its width. @default \"modal\"\n   */\n  variant?: 'modal' | 'standard';\n  /** Float 16px from the edges with corners all round. @default false */\n  detached?: boolean;\n  /**\n   * The window edge the sheet is anchored to: `end` (the right in a left-to-right page, the\n   * left in RTL, as M3 asks) or `start`. A modal sheet slides in from it and swipes out toward\n   * it; a standard sheet faces it, with its divider on the other side. The root's `data-edge`\n   * says which.\n   * @default \"end\"\n   */\n  edge?: 'start' | 'end';\n  /**\n   * Whether a touch or pen swipe toward the sheet's edge closes a modal sheet (past half its\n   * width, or a fling). The close button, Escape and the scrim still close it either way, and\n   * a mouse drag never moves it. Off when `closedBy` is `\"none\"`; a standard sheet ignores\n   * it. To keep the sheet open after a swipe (unsaved changes), control `open` and leave it\n   * `true`: the sheet springs back.\n   * @default true\n   */\n  swipeable?: boolean;\n  /** Whether the sheet is open (controlled). */\n  open?: boolean;\n  /** Whether the sheet starts open when uncontrolled. @default false, or true when standard */\n  defaultOpen?: boolean;\n  /** Called when the sheet opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** The headline. It names the sheet. */\n  title?: ReactNode;\n  /** Shows a back button before the title, for a sheet with several levels. */\n  onBack?: () => void;\n  /** Header controls before the close button. */\n  actions?: ReactNode | ((props: SideSheetRenderProps) => ReactNode);\n  /** Bottom action buttons, start-aligned, e.g. Save and Cancel. */\n  footer?: ReactNode | ((props: SideSheetRenderProps) => ReactNode);\n  /** A divider between the content and `footer`. @default false */\n  footerDivider?: boolean;\n  /** A divider between a standard sheet and the content beside it. @default true */\n  divider?: boolean;\n  /**\n   * How the user can close a modal sheet, as HTML's `<dialog closedby>`: `any` (Escape, a\n   * press on the scrim or a swipe), `closerequest` (Escape or a swipe) or `none` (only its\n   * buttons or the app).\n   * @default \"any\"\n   */\n  closedBy?: ClosedBy;\n  /** Replaces the close button's icon. */\n  closeIcon?: ReactElement;\n  /** Replaces the back button's icon. */\n  backIcon?: ReactElement;\n  /** Words the sheet announces, with English defaults. */\n  labels?: Partial<SideSheetLabels>;\n  children?: ReactNode | ((props: SideSheetRenderProps) => ReactNode);\n  /** Classes for each part, by slot. */\n  classNames?: SideSheetClassNames;\n  /**\n   * Goes with `style` on the outermost element, the box that places the sheet, so a layout class\n   * moves the whole sheet and never clips or stretches its surface. Style the surface with\n   * `classNames.panel`; `ref`, `data-*` and other attributes go on the panel (a standard\n   * sheet's are on its outer box).\n   */\n  className?: string;\n  /** Goes on the outermost element, with `className`. */\n  style?: CSSProperties;\n  /** Ref to the panel, the sheet's surface (`role=\"dialog\"`); a standard sheet's outer box. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype Naming =\n  | {\n      title: ReactNode;\n      /** Accessible name when there's no visible title; overrides `title` when both are set. */\n      'aria-label'?: string;\n    }\n  | {\n      /** Accessible name when there's no visible title. */\n      'aria-label': string;\n    }\n  | {\n      /** Id of a visible element that names the sheet, when there's no `title`. */\n      'aria-labelledby': string;\n    };\n\nexport type SideSheetProps = SideSheetOwnProps &\n  Naming &\n  Omit<ComponentPropsWithRef<'div'>, keyof SideSheetOwnProps | 'aria-label' | 'aria-labelledby'>;\n\n/**\n * M3 side sheet: supplementary content at the end edge of the window (`edge=\"start\"` for the\n * other). A modal sheet slides in over a scrim as a dialog (Escape, a press outside or a\n * touch swipe toward its edge closes it); a standard sheet sits in the layout as a non-modal\n * dialog and opens and closes its width. Both always show a close button, as M3 requires.\n *\n * @example\n * <SheetTrigger>\n *   <Button>Filters</Button>\n *   <SideSheet title=\"Filters\" footer={({ close }) => <Button onPress={close}>Apply</Button>}>\n *     …\n *   </SideSheet>\n * </SheetTrigger>\n */\nexport function SideSheet({\n  variant = 'modal',\n  open,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}: SideSheetProps) {\n  const trigger = useContext(SheetTriggerContext);\n  const ownState = useOverlayTriggerState({\n    isOpen: open,\n    defaultOpen: defaultOpen ?? (variant === 'standard' ? true : undefined),\n    onOpenChange,\n  });\n  const state = (variant === 'modal' ? trigger?.state : undefined) ?? ownState;\n  const { isPresent, isExiting, exitProps } = usePresence(state.isOpen, SHEET_EXIT_PROPERTIES);\n  if (variant === 'standard') return <StandardSideSheet {...props} state={state} />;\n  if (!isPresent) return null;\n  return (\n    <Overlay exiting={isExiting}>\n      <ModalSideSheet\n        {...props}\n        state={state}\n        isExiting={isExiting}\n        exitProps={exitProps}\n        triggerOverlayProps={trigger?.overlayProps}\n      />\n    </Overlay>\n  );\n}\n\ntype InnerProps = Omit<SideSheetProps, 'variant' | 'open' | 'defaultOpen' | 'onOpenChange'> & {\n  state: OverlayTriggerState;\n};\n\ntype BodyProps = Pick<\n  SideSheetOwnProps,\n  | 'title'\n  | 'onBack'\n  | 'actions'\n  | 'footer'\n  | 'children'\n  | 'closeIcon'\n  | 'backIcon'\n  | 'labels'\n  | 'classNames'\n> & {\n  titleId: string;\n  close: () => void;\n  styles: ReturnType<typeof sideSheetStyles>;\n  contentRef?: Ref<HTMLDivElement>;\n};\n\nfunction SheetBody({\n  title,\n  titleId,\n  onBack,\n  actions,\n  footer,\n  children,\n  closeIcon,\n  backIcon,\n  labels: labelsProp,\n  close,\n  styles,\n  classNames,\n  contentRef,\n}: BodyProps) {\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const renderProps = { close };\n  const render = (slot: SideSheetOwnProps['children']) =>\n    typeof slot === 'function' ? slot(renderProps) : slot;\n  return (\n    <>\n      <div className={styles.header({ class: classNames?.header })}>\n        {onBack && (\n          <IconButton\n            variant=\"standard\"\n            density={0}\n            icon={backIcon ?? <BackIcon />}\n            aria-label={labels.back}\n            onPress={onBack}\n            className={classNames?.back}\n          />\n        )}\n        {title != null && (\n          <h2 id={titleId} className={styles.title({ class: classNames?.title })}>\n            {title}\n          </h2>\n        )}\n        <div className={styles.headerActions({ class: classNames?.headerActions })}>\n          <DensityZeroButtons>{render(actions)}</DensityZeroButtons>\n          <IconButton\n            variant=\"standard\"\n            density={0}\n            icon={closeIcon ?? <CloseIcon />}\n            aria-label={labels.close}\n            onPress={close}\n            className={classNames?.close}\n          />\n        </div>\n      </div>\n      <div ref={contentRef} className={styles.content({ class: classNames?.content })}>\n        {render(children)}\n      </div>\n      {footer != null && (\n        <div className={styles.footer({ class: classNames?.footer })}>{render(footer)}</div>\n      )}\n    </>\n  );\n}\n\nconst BODY_KEYS = [\n  'title',\n  'onBack',\n  'actions',\n  'footer',\n  'children',\n  'closeIcon',\n  'backIcon',\n  'labels',\n  'classNames',\n] as const;\n\n/** Splits the header, body and footer props from those of the panel element. */\nfunction splitBodyProps<T extends Record<string, unknown>>(props: T) {\n  const body: Record<string, unknown> = {};\n  const rest: Record<string, unknown> = { ...props };\n  for (const key of BODY_KEYS) {\n    body[key] = rest[key];\n    delete rest[key];\n  }\n  return {\n    body: body as Omit<BodyProps, 'titleId' | 'close' | 'styles' | 'contentRef'>,\n    rest: rest as Omit<T, (typeof BODY_KEYS)[number]>,\n  };\n}\n\n/** `aria-labelledby` for the panel: the consumer's, else the title's unless `aria-label` names it. */\nfunction labelledBy(props: Record<string, unknown>, hasTitle: boolean, titleId: string) {\n  const own = props['aria-labelledby'] as string | undefined;\n  return own ?? (props['aria-label'] == null && hasTitle ? titleId : undefined);\n}\n\nfunction ModalSideSheet({\n  state,\n  isExiting,\n  exitProps,\n  triggerOverlayProps,\n  detached = false,\n  edge = 'end',\n  swipeable = true,\n  closedBy = 'any',\n  divider: _divider,\n  footerDivider = false,\n  className,\n  style,\n  ref,\n  ...props\n}: InnerProps & {\n  isExiting: boolean;\n  exitProps: ReturnType<typeof usePresence>['exitProps'];\n  triggerOverlayProps?: { id?: string };\n}) {\n  const { body, rest } = splitBodyProps(props);\n  const panelRef = useObjectRef(ref as Ref<HTMLDivElement>);\n  const motionRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  // `closedBy=\"none\"` leaves closing to the app, so a swipe doesn't close it either.\n  const canSwipe = swipeable && closedBy !== 'none';\n  const styles = sideSheetStyles({\n    variant: 'modal',\n    edge,\n    swipeable: canSwipe,\n    detached,\n    hasBack: body.onBack != null,\n    footerDivider,\n  });\n  const { panelHandlers, motionProps, dragging } = useSideSwipe({\n    enabled: canSwipe && !isExiting,\n    edge,\n    isOpen: state.isOpen,\n    close: state.close,\n    panelRef,\n    motionRef,\n    contentRef,\n  });\n  const { modalProps, underlayProps } = useModalOverlay(\n    closedByOverlayOptions(closedBy, isExiting),\n    state,\n    panelRef,\n  );\n  const { dialogProps } = useDialog(\n    {\n      ...(rest as AriaDialogProps),\n      'aria-labelledby': labelledBy(rest, body.title != null, titleId),\n    },\n    panelRef,\n  );\n  // M3: focus lands on the first (non-disabled) icon button, as in a Dialog, not the panel.\n  useEffect(() => focusFirstInteractive(panelRef.current), [panelRef]);\n  const exiting = isExiting || undefined;\n  return (\n    <>\n      <div\n        aria-hidden=\"true\"\n        data-exiting={exiting}\n        className={styles.scrim({ class: body.classNames?.scrim })}\n      />\n      <div {...underlayProps} className=\"fixed inset-0 z-(--md-sys-z-sheet)\">\n        <div\n          style={style}\n          className={styles.container({ class: cn(body.classNames?.container, className) })}\n        >\n          <div\n            {...mergeProps(exitProps, motionProps)}\n            ref={motionRef}\n            data-exiting={exiting}\n            className={styles.motion()}\n          >\n            <div\n              {...mergeProps(\n                rest,\n                triggerOverlayProps ?? {},\n                modalProps,\n                dialogProps,\n                panelHandlers,\n              )}\n              ref={panelRef}\n              // The component tokens' hooks (sheet-tokens.ts); `data-variant` and `data-edge`\n              // are also public.\n              data-tokens={mergeDataTokens('md-comp-sheet-side', rest)}\n              data-variant=\"modal\"\n              data-edge={edge}\n              data-detached={detached || undefined}\n              data-dragging={dragging || undefined}\n              data-exiting={exiting}\n              className={styles.panel({ class: body.classNames?.panel })}\n            >\n              <TriggerContext value={null}>\n                <SheetBody\n                  {...body}\n                  titleId={titleId}\n                  close={state.close}\n                  styles={styles}\n                  contentRef={contentRef}\n                />\n              </TriggerContext>\n            </div>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nfunction StandardSideSheet({\n  state,\n  detached = false,\n  edge = 'end',\n  swipeable: _swipeable,\n  divider = true,\n  footerDivider = false,\n  closedBy: _closedBy,\n  className,\n  style,\n  ref,\n  ...props\n}: InnerProps) {\n  const { body, rest } = splitBodyProps(props);\n  const titleId = useId();\n  const styles = sideSheetStyles({\n    variant: 'standard',\n    edge,\n    detached,\n    divider,\n    hasBack: body.onBack != null,\n    footerDivider,\n  });\n  const closed = !state.isOpen || undefined;\n  const rootRef = useObjectRef(ref as Ref<HTMLDivElement>);\n  const frameRef = useRef<HTMLDivElement>(null);\n  // The sheet's open width, measured, so the root's width (not a grid fraction, which takes\n  // only part of the shrinking free space and left the panel floating off its edge) moves\n  // between it and 0. Until it's measured (the server's HTML) the open root is `auto` wide.\n  const [width, setWidth] = useState<number | null>(null);\n  useLayoutEffect(() => {\n    const frame = frameRef.current;\n    if (!frame) return;\n    // The layout width, not the box on screen, which a consumer transform scales or turns.\n    const measure = () => setWidth(frame.offsetWidth);\n    measure();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(frame);\n    return () => observer.disconnect();\n  }, []);\n  // Focus that came from outside returns there when the sheet closes with focus inside (its\n  // close button, Escape in content, or the app closing it): the closed sheet is `inert`, and\n  // focus would otherwise drop to the page.\n  const returnFocus = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    const active = root?.ownerDocument.activeElement;\n    if (state.isOpen || !root || !(active instanceof HTMLElement) || !root.contains(active)) return;\n    const saved = returnFocus.current;\n    const target =\n      saved?.isConnected && !root.contains(saved) && !saved.closest('[inert]')\n        ? saved\n        : (tabbables(root.ownerDocument.body, (el) => root.contains(el))\n            .filter((el) => el.compareDocumentPosition(root) & Node.DOCUMENT_POSITION_FOLLOWING)\n            .at(-1) ?? null);\n    if (target) target.focus({ preventScroll: true });\n    else active.blur();\n  }, [state.isOpen, rootRef]);\n  const rootStyle = {\n    ...style,\n    ...(width === null ? {} : { '--m3-side-sheet-width': `${width}px` }),\n  } as CSSProperties;\n  // A non-modal dialog (m3.material.io: the side sheet's role is dialog); focus isn't moved.\n  return (\n    <div\n      {...rest}\n      onFocus={(event: FocusEvent<HTMLDivElement>) => {\n        (rest as { onFocus?: (event: FocusEvent<HTMLDivElement>) => void }).onFocus?.(event);\n        const from = event.relatedTarget;\n        if (from instanceof HTMLElement && !event.currentTarget.contains(from)) {\n          returnFocus.current = from;\n        }\n      }}\n      ref={rootRef}\n      role=\"dialog\"\n      style={rootStyle}\n      // The component tokens' hooks (sheet-tokens.ts), read by the panel inside.\n      data-tokens={mergeDataTokens('md-comp-sheet-side', rest)}\n      data-variant=\"standard\"\n      data-edge={edge}\n      data-detached={detached || undefined}\n      data-closed={closed}\n      inert={!state.isOpen}\n      aria-labelledby={labelledBy(rest, body.title != null, titleId)}\n      className={styles.standard({ class: cn(body.classNames?.container, className) })}\n    >\n      <div className={styles.standardClip()}>\n        <div ref={frameRef} className={styles.standardFrame()}>\n          <div data-slot=\"panel\" className={styles.panel({ class: body.classNames?.panel })}>\n            <SheetBody {...body} titleId={titleId} close={state.close} styles={styles} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SideSheet.js","names":["Overlay"],"sources":["../../../src/components/sheet/SideSheet.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type FocusEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  mergeProps,\n  useDialog,\n  useModalOverlay,\n  useObjectRef,\n  type AriaDialogProps,\n} from 'react-aria';\nimport { useOverlayTriggerState, type OverlayTriggerState } from 'react-stately';\nimport { Overlay } from '../../primitives/Overlay';\nimport { TriggerContext } from '../../primitives/TriggerContext';\nimport { usePresence } from '../../primitives/use-presence';\nimport { closedByOverlayOptions, type ClosedBy } from '../../utils/closed-by';\nimport { cn } from '../../utils/cn';\nimport { focusFirstInteractive, tabbables } from '../../utils/focus';\nimport { DensityZeroButtons } from '../button/DensityZeroButtons';\nimport { IconButton } from '../icon-button/IconButton';\nimport { BackIcon, CloseIcon } from './sheet-icons';\nimport { SHEET_EXIT_PROPERTIES, sideSheetStyles } from './sheet-styles';\nimport { SheetTriggerContext } from './SheetTrigger';\nimport { useSideSwipe } from './use-side-swipe';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\n\nexport interface SideSheetClassNames {\n  /**\n   * The outermost element, which places the sheet (where `className` and `style` go too):\n   * a modal sheet's box `fixed` to the window's `edge`, or a standard sheet's layout box.\n   */\n  container?: string;\n  /** The dimmed layer behind a modal sheet. */\n  scrim?: string;\n  /** The box around a standard sheet's surface, which holds a detached sheet's margins. */\n  frame?: string;\n  /** The sheet's surface: its colour, corners, width and shadow. */\n  panel?: string;\n  /** The header row: back button, title, actions and close button. */\n  header?: string;\n  /** The back button. */\n  back?: string;\n  /** The headline. */\n  title?: string;\n  /** The end of the header: `actions` and the close button. */\n  headerActions?: string;\n  /** The close button. */\n  close?: string;\n  /** The scrollable content area. */\n  content?: string;\n  /** The bottom row of action buttons. */\n  footer?: string;\n}\n\n/** Words the side sheet announces. */\nexport interface SideSheetLabels {\n  /** The close button. @default \"Close\" */\n  close: string;\n  /** The back button (with `onBack`). @default \"Back\" */\n  back: string;\n}\n\nconst DEFAULT_LABELS: SideSheetLabels = { close: 'Close', back: 'Back' };\n\ninterface SideSheetRenderProps {\n  /** Closes a modal sheet, or reports `onOpenChange(false)` for a standard one. */\n  close: () => void;\n}\n\ninterface SideSheetOwnProps {\n  /**\n   * `modal` opens over a scrim as a dialog; `standard` sits in the layout beside the\n   * content and opens and closes its width. @default \"modal\"\n   */\n  variant?: 'modal' | 'standard';\n  /** Float 16px from the edges with corners all round. @default false */\n  detached?: boolean;\n  /**\n   * The window edge the sheet is anchored to: `end` (the right in a left-to-right page, the\n   * left in RTL, as M3 asks) or `start`. A modal sheet slides in from it and swipes out toward\n   * it; a standard sheet faces it, with its divider on the other side. The root's `data-edge`\n   * says which.\n   * @default \"end\"\n   */\n  edge?: 'start' | 'end';\n  /**\n   * Whether a touch or pen swipe toward the sheet's edge closes a modal sheet (past half its\n   * width, or a fling). The close button, Escape and the scrim still close it either way, and\n   * a mouse drag never moves it. Off when `closedBy` is `\"none\"`; a standard sheet ignores\n   * it. To keep the sheet open after a swipe (unsaved changes), control `open` and leave it\n   * `true`: the sheet springs back.\n   * @default true\n   */\n  swipeable?: boolean;\n  /** Whether the sheet is open (controlled). */\n  open?: boolean;\n  /** Whether the sheet starts open when uncontrolled. @default false, or true when standard */\n  defaultOpen?: boolean;\n  /** Called when the sheet opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** The headline. It names the sheet. */\n  title?: ReactNode;\n  /** Shows a back button before the title, for a sheet with several levels. */\n  onBack?: () => void;\n  /** Header controls before the close button. */\n  actions?: ReactNode | ((props: SideSheetRenderProps) => ReactNode);\n  /** Bottom action buttons, start-aligned, e.g. Save and Cancel. */\n  footer?: ReactNode | ((props: SideSheetRenderProps) => ReactNode);\n  /** A divider between the content and `footer`. @default false */\n  footerDivider?: boolean;\n  /** A divider between a standard sheet and the content beside it. @default true */\n  divider?: boolean;\n  /**\n   * How the user can close a modal sheet, as HTML's `<dialog closedby>`: `any` (Escape, a\n   * press on the scrim or a swipe), `closerequest` (Escape or a swipe) or `none` (only its\n   * buttons or the app).\n   * @default \"any\"\n   */\n  closedBy?: ClosedBy;\n  /** Replaces the close button's icon. */\n  closeIcon?: ReactElement;\n  /** Replaces the back button's icon. */\n  backIcon?: ReactElement;\n  /** Words the sheet announces, with English defaults. */\n  labels?: Partial<SideSheetLabels>;\n  children?: ReactNode | ((props: SideSheetRenderProps) => ReactNode);\n  /** Classes for each part, by slot. */\n  classNames?: SideSheetClassNames;\n  /**\n   * Goes with `style` on the outermost element, the box that places the sheet, so a layout class\n   * moves the whole sheet and never clips or stretches its surface. Style the surface with\n   * `classNames.panel`; `ref`, `data-*` and other attributes go on the panel (a standard\n   * sheet's are on its outer box).\n   */\n  className?: string;\n  /** Goes on the outermost element, with `className`. */\n  style?: CSSProperties;\n  /** Ref to the panel, the sheet's surface (`role=\"dialog\"`); a standard sheet's outer box. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype Naming =\n  | {\n      title: ReactNode;\n      /** Accessible name when there's no visible title; overrides `title` when both are set. */\n      'aria-label'?: string;\n    }\n  | {\n      /** Accessible name when there's no visible title. */\n      'aria-label': string;\n    }\n  | {\n      /** Id of a visible element that names the sheet, when there's no `title`. */\n      'aria-labelledby': string;\n    };\n\nexport type SideSheetProps = SideSheetOwnProps &\n  Naming &\n  Omit<ComponentPropsWithRef<'div'>, keyof SideSheetOwnProps | 'aria-label' | 'aria-labelledby'>;\n\n/**\n * M3 side sheet: supplementary content at the end edge of the window (`edge=\"start\"` for the\n * other). A modal sheet slides in over a scrim as a dialog (Escape, a press outside or a\n * touch swipe toward its edge closes it); a standard sheet sits in the layout as a non-modal\n * dialog and opens and closes its width. Both always show a close button, as M3 requires.\n *\n * @example\n * <SheetTrigger>\n *   <Button>Filters</Button>\n *   <SideSheet title=\"Filters\" footer={({ close }) => <Button onPress={close}>Apply</Button>}>\n *     …\n *   </SideSheet>\n * </SheetTrigger>\n */\nexport function SideSheet({\n  variant = 'modal',\n  open,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}: SideSheetProps) {\n  const trigger = useContext(SheetTriggerContext);\n  const ownState = useOverlayTriggerState({\n    isOpen: open,\n    defaultOpen: defaultOpen ?? (variant === 'standard' ? true : undefined),\n    onOpenChange,\n  });\n  const state = (variant === 'modal' ? trigger?.state : undefined) ?? ownState;\n  const { isPresent, isExiting, exitProps } = usePresence(state.isOpen, SHEET_EXIT_PROPERTIES);\n  if (variant === 'standard') return <StandardSideSheet {...props} state={state} />;\n  if (!isPresent) return null;\n  return (\n    <Overlay exiting={isExiting}>\n      <ModalSideSheet\n        {...props}\n        state={state}\n        isExiting={isExiting}\n        exitProps={exitProps}\n        triggerOverlayProps={trigger?.overlayProps}\n      />\n    </Overlay>\n  );\n}\n\ntype InnerProps = Omit<SideSheetProps, 'variant' | 'open' | 'defaultOpen' | 'onOpenChange'> & {\n  state: OverlayTriggerState;\n};\n\ntype BodyProps = Pick<\n  SideSheetOwnProps,\n  | 'title'\n  | 'onBack'\n  | 'actions'\n  | 'footer'\n  | 'children'\n  | 'closeIcon'\n  | 'backIcon'\n  | 'labels'\n  | 'classNames'\n> & {\n  titleId: string;\n  close: () => void;\n  styles: ReturnType<typeof sideSheetStyles>;\n  contentRef?: Ref<HTMLDivElement>;\n};\n\nfunction SheetBody({\n  title,\n  titleId,\n  onBack,\n  actions,\n  footer,\n  children,\n  closeIcon,\n  backIcon,\n  labels: labelsProp,\n  close,\n  styles,\n  classNames,\n  contentRef,\n}: BodyProps) {\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const renderProps = { close };\n  const render = (slot: SideSheetOwnProps['children']) =>\n    typeof slot === 'function' ? slot(renderProps) : slot;\n  return (\n    <>\n      <div className={styles.header({ class: classNames?.header })}>\n        {onBack && (\n          <IconButton\n            variant=\"standard\"\n            density={0}\n            icon={backIcon ?? <BackIcon />}\n            aria-label={labels.back}\n            onPress={onBack}\n            className={classNames?.back}\n          />\n        )}\n        {title != null && (\n          <h2 id={titleId} className={styles.title({ class: classNames?.title })}>\n            {title}\n          </h2>\n        )}\n        <div className={styles.headerActions({ class: classNames?.headerActions })}>\n          <DensityZeroButtons>{render(actions)}</DensityZeroButtons>\n          <IconButton\n            variant=\"standard\"\n            density={0}\n            icon={closeIcon ?? <CloseIcon />}\n            aria-label={labels.close}\n            onPress={close}\n            className={classNames?.close}\n          />\n        </div>\n      </div>\n      <div ref={contentRef} className={styles.content({ class: classNames?.content })}>\n        {render(children)}\n      </div>\n      {footer != null && (\n        <div className={styles.footer({ class: classNames?.footer })}>{render(footer)}</div>\n      )}\n    </>\n  );\n}\n\nconst BODY_KEYS = [\n  'title',\n  'onBack',\n  'actions',\n  'footer',\n  'children',\n  'closeIcon',\n  'backIcon',\n  'labels',\n  'classNames',\n] as const;\n\n/** Splits the header, body and footer props from those of the panel element. */\nfunction splitBodyProps<T extends Record<string, unknown>>(props: T) {\n  const body: Record<string, unknown> = {};\n  const rest: Record<string, unknown> = { ...props };\n  for (const key of BODY_KEYS) {\n    body[key] = rest[key];\n    delete rest[key];\n  }\n  return {\n    body: body as Omit<BodyProps, 'titleId' | 'close' | 'styles' | 'contentRef'>,\n    rest: rest as Omit<T, (typeof BODY_KEYS)[number]>,\n  };\n}\n\n/** `aria-labelledby` for the panel: the consumer's, else the title's unless `aria-label` names it. */\nfunction labelledBy(props: Record<string, unknown>, hasTitle: boolean, titleId: string) {\n  const own = props['aria-labelledby'] as string | undefined;\n  return own ?? (props['aria-label'] == null && hasTitle ? titleId : undefined);\n}\n\nfunction ModalSideSheet({\n  state,\n  isExiting,\n  exitProps,\n  triggerOverlayProps,\n  detached = false,\n  edge = 'end',\n  swipeable = true,\n  closedBy = 'any',\n  divider: _divider,\n  footerDivider = false,\n  className,\n  style,\n  ref,\n  ...props\n}: InnerProps & {\n  isExiting: boolean;\n  exitProps: ReturnType<typeof usePresence>['exitProps'];\n  triggerOverlayProps?: { id?: string };\n}) {\n  const { body, rest } = splitBodyProps(props);\n  const panelRef = useObjectRef(ref as Ref<HTMLDivElement>);\n  const motionRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  // `closedBy=\"none\"` leaves closing to the app, so a swipe doesn't close it either.\n  const canSwipe = swipeable && closedBy !== 'none';\n  const styles = sideSheetStyles({\n    variant: 'modal',\n    edge,\n    swipeable: canSwipe,\n    detached,\n    hasBack: body.onBack != null,\n    footerDivider,\n  });\n  const { panelHandlers, motionProps, dragging } = useSideSwipe({\n    enabled: canSwipe && !isExiting,\n    edge,\n    isOpen: state.isOpen,\n    close: state.close,\n    panelRef,\n    motionRef,\n    contentRef,\n  });\n  const { modalProps, underlayProps } = useModalOverlay(\n    closedByOverlayOptions(closedBy, isExiting),\n    state,\n    panelRef,\n  );\n  const { dialogProps } = useDialog(\n    {\n      ...(rest as AriaDialogProps),\n      'aria-labelledby': labelledBy(rest, body.title != null, titleId),\n    },\n    panelRef,\n  );\n  // M3: focus lands on the first (non-disabled) icon button, as in a Dialog, not the panel.\n  useEffect(() => focusFirstInteractive(panelRef.current), [panelRef]);\n  const exiting = isExiting || undefined;\n  return (\n    <>\n      <div\n        aria-hidden=\"true\"\n        data-exiting={exiting}\n        className={styles.scrim({ class: body.classNames?.scrim })}\n      />\n      <div {...underlayProps} className=\"fixed inset-0 z-(--md-sys-z-sheet)\">\n        <div\n          style={style}\n          className={styles.container({ class: cn(body.classNames?.container, className) })}\n        >\n          <div\n            {...mergeProps(exitProps, motionProps)}\n            ref={motionRef}\n            data-exiting={exiting}\n            className={styles.motion()}\n          >\n            <div\n              {...mergeProps(\n                rest,\n                triggerOverlayProps ?? {},\n                modalProps,\n                dialogProps,\n                panelHandlers,\n              )}\n              ref={panelRef}\n              // The component tokens' hooks (sheet-tokens.ts); `data-variant` and `data-edge`\n              // are also public.\n              data-tokens={mergeDataTokens('md-comp-sheet-side', rest)}\n              data-variant=\"modal\"\n              data-edge={edge}\n              data-detached={detached || undefined}\n              data-dragging={dragging || undefined}\n              data-exiting={exiting}\n              className={styles.panel({ class: body.classNames?.panel })}\n            >\n              <TriggerContext value={null}>\n                <SheetBody\n                  {...body}\n                  titleId={titleId}\n                  close={state.close}\n                  styles={styles}\n                  contentRef={contentRef}\n                />\n              </TriggerContext>\n            </div>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nfunction StandardSideSheet({\n  state,\n  detached = false,\n  edge = 'end',\n  swipeable: _swipeable,\n  divider = true,\n  footerDivider = false,\n  closedBy: _closedBy,\n  className,\n  style,\n  ref,\n  ...props\n}: InnerProps) {\n  const { body, rest } = splitBodyProps(props);\n  const titleId = useId();\n  const styles = sideSheetStyles({\n    variant: 'standard',\n    edge,\n    detached,\n    divider,\n    hasBack: body.onBack != null,\n    footerDivider,\n  });\n  const closed = !state.isOpen || undefined;\n  const rootRef = useObjectRef(ref as Ref<HTMLDivElement>);\n  const frameRef = useRef<HTMLDivElement>(null);\n  // The sheet's open width, measured, so the root's width (not a grid fraction, which takes\n  // only part of the shrinking free space and left the panel floating off its edge) moves\n  // between it and 0. Until it's measured (the server's HTML) the open root is `auto` wide.\n  const [width, setWidth] = useState<number | null>(null);\n  useLayoutEffect(() => {\n    const frame = frameRef.current;\n    if (!frame) return;\n    // The layout width, not the box on screen, which a consumer transform scales or turns.\n    const measure = () => setWidth(frame.offsetWidth);\n    measure();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(frame);\n    return () => observer.disconnect();\n  }, []);\n  // Focus that came from outside returns there when the sheet closes with focus inside (its\n  // close button, Escape in content, or the app closing it): the closed sheet is `inert`, and\n  // focus would otherwise drop to the page.\n  const returnFocus = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    const active = root?.ownerDocument.activeElement;\n    if (state.isOpen || !root || !(active instanceof HTMLElement) || !root.contains(active)) return;\n    const saved = returnFocus.current;\n    const target =\n      saved?.isConnected && !root.contains(saved) && !saved.closest('[inert]')\n        ? saved\n        : (tabbables(root.ownerDocument.body, (el) => root.contains(el))\n            .filter((el) => el.compareDocumentPosition(root) & Node.DOCUMENT_POSITION_FOLLOWING)\n            .at(-1) ?? null);\n    if (target) target.focus({ preventScroll: true });\n    else active.blur();\n  }, [state.isOpen, rootRef]);\n  const rootStyle = {\n    ...style,\n    ...(width === null ? {} : { '--m3-side-sheet-width': `${width}px` }),\n  } as CSSProperties;\n  // A non-modal dialog (m3.material.io: the side sheet's role is dialog); focus isn't moved.\n  return (\n    <div\n      {...rest}\n      onFocus={(event: FocusEvent<HTMLDivElement>) => {\n        (rest as { onFocus?: (event: FocusEvent<HTMLDivElement>) => void }).onFocus?.(event);\n        const from = event.relatedTarget;\n        if (from instanceof HTMLElement && !event.currentTarget.contains(from)) {\n          returnFocus.current = from;\n        }\n      }}\n      ref={rootRef}\n      role=\"dialog\"\n      style={rootStyle}\n      // The component tokens' hooks (sheet-tokens.ts), read by the panel inside.\n      data-tokens={mergeDataTokens('md-comp-sheet-side', rest)}\n      data-variant=\"standard\"\n      data-edge={edge}\n      data-detached={detached || undefined}\n      data-closed={closed}\n      inert={!state.isOpen}\n      aria-labelledby={labelledBy(rest, body.title != null, titleId)}\n      className={styles.standard({ class: cn(body.classNames?.container, className) })}\n    >\n      <div className={styles.standardClip()}>\n        <div ref={frameRef} className={styles.standardFrame({ class: body.classNames?.frame })}>\n          <div data-slot=\"panel\" className={styles.panel({ class: body.classNames?.panel })}>\n            <SheetBody {...body} titleId={titleId} close={state.close} styles={styles} />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/text-field/TextField.js

@@ -15,6 +15,14 @@ const DEFAULT_LABELS = {
 	error: "Error",
 	characterCount: (count, max) => `Character count: ${count} of ${max}`
 };
+/** Input types the browser draws its own format in when empty, which a resting label would cover. */
+const FORMAT_SHOWING_TYPES = /* @__PURE__ */ new Set([
+	"date",
+	"time",
+	"datetime-local",
+	"month",
+	"week"
+]);
 const INTERACTIVE = "input, textarea, button, a, [role=\"button\"]";
 /**
 * M3 text field: filled or outlined, with a floating label, leading / trailing icons,
@@ -71,7 +79,7 @@ function TextField(props) {
 		domInputRef
 	]);
 	const hasLabel = label !== void 0 && label !== null;
-	const floated = hasLabel && (isFocused || value.length > 0);
+	const floated = hasLabel && (isFocused || value.length > 0 || FORMAT_SHOWING_TYPES.has(ariaProps.type ?? ""));
 	const state = disabled ? "disabled" : isInvalid ? isFocused ? "error-focus" : isHovered ? "error-hover" : "error" : isFocused ? "focus" : isHovered ? "hover" : "rest";
 	const resolvedError = typeof errorMessage === "function" ? errorMessage({
 		isInvalid,