@m3-baseui/react-tailwind 1.3.0 → 2.0.0

package/dist/{segmented-button.d.ts → components/segmented-button/index.d.ts}

@@ -1,27 +1,28 @@
 import * as _m3_baseui_core from '@m3-baseui/core';
 import * as react from 'react';
 import * as _base_ui_react from '@base-ui/react';
-import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
 import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as tailwind_merge from 'tailwind-merge';
 
 declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            check?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            label?: tailwind_merge.ClassNameValue;
+            icon?: tailwind_merge.ClassNameValue;
+            check?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            check?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
+        [x: string]: tailwind_merge.ClassNameValue | {
+            label?: tailwind_merge.ClassNameValue;
+            icon?: tailwind_merge.ClassNameValue;
+            check?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -32,22 +33,22 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
     label: string;
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            check?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            label?: tailwind_merge.ClassNameValue;
+            icon?: tailwind_merge.ClassNameValue;
+            check?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}>, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            check?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            label?: tailwind_merge.ClassNameValue;
+            icon?: tailwind_merge.ClassNameValue;
+            check?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
@@ -64,12 +65,12 @@ declare const segmentedButtonTv: tailwind_variants.TVReturnType<{
     label: string;
 }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
     [key: string]: {
-        [key: string]: tailwind_variants.ClassValue | {
-            root?: tailwind_variants.ClassValue;
-            label?: tailwind_variants.ClassValue;
-            icon?: tailwind_variants.ClassValue;
-            check?: tailwind_variants.ClassValue;
-            item?: tailwind_variants.ClassValue;
+        [key: string]: tailwind_merge.ClassNameValue | {
+            label?: tailwind_merge.ClassNameValue;
+            icon?: tailwind_merge.ClassNameValue;
+            check?: tailwind_merge.ClassNameValue;
+            root?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

package/dist/{segmented-button.js → components/segmented-button/index.js}

@@ -2,7 +2,7 @@
 import { createSegmentedButton } from '@m3-baseui/core';
 import { tv as tv$1 } from 'tailwind-variants';
 
-// src/segmented-button.ts
+// src/components/segmented-button/segmented-button.ts
 var TYPESCALE = [
   "display-large",
   "display-medium",
@@ -31,7 +31,7 @@ var tv = (options, config) => tv$1(options, {
   }
 });
 
-// src/segmented-button.ts
+// src/components/segmented-button/segmented-button.ts
 var segmentedButtonTv = tv({
   slots: {
     root: "inline-flex items-stretch h-10 rounded-full border border-outline",
@@ -72,5 +72,5 @@ var SegmentedButton = createSegmentedButton({
 });
 
 export { SegmentedButton, segmentedButtonTv };
-//# sourceMappingURL=segmented-button.js.map
-//# sourceMappingURL=segmented-button.js.map
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/segmented-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/tv.ts","../../../src/components/segmented-button/segmented-button.ts"],"names":["baseTv"],"mappings":";;;;;AAeA,IAAM,SAAA,GAAY;AAAA,EAChB,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,EAAA,GAAS,CAAC,OAAA,EAAS,MAAA,KAC9BA,KAAO,OAAA,EAAS;AAAA,EACd,GAAG,MAAA;AAAA,EACH,aAAA,EAAe;AAAA,IACb,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA,QACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG;AAAA;AACxC;AACF;AAEJ,CAAC,CAAA;;;AC/BI,IAAM,oBAAoB,EAAA,CAAG;AAAA,EAClC,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,mEAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,mGAAA;AAAA,MACA,0CAAA;AAAA,MACA,0GAAA;AAAA,MACA,kCAAA;AAAA,MACA,8CAAA;AAAA,MACA,4IAAA;AAAA,MACA,kDAAA;AAAA,MACA,0DAAA;AAAA,MACA,qDAAA;AAAA,MACA,kFAAA;AAAA;AAAA,MAEA,4FAAA;AAAA,MACA,sEAAA;AAAA,MACA,yEAAA;AAAA,MACA,wDAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,6GAAA;AAAA,MACA,2CAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM,kGAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAC;AAED,IAAM,IAAI,iBAAA,EAAkB;AACrB,IAAM,kBAAkB,qBAAA,CAAsB;AAAA,EACnD,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,EACf,IAAA,EAAM,EAAE,IAAA,EAAK;AAAA,EACb,KAAA,EAAO,EAAE,KAAA;AACX,CAAC","file":"index.js","sourcesContent":["/**\n * tv.ts — a tailwind-variants factory pre-configured for the M3 typescale.\n *\n * The Tailwind v4 preset exposes the 15 typescale roles as `text-<role>`\n * font-size utilities (e.g. `text-body-small`, `text-label-large`). Stock\n * tailwind-merge does not know these custom names, so it groups them with the\n * `text-<color>` utilities and drops one when a slot sets both a color *and* a\n * typescale (the common M3 case). That silently strips either the color or the\n * type, breaking token compliance.\n *\n * Teaching tailwind-merge that the typescale names belong to the `font-size`\n * group keeps color and type independent, so both survive the merge.\n */\nimport { type TV, tv as baseTv } from 'tailwind-variants';\n\nconst TYPESCALE = [\n  'display-large',\n  'display-medium',\n  'display-small',\n  'headline-large',\n  'headline-medium',\n  'headline-small',\n  'title-large',\n  'title-medium',\n  'title-small',\n  'body-large',\n  'body-medium',\n  'body-small',\n  'label-large',\n  'label-medium',\n  'label-small',\n] as const;\n\nexport const tv: TV = (options, config) =>\n  baseTv(options, {\n    ...config,\n    twMergeConfig: {\n      extend: {\n        classGroups: {\n          'font-size': [{ text: [...TYPESCALE] }],\n        },\n      },\n    },\n  });\n","/**\n * segmented-button.ts — tailwind-variants slots for the M3 SegmentedButton.\n *\n * A 40dp-tall connected row with a shared outline; segments divide with a left\n * border. The selected segment surfaces `data-pressed` (Base UI Toggle) → a\n * secondary-container fill that reveals the leading checkmark (and hides any\n * provided icon) via the `group`. State layer is the item `::before`; the\n * pointer ripple is added by the factory. Same DOM as the VE build.\n */\nimport { createSegmentedButton } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const segmentedButtonTv = tv({\n  slots: {\n    root: 'inline-flex items-stretch h-10 rounded-full border border-outline',\n    item: [\n      'group relative inline-flex flex-1 items-center justify-center gap-2 px-3 min-w-12 overflow-hidden',\n      'first:rounded-s-full last:rounded-e-full',\n      'bg-transparent border-0 border-l border-outline first:border-l-0 cursor-pointer select-none outline-none',\n      'text-label-large text-on-surface',\n      'transition-colors duration-150 ease-standard',\n      'before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100',\n      'hover:before:opacity-[var(--md-sys-state-hover)]',\n      'focus-visible:before:opacity-[var(--md-sys-state-focus)]',\n      'active:before:opacity-[var(--md-sys-state-pressed)]',\n      'data-[pressed]:bg-secondary-container data-[pressed]:text-on-secondary-container',\n      // M3 disabled: label on-surface/38, divider outline on-surface/12 (material-web).\n      'focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n      'data-[disabled]:pointer-events-none data-[disabled]:before:opacity-0',\n      'data-[disabled]:text-on-surface/38 data-[disabled]:border-on-surface/12',\n      'disabled:pointer-events-none disabled:before:opacity-0',\n      'disabled:text-on-surface/38 disabled:border-on-surface/12',\n    ],\n    check: [\n      'inline-flex items-center justify-center shrink-0 h-[18px] w-0 opacity-0 overflow-hidden pointer-events-none',\n      'transition-all duration-150 ease-standard',\n      'group-data-[pressed]:w-[18px] group-data-[pressed]:opacity-100',\n    ],\n    icon: 'inline-flex items-center justify-center shrink-0 [&_svg]:size-[18px] group-data-[pressed]:hidden',\n    label: 'truncate',\n  },\n});\n\nconst s = segmentedButtonTv();\nexport const SegmentedButton = createSegmentedButton({\n  root: s.root(),\n  item: s.item(),\n  check: s.check(),\n  icon: s.icon(),\n  label: s.label(),\n});\n"]}

package/dist/components/select/index.d.ts

@@ -0,0 +1,253 @@
+import * as react from 'react';
+import * as _m3_baseui_core from '@m3-baseui/core';
+export { SelectFieldProps } from '@m3-baseui/core';
+import * as _base_ui_react from '@base-ui/react';
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as tailwind_merge from 'tailwind-merge';
+
+declare const selectTv: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            value?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            icon?: tailwind_merge.ClassNameValue;
+            itemIndicator?: tailwind_merge.ClassNameValue;
+            groupLabel?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+            trigger?: tailwind_merge.ClassNameValue;
+            scrollUpArrow?: tailwind_merge.ClassNameValue;
+            scrollDownArrow?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            value?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            icon?: tailwind_merge.ClassNameValue;
+            itemIndicator?: tailwind_merge.ClassNameValue;
+            groupLabel?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+            trigger?: tailwind_merge.ClassNameValue;
+            scrollUpArrow?: tailwind_merge.ClassNameValue;
+            scrollDownArrow?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    trigger: string[];
+    value: string;
+    icon: string;
+    popup: string;
+    item: string[];
+    itemIndicator: string;
+    groupLabel: string;
+    scrollUpArrow: string[];
+    scrollDownArrow: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            value?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            icon?: tailwind_merge.ClassNameValue;
+            itemIndicator?: tailwind_merge.ClassNameValue;
+            groupLabel?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+            trigger?: tailwind_merge.ClassNameValue;
+            scrollUpArrow?: tailwind_merge.ClassNameValue;
+            scrollDownArrow?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            value?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            icon?: tailwind_merge.ClassNameValue;
+            itemIndicator?: tailwind_merge.ClassNameValue;
+            groupLabel?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+            trigger?: tailwind_merge.ClassNameValue;
+            scrollUpArrow?: tailwind_merge.ClassNameValue;
+            scrollDownArrow?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    trigger: string[];
+    value: string;
+    icon: string;
+    popup: string;
+    item: string[];
+    itemIndicator: string;
+    groupLabel: string;
+    scrollUpArrow: string[];
+    scrollDownArrow: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    trigger: string[];
+    value: string;
+    icon: string;
+    popup: string;
+    item: string[];
+    itemIndicator: string;
+    groupLabel: string;
+    scrollUpArrow: string[];
+    scrollDownArrow: string[];
+}, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            value?: tailwind_merge.ClassNameValue;
+            popup?: tailwind_merge.ClassNameValue;
+            icon?: tailwind_merge.ClassNameValue;
+            itemIndicator?: tailwind_merge.ClassNameValue;
+            groupLabel?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+            trigger?: tailwind_merge.ClassNameValue;
+            scrollUpArrow?: tailwind_merge.ClassNameValue;
+            scrollDownArrow?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+/**
+ * Exposed Dropdown Menu anchor (issue #96): the Select rendered as an M3
+ * TextField. The floating label, focus/filled border and trailing dropdown
+ * icon key off the trigger's own field state — Base UI stamps `data-focused` /
+ * `data-filled` / `data-invalid` / `data-popup-open` on the trigger (the
+ * `group/field`) once it sits inside `Field.Root`. Mirrors the standalone
+ * TextField so the anchor reads identically. Same DOM as the VE build.
+ */
+declare const selectFieldTv: tailwind_variants.TVReturnType<{
+    variant: {
+        filled: {
+            field: string[];
+            value: string;
+            label: string[];
+        };
+        outlined: {
+            field: string[];
+            label: string[];
+        };
+    };
+}, {
+    root: string;
+    field: string[];
+    inputWrap: string;
+    value: string;
+    label: string[];
+    icon: string[];
+    leadingIcon: string;
+    supporting: string[];
+    supportingText: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        filled: {
+            field: string[];
+            value: string;
+            label: string[];
+        };
+        outlined: {
+            field: string[];
+            label: string[];
+        };
+    };
+}, {
+    variant: {
+        filled: {
+            field: string[];
+            value: string;
+            label: string[];
+        };
+        outlined: {
+            field: string[];
+            label: string[];
+        };
+    };
+}>, {
+    variant: {
+        filled: {
+            field: string[];
+            value: string;
+            label: string[];
+        };
+        outlined: {
+            field: string[];
+            label: string[];
+        };
+    };
+}, {
+    root: string;
+    field: string[];
+    inputWrap: string;
+    value: string;
+    label: string[];
+    icon: string[];
+    leadingIcon: string;
+    supporting: string[];
+    supportingText: string;
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        filled: {
+            field: string[];
+            value: string;
+            label: string[];
+        };
+        outlined: {
+            field: string[];
+            label: string[];
+        };
+    };
+}, {
+    root: string;
+    field: string[];
+    inputWrap: string;
+    value: string;
+    label: string[];
+    icon: string[];
+    leadingIcon: string;
+    supporting: string[];
+    supportingText: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        filled: {
+            field: string[];
+            value: string;
+            label: string[];
+        };
+        outlined: {
+            field: string[];
+            label: string[];
+        };
+    };
+}, {
+    variant: {
+        filled: {
+            field: string[];
+            value: string;
+            label: string[];
+        };
+        outlined: {
+            field: string[];
+            label: string[];
+        };
+    };
+}>, unknown, unknown, undefined>>;
+declare const Select: {
+    Root: typeof _base_ui_react.SelectRoot;
+    Field: react.ForwardRefExoticComponent<_m3_baseui_core.SelectFieldOwnProps & Omit<_base_ui_react.SelectRoot.Props<unknown, boolean | undefined>, "className" | "children"> & react.RefAttributes<HTMLButtonElement>>;
+    Label: react.ForwardRefExoticComponent<Omit<_base_ui_react.SelectLabelProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Trigger: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<unknown>>;
+    Value: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectValueProps, "ref"> & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<unknown>>;
+    Icon: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectIconProps, "ref"> & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<unknown>>;
+    Portal: react.ForwardRefExoticComponent<Omit<_base_ui_react.SelectPortalProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Positioner: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectPositionerProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Popup: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    List: react.ForwardRefExoticComponent<Omit<_base_ui_react.SelectListProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectItemProps, "ref"> & react.RefAttributes<HTMLElement>, "ref"> & react.RefAttributes<unknown>>;
+    ItemText: react.NamedExoticComponent<Omit<_base_ui_react.SelectItemTextProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    ItemIndicator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectItemIndicatorProps, "ref"> & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<unknown>>;
+    ScrollUpArrow: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectScrollUpArrowProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    ScrollDownArrow: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectScrollDownArrowProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Group: react.ForwardRefExoticComponent<Omit<_base_ui_react.SelectGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    GroupLabel: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectGroupLabelProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
+};
+
+export { Select, selectFieldTv, selectTv };

package/dist/components/select/index.js

@@ -0,0 +1,271 @@
+"use client";
+import { createSelect } from '@m3-baseui/core';
+import { tv as tv$1 } from 'tailwind-variants';
+
+// src/components/select/select.ts
+var TYPESCALE = [
+  "display-large",
+  "display-medium",
+  "display-small",
+  "headline-large",
+  "headline-medium",
+  "headline-small",
+  "title-large",
+  "title-medium",
+  "title-small",
+  "body-large",
+  "body-medium",
+  "body-small",
+  "label-large",
+  "label-medium",
+  "label-small"
+];
+var tv = (options, config) => tv$1(options, {
+  ...config,
+  twMergeConfig: {
+    extend: {
+      classGroups: {
+        "font-size": [{ text: [...TYPESCALE] }]
+      }
+    }
+  }
+});
+
+// src/components/menu/menu-selectable-item.ts
+var menuSelectableItemStateLayer = [
+  "before:absolute before:inset-0 before:bg-current before:opacity-0 before:pointer-events-none before:transition-opacity before:duration-100",
+  "hover:before:opacity-[var(--md-sys-state-hover)]",
+  "data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]",
+  "active:before:opacity-[var(--md-sys-state-pressed)]"
+];
+var menuSelectableItemSelectedFill = [
+  "data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container",
+  "data-[checked]:bg-secondary-container data-[checked]:text-on-secondary-container"
+];
+var menuSelectableItemPositionShape = [
+  "data-[selected]:data-[position=only]:rounded-extra-small",
+  "data-[selected]:data-[position=first]:rounded-t-extra-small",
+  "data-[selected]:data-[position=middle]:rounded-none",
+  "data-[selected]:data-[position=last]:rounded-b-extra-small",
+  "data-[checked]:data-[position=only]:rounded-extra-small",
+  "data-[checked]:data-[position=first]:rounded-t-extra-small",
+  "data-[checked]:data-[position=middle]:rounded-none",
+  "data-[checked]:data-[position=last]:rounded-b-extra-small"
+];
+var menuSelectableItemPositionShapeFallback = [
+  "data-[selected]:not([data-position]):rounded-extra-small",
+  "data-[checked]:not([data-position]):rounded-extra-small"
+];
+var menuSelectableItemDisabled = [
+  "data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none",
+  "data-[disabled]:data-[selected]:bg-transparent data-[disabled]:data-[selected]:text-on-surface/[0.38]",
+  "data-[disabled]:data-[checked]:bg-transparent data-[disabled]:data-[checked]:text-on-surface/[0.38]"
+];
+var menuSelectableItemBase = [
+  "group relative cursor-pointer select-none outline-none text-label-large text-on-surface",
+  "h-12 px-3 overflow-hidden",
+  ...menuSelectableItemStateLayer,
+  ...menuSelectableItemSelectedFill,
+  ...menuSelectableItemPositionShape,
+  ...menuSelectableItemPositionShapeFallback,
+  ...menuSelectableItemDisabled
+];
+var menuSelectableItemTv = tv({
+  slots: {
+    /** Select row: check + label + optional trailing meta. */
+    selectItem: ["grid grid-cols-[24px_1fr_auto] items-center gap-3", ...menuSelectableItemBase],
+    /** Menu checkbox / radio row: check + label. */
+    menuSelectableItem: ["grid grid-cols-[24px_1fr] items-center gap-3", ...menuSelectableItemBase],
+    itemIndicator: [
+      "inline-flex items-center justify-center text-on-surface",
+      "invisible group-data-[selected]:visible group-data-[checked]:visible",
+      "group-data-[selected]:text-on-secondary-container group-data-[checked]:text-on-secondary-container",
+      "group-data-[disabled]:text-on-surface/[0.38]"
+    ]
+  }
+});
+var menuSelectableItem = menuSelectableItemTv();
+
+// src/components/menu/menu-surface.ts
+var menuSurfaceBase = [
+  "py-2",
+  "bg-surface-container text-on-surface rounded-extra-small shadow-level2",
+  "origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard",
+  "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
+  "data-[ending-style]:opacity-0",
+  "focus:outline-none"
+];
+var menuSurfaceTv = tv({
+  slots: {
+    popup: ["max-w-[280px]", ...menuSurfaceBase],
+    groupLabel: "px-3 py-2 text-label-small text-on-surface-variant"
+  },
+  variants: {
+    width: {
+      /** Standalone Menu: 112–280dp. */
+      standard: { popup: "min-w-[112px]" },
+      /** Exposed Dropdown / Select: at least anchor width, capped at 280dp. */
+      anchor: { popup: "min-w-[max(112px,var(--anchor-width))]" }
+    },
+    scroll: {
+      none: {},
+      /** Select popup: clamp height and scroll the list. */
+      auto: { popup: "max-h-[var(--available-height)] overflow-auto" }
+    }
+  },
+  defaultVariants: {
+    width: "standard",
+    scroll: "none"
+  }
+});
+menuSurfaceTv();
+
+// src/components/select/select.ts
+var surface = menuSurfaceTv({ width: "anchor", scroll: "auto" });
+var selectable = menuSelectableItem;
+var selectTv = tv({
+  slots: {
+    trigger: [
+      "group relative inline-flex items-center justify-between gap-2 box-border",
+      "h-14 min-w-[200px] px-4 rounded-extra-small border border-outline bg-transparent",
+      "text-on-surface text-body-large cursor-pointer outline-none text-left",
+      "transition-colors duration-150 ease-standard",
+      // focus/open = 3dp primary outline; padding drops 2px to keep content steady
+      "data-[popup-open]:border-primary data-[popup-open]:border-[3px] data-[popup-open]:px-[14px]",
+      "focus-visible:border-primary focus-visible:border-[3px] focus-visible:px-[14px]",
+      "data-[disabled]:border-on-surface/[0.12] data-[disabled]:text-on-surface/[0.38] data-[disabled]:pointer-events-none"
+    ],
+    value: "flex-1 truncate",
+    icon: "flex text-on-surface-variant transition-transform duration-150 group-data-[popup-open]:rotate-180 group-data-[disabled]:text-on-surface/[0.38]",
+    popup: surface.popup(),
+    item: [
+      selectable.selectItem(),
+      // M3 trailing supporting text (e.g. meta) sits in the last column.
+      "[&_[data-slot=select-trailing]]:pl-4 [&_[data-slot=select-trailing]]:text-label-large [&_[data-slot=select-trailing]]:text-on-surface-variant",
+      "data-[selected]:[&_[data-slot=select-trailing]]:text-on-secondary-container",
+      "data-[disabled]:[&_[data-slot=select-trailing]]:text-on-surface/[0.38]"
+    ],
+    itemIndicator: selectable.itemIndicator(),
+    groupLabel: surface.groupLabel(),
+    // Sticky scroll affordances at the popup edges; surface-tinted with a chevron.
+    scrollUpArrow: [
+      "sticky top-0 z-[1] flex items-center justify-center h-6 cursor-default",
+      "bg-surface-container text-on-surface-variant [&>svg]:size-5"
+    ],
+    scrollDownArrow: [
+      "sticky bottom-0 z-[1] flex items-center justify-center h-6 cursor-default",
+      "bg-surface-container text-on-surface-variant [&>svg]:size-5"
+    ]
+  }
+});
+var selectFieldTv = tv({
+  slots: {
+    // The `group` hook lives here (not in engine-neutral core): supporting text
+    // keys its error color off Field.Root's `group-data-[invalid]`.
+    root: "group flex flex-col gap-1 min-w-[210px]",
+    field: [
+      "group/field relative flex items-stretch gap-3 h-14 px-4 box-border w-full",
+      "text-on-surface text-body-large cursor-pointer text-left outline-none",
+      "transition-[border-color,padding] duration-150 ease-standard",
+      "data-[disabled]:opacity-[0.38] data-[disabled]:pointer-events-none"
+    ],
+    inputWrap: "relative z-0 flex-1 flex items-center min-w-0 overflow-visible",
+    value: "flex-1 truncate text-body-large text-on-surface",
+    label: [
+      "absolute left-0 pointer-events-none origin-left",
+      "top-1/2 -translate-y-1/2 text-body-large text-on-surface-variant",
+      "transition-all duration-150 ease-standard",
+      "group-data-[focused]/field:text-primary group-data-[invalid]/field:text-error"
+    ],
+    icon: [
+      // Disabled dimming comes from the field's own opacity (0.38); no per-icon
+      // color override here, else it would compound to ~0.14.
+      "flex items-center text-on-surface-variant transition-transform duration-150 [&>svg]:size-6",
+      "group-data-[popup-open]/field:rotate-180"
+    ],
+    leadingIcon: "inline-flex items-center justify-center shrink-0 text-on-surface-variant [&>svg]:size-6",
+    supporting: [
+      "flex justify-between gap-4 px-4 text-body-small text-on-surface-variant",
+      "group-data-[invalid]:text-error"
+    ],
+    supportingText: "min-w-0"
+  },
+  variants: {
+    variant: {
+      filled: {
+        field: [
+          "overflow-hidden rounded-t-extra-small bg-surface-container-highest",
+          // M3 filled hover: state layer (on-surface × state-hover).
+          "before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none",
+          "before:transition-opacity before:duration-100",
+          "hover:before:opacity-[var(--md-sys-state-hover)]",
+          "data-[disabled]:before:opacity-0",
+          // M3 filled resting active-indicator: 1dp on-surface-variant.
+          "border-b border-on-surface-variant hover:border-on-surface",
+          // M3 filled focus-active-indicator-height is 3dp.
+          "data-[focused]:border-b-[3px] data-[focused]:border-primary",
+          "data-[popup-open]:border-b-[3px] data-[popup-open]:border-primary",
+          "data-[invalid]:border-error"
+        ],
+        value: "pt-3",
+        label: [
+          "group-data-[focused]/field:top-1.5 group-data-[focused]/field:translate-y-0 group-data-[focused]/field:text-body-small",
+          "group-data-[filled]/field:top-1.5 group-data-[filled]/field:translate-y-0 group-data-[filled]/field:text-body-small",
+          "group-data-[popup-open]/field:top-1.5 group-data-[popup-open]/field:translate-y-0 group-data-[popup-open]/field:text-body-small",
+          "group-data-[has-placeholder]/field:top-1.5 group-data-[has-placeholder]/field:translate-y-0 group-data-[has-placeholder]/field:text-body-small"
+        ]
+      },
+      outlined: {
+        field: [
+          "overflow-visible rounded-extra-small border border-outline hover:border-on-surface",
+          // M3 outlined focus-outline-width is 3dp; padding drops 2px so content
+          // stays steady as the 1dp border grows (matches the TextField anchor).
+          "data-[focused]:border-[3px] data-[focused]:border-primary data-[focused]:px-[14px]",
+          "data-[popup-open]:border-[3px] data-[popup-open]:border-primary data-[popup-open]:px-[14px]",
+          "data-[invalid]:border-error"
+        ],
+        label: [
+          "group-data-[focused]/field:top-0 group-data-[focused]/field:-translate-y-1/2 group-data-[focused]/field:z-[1] group-data-[focused]/field:text-body-small group-data-[focused]/field:bg-surface group-data-[focused]/field:px-1 group-data-[focused]/field:leading-none",
+          "group-data-[filled]/field:top-0 group-data-[filled]/field:-translate-y-1/2 group-data-[filled]/field:z-[1] group-data-[filled]/field:text-body-small group-data-[filled]/field:bg-surface group-data-[filled]/field:px-1 group-data-[filled]/field:leading-none",
+          "group-data-[popup-open]/field:top-0 group-data-[popup-open]/field:-translate-y-1/2 group-data-[popup-open]/field:z-[1] group-data-[popup-open]/field:text-body-small group-data-[popup-open]/field:bg-surface group-data-[popup-open]/field:px-1 group-data-[popup-open]/field:leading-none",
+          "group-data-[has-placeholder]/field:top-0 group-data-[has-placeholder]/field:-translate-y-1/2 group-data-[has-placeholder]/field:z-[1] group-data-[has-placeholder]/field:text-body-small group-data-[has-placeholder]/field:bg-surface group-data-[has-placeholder]/field:px-1 group-data-[has-placeholder]/field:leading-none"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outlined"
+  }
+});
+var s = selectTv();
+var Select = createSelect(
+  {
+    trigger: s.trigger(),
+    value: s.value(),
+    icon: s.icon(),
+    popup: s.popup(),
+    item: s.item(),
+    itemIndicator: s.itemIndicator(),
+    groupLabel: s.groupLabel(),
+    scrollUpArrow: s.scrollUpArrow(),
+    scrollDownArrow: s.scrollDownArrow()
+  },
+  ({ variant }) => {
+    const f = selectFieldTv({ variant });
+    return {
+      root: f.root(),
+      field: f.field(),
+      inputWrap: f.inputWrap(),
+      value: f.value(),
+      label: f.label(),
+      icon: f.icon(),
+      leadingIcon: f.leadingIcon(),
+      supporting: f.supporting(),
+      supportingText: f.supportingText()
+    };
+  }
+);
+
+export { Select, selectFieldTv, selectTv };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map