@m3-baseui/react-tailwind 2.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/carousel/index.d.ts +21 -0
  2. package/dist/components/carousel/index.js +7 -1
  3. package/dist/components/carousel/index.js.map +1 -1
  4. package/dist/components/select/index.d.ts +0 -18
  5. package/dist/components/select/index.js +2 -13
  6. package/dist/components/select/index.js.map +1 -1
  7. package/dist/index.js +9 -14
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
package/dist/components/carousel/index.d.ts CHANGED
@@ -9,6 +9,9 @@ declare const carouselTv: tailwind_variants.TVReturnType<{
9
9
  'multi-browse': {
10
10
  item: string;
11
11
  };
12
+ uncontained: {
13
+ item: string;
14
+ };
12
15
  hero: {
13
16
  item: string;
14
17
  };
@@ -25,6 +28,9 @@ declare const carouselTv: tailwind_variants.TVReturnType<{
25
28
  'multi-browse': {
26
29
  item: string;
27
30
  };
31
+ uncontained: {
32
+ item: string;
33
+ };
28
34
  hero: {
29
35
  item: string;
30
36
  };
@@ -38,6 +44,9 @@ declare const carouselTv: tailwind_variants.TVReturnType<{
38
44
  'multi-browse': {
39
45
  item: string;
40
46
  };
47
+ uncontained: {
48
+ item: string;
49
+ };
41
50
  hero: {
42
51
  item: string;
43
52
  };
@@ -51,6 +60,9 @@ declare const carouselTv: tailwind_variants.TVReturnType<{
51
60
  'multi-browse': {
52
61
  item: string;
53
62
  };
63
+ uncontained: {
64
+ item: string;
65
+ };
54
66
  hero: {
55
67
  item: string;
56
68
  };
@@ -67,6 +79,9 @@ declare const carouselTv: tailwind_variants.TVReturnType<{
67
79
  'multi-browse': {
68
80
  item: string;
69
81
  };
82
+ uncontained: {
83
+ item: string;
84
+ };
70
85
  hero: {
71
86
  item: string;
72
87
  };
@@ -83,6 +98,9 @@ declare const carouselTv: tailwind_variants.TVReturnType<{
83
98
  'multi-browse': {
84
99
  item: string;
85
100
  };
101
+ uncontained: {
102
+ item: string;
103
+ };
86
104
  hero: {
87
105
  item: string;
88
106
  };
@@ -96,6 +114,9 @@ declare const carouselTv: tailwind_variants.TVReturnType<{
96
114
  'multi-browse': {
97
115
  item: string;
98
116
  };
117
+ uncontained: {
118
+ item: string;
119
+ };
99
120
  hero: {
100
121
  item: string;
101
122
  };
package/dist/components/carousel/index.js CHANGED
@@ -36,13 +36,19 @@ var carouselTv = tv({
36
36
  slots: {
37
37
  root: [
38
38
  "flex gap-2 overflow-x-auto snap-x snap-mandatory scroll-smooth",
39
- "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
39
+ "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
40
+ // Keyboard focus ring (M3: 3px secondary, 2px offset); keyboard-only.
41
+ "outline-none focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
42
+ // Reduced motion: jump instead of smooth-scrolling between snap cells.
43
+ "motion-reduce:scroll-auto"
40
44
  ],
41
45
  item: "snap-start shrink-0 overflow-hidden rounded-large"
42
46
  },
43
47
  variants: {
44
48
  variant: {
45
49
  "multi-browse": { item: "w-40 h-56" },
50
+ // Uniform, wider cells that scroll past the container edge.
51
+ uncontained: { item: "w-56 h-56" },
46
52
  hero: { item: "w-72 h-56 snap-center" },
47
53
  "full-screen": {
48
54
  // gap-0: full-screen slides fill the viewport with no inter-slide gap.
package/dist/components/carousel/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/tv.ts","../../../src/components/carousel/carousel.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;;;AChCI,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,gEAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,cAAA,EAAgB,EAAE,IAAA,EAAM,WAAA,EAAY;AAAA,MACpC,IAAA,EAAM,EAAE,IAAA,EAAM,uBAAA,EAAwB;AAAA,MACtC,aAAA,EAAe;AAAA;AAAA,QAEb,IAAA,EAAM,gEAAA;AAAA,QACN,IAAA,EAAM;AAAA;AACR;AACF,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,cAAA;AAC9B,CAAC;AAEM,IAAM,QAAA,GAAW,cAAA,CAAe,CAAC,OAAA,KAAY;AAClD,EAAA,MAAM,CAAA,GAAI,UAAA,CAAW,EAAE,OAAA,EAAS,CAAA;AAChC,EAAA,OAAO,EAAE,MAAM,CAAA,CAAE,IAAA,IAAQ,IAAA,EAAM,CAAA,CAAE,MAAK,EAAE;AAC1C,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 * carousel.ts — tailwind-variants slots for the M3 Carousel.\n *\n * Root is a scroll-snap scroller (hidden scrollbar); items are snap-aligned,\n * `large`-radius cells. `multi-browse` and `hero` scroll horizontally (hero\n * items are wider and centre-snap); `full-screen` stacks full-size items\n * vertically. Same DOM as the VE build.\n */\nimport { createCarousel } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const carouselTv = tv({\n slots: {\n root: [\n 'flex gap-2 overflow-x-auto snap-x snap-mandatory scroll-smooth',\n '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n ],\n item: 'snap-start shrink-0 overflow-hidden rounded-large',\n },\n variants: {\n variant: {\n 'multi-browse': { item: 'w-40 h-56' },\n hero: { item: 'w-72 h-56 snap-center' },\n 'full-screen': {\n // gap-0: full-screen slides fill the viewport with no inter-slide gap.\n root: 'flex-col gap-0 overflow-x-hidden overflow-y-auto snap-y h-full',\n item: 'w-full h-full snap-center',\n },\n },\n },\n defaultVariants: { variant: 'multi-browse' },\n});\n\nexport const Carousel = createCarousel((variant) => {\n const s = carouselTv({ variant });\n return { root: s.root(), item: s.item() };\n});\nexport type { CarouselVariant } from '@m3-baseui/core';\n"]}
1
+ {"version":3,"sources":["../../../src/tv.ts","../../../src/components/carousel/carousel.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;;;AC7BI,IAAM,aAAa,EAAA,CAAG;AAAA,EAC3B,KAAA,EAAO;AAAA,IACL,IAAA,EAAM;AAAA,MACJ,gEAAA;AAAA,MACA,sDAAA;AAAA;AAAA,MAEA,yGAAA;AAAA;AAAA,MAEA;AAAA,KACF;AAAA,IACA,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,cAAA,EAAgB,EAAE,IAAA,EAAM,WAAA,EAAY;AAAA;AAAA,MAEpC,WAAA,EAAa,EAAE,IAAA,EAAM,WAAA,EAAY;AAAA,MACjC,IAAA,EAAM,EAAE,IAAA,EAAM,uBAAA,EAAwB;AAAA,MACtC,aAAA,EAAe;AAAA;AAAA,QAEb,IAAA,EAAM,gEAAA;AAAA,QACN,IAAA,EAAM;AAAA;AACR;AACF,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,OAAA,EAAS,cAAA;AAC9B,CAAC;AAEM,IAAM,QAAA,GAAW,cAAA,CAAe,CAAC,OAAA,KAAY;AAClD,EAAA,MAAM,CAAA,GAAI,UAAA,CAAW,EAAE,OAAA,EAAS,CAAA;AAChC,EAAA,OAAO,EAAE,MAAM,CAAA,CAAE,IAAA,IAAQ,IAAA,EAAM,CAAA,CAAE,MAAK,EAAE;AAC1C,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 * carousel.ts — tailwind-variants slots for the M3 Carousel.\n *\n * Root is a scroll-snap scroller (hidden scrollbar) that is keyboard-focusable:\n * a 3px secondary focus-visible ring makes that focus visible (WCAG 2.4.7), and\n * `motion-reduce:scroll-auto` drops the smooth snap animation under\n * `prefers-reduced-motion`. Items are snap-aligned, `large`-radius cells.\n * `multi-browse`, `uncontained`, and `hero` scroll horizontally (hero items are\n * wider and centre-snap; uncontained items are uniform and flow past the edge);\n * `full-screen` stacks full-size items vertically. Same DOM as the VE build.\n */\nimport { createCarousel } from '@m3-baseui/core';\nimport { tv } from '../../tv';\n\nexport const carouselTv = tv({\n slots: {\n root: [\n 'flex gap-2 overflow-x-auto snap-x snap-mandatory scroll-smooth',\n '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n // Keyboard focus ring (M3: 3px secondary, 2px offset); keyboard-only.\n 'outline-none focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary',\n // Reduced motion: jump instead of smooth-scrolling between snap cells.\n 'motion-reduce:scroll-auto',\n ],\n item: 'snap-start shrink-0 overflow-hidden rounded-large',\n },\n variants: {\n variant: {\n 'multi-browse': { item: 'w-40 h-56' },\n // Uniform, wider cells that scroll past the container edge.\n uncontained: { item: 'w-56 h-56' },\n hero: { item: 'w-72 h-56 snap-center' },\n 'full-screen': {\n // gap-0: full-screen slides fill the viewport with no inter-slide gap.\n root: 'flex-col gap-0 overflow-x-hidden overflow-y-auto snap-y h-full',\n item: 'w-full h-full snap-center',\n },\n },\n },\n defaultVariants: { variant: 'multi-browse' },\n});\n\nexport const Carousel = createCarousel((variant) => {\n const s = carouselTv({ variant });\n return { root: s.root(), item: s.item() };\n});\nexport type { CarouselVariant } from '@m3-baseui/core';\n"]}
package/dist/components/select/index.d.ts CHANGED
@@ -16,8 +16,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
16
16
  groupLabel?: tailwind_merge.ClassNameValue;
17
17
  item?: tailwind_merge.ClassNameValue;
18
18
  trigger?: tailwind_merge.ClassNameValue;
19
- scrollUpArrow?: tailwind_merge.ClassNameValue;
20
- scrollDownArrow?: tailwind_merge.ClassNameValue;
21
19
  };
22
20
  };
23
21
  } | {
@@ -30,8 +28,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
30
28
  groupLabel?: tailwind_merge.ClassNameValue;
31
29
  item?: tailwind_merge.ClassNameValue;
32
30
  trigger?: tailwind_merge.ClassNameValue;
33
- scrollUpArrow?: tailwind_merge.ClassNameValue;
34
- scrollDownArrow?: tailwind_merge.ClassNameValue;
35
31
  };
36
32
  };
37
33
  } | {}, {
@@ -42,8 +38,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
42
38
  item: string[];
43
39
  itemIndicator: string;
44
40
  groupLabel: string;
45
- scrollUpArrow: string[];
46
- scrollDownArrow: string[];
47
41
  }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
48
42
  [key: string]: {
49
43
  [key: string]: tailwind_merge.ClassNameValue | {
@@ -54,8 +48,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
54
48
  groupLabel?: tailwind_merge.ClassNameValue;
55
49
  item?: tailwind_merge.ClassNameValue;
56
50
  trigger?: tailwind_merge.ClassNameValue;
57
- scrollUpArrow?: tailwind_merge.ClassNameValue;
58
- scrollDownArrow?: tailwind_merge.ClassNameValue;
59
51
  };
60
52
  };
61
53
  } | {}>, {
@@ -68,8 +60,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
68
60
  groupLabel?: tailwind_merge.ClassNameValue;
69
61
  item?: tailwind_merge.ClassNameValue;
70
62
  trigger?: tailwind_merge.ClassNameValue;
71
- scrollUpArrow?: tailwind_merge.ClassNameValue;
72
- scrollDownArrow?: tailwind_merge.ClassNameValue;
73
63
  };
74
64
  };
75
65
  } | {}, {
@@ -80,8 +70,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
80
70
  item: string[];
81
71
  itemIndicator: string;
82
72
  groupLabel: string;
83
- scrollUpArrow: string[];
84
- scrollDownArrow: string[];
85
73
  }, tailwind_variants.TVReturnType<unknown, {
86
74
  trigger: string[];
87
75
  value: string;
@@ -90,8 +78,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
90
78
  item: string[];
91
79
  itemIndicator: string;
92
80
  groupLabel: string;
93
- scrollUpArrow: string[];
94
- scrollDownArrow: string[];
95
81
  }, undefined, tailwind_variants_dist_config_js.TVConfig<unknown, {
96
82
  [key: string]: {
97
83
  [key: string]: tailwind_merge.ClassNameValue | {
@@ -102,8 +88,6 @@ declare const selectTv: tailwind_variants.TVReturnType<{
102
88
  groupLabel?: tailwind_merge.ClassNameValue;
103
89
  item?: tailwind_merge.ClassNameValue;
104
90
  trigger?: tailwind_merge.ClassNameValue;
105
- scrollUpArrow?: tailwind_merge.ClassNameValue;
106
- scrollDownArrow?: tailwind_merge.ClassNameValue;
107
91
  };
108
92
  };
109
93
  } | {}>, unknown, unknown, undefined>>;
@@ -244,8 +228,6 @@ declare const Select: {
244
228
  Item: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectItemProps, "ref"> & react.RefAttributes<HTMLElement>, "ref"> & react.RefAttributes<unknown>>;
245
229
  ItemText: react.NamedExoticComponent<Omit<_base_ui_react.SelectItemTextProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
246
230
  ItemIndicator: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectItemIndicatorProps, "ref"> & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<unknown>>;
247
- ScrollUpArrow: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectScrollUpArrowProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
248
- ScrollDownArrow: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectScrollDownArrowProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
249
231
  Group: react.ForwardRefExoticComponent<Omit<_base_ui_react.SelectGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
250
232
  GroupLabel: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectGroupLabelProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<unknown>>;
251
233
  };
package/dist/components/select/index.js CHANGED
@@ -146,16 +146,7 @@ var selectTv = tv({
146
146
  "data-[disabled]:[&_[data-slot=select-trailing]]:text-on-surface/[0.38]"
147
147
  ],
148
148
  itemIndicator: selectable.itemIndicator(),
149
- groupLabel: surface.groupLabel(),
150
- // Sticky scroll affordances at the popup edges; surface-tinted with a chevron.
151
- scrollUpArrow: [
152
- "sticky top-0 z-[1] flex items-center justify-center h-6 cursor-default",
153
- "bg-surface-container text-on-surface-variant [&>svg]:size-5"
154
- ],
155
- scrollDownArrow: [
156
- "sticky bottom-0 z-[1] flex items-center justify-center h-6 cursor-default",
157
- "bg-surface-container text-on-surface-variant [&>svg]:size-5"
158
- ]
149
+ groupLabel: surface.groupLabel()
159
150
  }
160
151
  });
161
152
  var selectFieldTv = tv({
@@ -246,9 +237,7 @@ var Select = createSelect(
246
237
  popup: s.popup(),
247
238
  item: s.item(),
248
239
  itemIndicator: s.itemIndicator(),
249
- groupLabel: s.groupLabel(),
250
- scrollUpArrow: s.scrollUpArrow(),
251
- scrollDownArrow: s.scrollDownArrow()
240
+ groupLabel: s.groupLabel()
252
241
  },
253
242
  ({ variant }) => {
254
243
  const f = selectFieldTv({ variant });
package/dist/components/select/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/tv.ts","../../../src/components/menu/menu-selectable-item.ts","../../../src/components/menu/menu-surface.ts","../../../src/components/select/select.ts"],"names":["baseTv"],"mappings":"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","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 * menu-selectable-item.ts — shared M3 selectable menu row tokens.\n *\n * Select.Item and Menu CheckboxItem / RadioItem share secondary-container fill,\n * position-based selected shapes (issue #98), and the 24dp leading indicator column.\n */\nimport { tv } from '../../tv';\n\n/** State layer on selectable rows (hover / highlighted / pressed). */\nexport const menuSelectableItemStateLayer = [\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 'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n 'active:before:opacity-[var(--md-sys-state-pressed)]',\n] as const;\n\n/** M3 selectable row fill when selected or checked. */\nexport const menuSelectableItemSelectedFill = [\n 'data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container',\n 'data-[checked]:bg-secondary-container data-[checked]:text-on-secondary-container',\n] as const;\n\n/** M3 MenuDefaults.itemShape — corner radii on the selected/checked container. */\nexport const menuSelectableItemPositionShape = [\n 'data-[selected]:data-[position=only]:rounded-extra-small',\n 'data-[selected]:data-[position=first]:rounded-t-extra-small',\n 'data-[selected]:data-[position=middle]:rounded-none',\n 'data-[selected]:data-[position=last]:rounded-b-extra-small',\n 'data-[checked]:data-[position=only]:rounded-extra-small',\n 'data-[checked]:data-[position=first]:rounded-t-extra-small',\n 'data-[checked]:data-[position=middle]:rounded-none',\n 'data-[checked]:data-[position=last]:rounded-b-extra-small',\n] as const;\n\n/** Fallback when rows are rendered via a wrapper and data-position is not stamped. */\nexport const menuSelectableItemPositionShapeFallback = [\n 'data-[selected]:not([data-position]):rounded-extra-small',\n 'data-[checked]:not([data-position]):rounded-extra-small',\n] as const;\n\nexport const menuSelectableItemDisabled = [\n 'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n 'data-[disabled]:data-[selected]:bg-transparent data-[disabled]:data-[selected]:text-on-surface/[0.38]',\n 'data-[disabled]:data-[checked]:bg-transparent data-[disabled]:data-[checked]:text-on-surface/[0.38]',\n] as const;\n\nexport const menuSelectableItemBase = [\n 'group relative cursor-pointer select-none outline-none text-label-large text-on-surface',\n 'h-12 px-3 overflow-hidden',\n ...menuSelectableItemStateLayer,\n ...menuSelectableItemSelectedFill,\n ...menuSelectableItemPositionShape,\n ...menuSelectableItemPositionShapeFallback,\n ...menuSelectableItemDisabled,\n] as const;\n\nexport const menuSelectableItemTv = tv({\n slots: {\n /** Select row: check + label + optional trailing meta. */\n selectItem: ['grid grid-cols-[24px_1fr_auto] items-center gap-3', ...menuSelectableItemBase],\n /** Menu checkbox / radio row: check + label. */\n menuSelectableItem: ['grid grid-cols-[24px_1fr] items-center gap-3', ...menuSelectableItemBase],\n itemIndicator: [\n 'inline-flex items-center justify-center text-on-surface',\n 'invisible group-data-[selected]:visible group-data-[checked]:visible',\n 'group-data-[selected]:text-on-secondary-container group-data-[checked]:text-on-secondary-container',\n 'group-data-[disabled]:text-on-surface/[0.38]',\n ],\n },\n});\n\nexport const menuSelectableItem = menuSelectableItemTv();\n","/**\n * menu-surface.ts — shared M3 menu popup surface tokens (Menus specs).\n *\n * Used by Menu (standard width) and Select (anchor-width + scroll). Engine-neutral\n * class strings; both components compose variants on top.\n */\nimport { tv } from '../../tv';\n\n/** Base popup surface shared by Menu and Select list popups. */\nexport const menuSurfaceBase = [\n 'py-2',\n 'bg-surface-container text-on-surface rounded-extra-small shadow-level2',\n 'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n 'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n 'data-[ending-style]:opacity-0',\n 'focus:outline-none',\n] as const;\n\nexport const menuSurfaceTv = tv({\n slots: {\n popup: ['max-w-[280px]', ...menuSurfaceBase],\n groupLabel: 'px-3 py-2 text-label-small text-on-surface-variant',\n },\n variants: {\n width: {\n /** Standalone Menu: 112–280dp. */\n standard: { popup: 'min-w-[112px]' },\n /** Exposed Dropdown / Select: at least anchor width, capped at 280dp. */\n anchor: { popup: 'min-w-[max(112px,var(--anchor-width))]' },\n },\n scroll: {\n none: {},\n /** Select popup: clamp height and scroll the list. */\n auto: { popup: 'max-h-[var(--available-height)] overflow-auto' },\n },\n },\n defaultVariants: {\n width: 'standard',\n scroll: 'none',\n },\n});\n\nexport const menuSurface = menuSurfaceTv();\n","/**\n * select.ts — Tailwind classes for the M3 Select.\n *\n * Trigger = outlined field (56dp; 3dp primary border when open/focused, per the\n * M3 outlined-field focus-outline-width). Popup = M3 menu surface sized to the\n * anchor, clamped to the M3 menu 112–280dp bounds. Selectable items use\n * label-large, a leading check (on-surface; on-secondary-container when\n * selected), and secondary-container fill on the selected row. Same DOM as VE.\n *\n * Disabled follows the M3 outlined-field per-token opacities (not a blanket\n * fade): outline on-surface/0.12, label/value + icon on-surface/0.38.\n */\nimport { createSelect } from '@m3-baseui/core';\nimport { tv } from '../../tv';\nimport { menuSelectableItem } from '../menu/menu-selectable-item';\nimport { menuSurfaceTv } from '../menu/menu-surface';\n\nconst surface = menuSurfaceTv({ width: 'anchor', scroll: 'auto' });\nconst selectable = menuSelectableItem;\n\nexport const selectTv = tv({\n slots: {\n trigger: [\n 'group relative inline-flex items-center justify-between gap-2 box-border',\n 'h-14 min-w-[200px] px-4 rounded-extra-small border border-outline bg-transparent',\n 'text-on-surface text-body-large cursor-pointer outline-none text-left',\n 'transition-colors duration-150 ease-standard',\n // focus/open = 3dp primary outline; padding drops 2px to keep content steady\n 'data-[popup-open]:border-primary data-[popup-open]:border-[3px] data-[popup-open]:px-[14px]',\n 'focus-visible:border-primary focus-visible:border-[3px] focus-visible:px-[14px]',\n 'data-[disabled]:border-on-surface/[0.12] data-[disabled]:text-on-surface/[0.38] data-[disabled]:pointer-events-none',\n ],\n value: 'flex-1 truncate',\n icon: 'flex text-on-surface-variant transition-transform duration-150 group-data-[popup-open]:rotate-180 group-data-[disabled]:text-on-surface/[0.38]',\n popup: surface.popup(),\n item: [\n selectable.selectItem(),\n // M3 trailing supporting text (e.g. meta) sits in the last column.\n '[&_[data-slot=select-trailing]]:pl-4 [&_[data-slot=select-trailing]]:text-label-large [&_[data-slot=select-trailing]]:text-on-surface-variant',\n 'data-[selected]:[&_[data-slot=select-trailing]]:text-on-secondary-container',\n 'data-[disabled]:[&_[data-slot=select-trailing]]:text-on-surface/[0.38]',\n ],\n itemIndicator: selectable.itemIndicator(),\n groupLabel: surface.groupLabel(),\n // Sticky scroll affordances at the popup edges; surface-tinted with a chevron.\n scrollUpArrow: [\n 'sticky top-0 z-[1] flex items-center justify-center h-6 cursor-default',\n 'bg-surface-container text-on-surface-variant [&>svg]:size-5',\n ],\n scrollDownArrow: [\n 'sticky bottom-0 z-[1] flex items-center justify-center h-6 cursor-default',\n 'bg-surface-container text-on-surface-variant [&>svg]:size-5',\n ],\n },\n});\n\n/**\n * Exposed Dropdown Menu anchor (issue #96): the Select rendered as an M3\n * TextField. The floating label, focus/filled border and trailing dropdown\n * icon key off the trigger's own field state — Base UI stamps `data-focused` /\n * `data-filled` / `data-invalid` / `data-popup-open` on the trigger (the\n * `group/field`) once it sits inside `Field.Root`. Mirrors the standalone\n * TextField so the anchor reads identically. Same DOM as the VE build.\n */\nexport const selectFieldTv = tv({\n slots: {\n // The `group` hook lives here (not in engine-neutral core): supporting text\n // keys its error color off Field.Root's `group-data-[invalid]`.\n root: 'group flex flex-col gap-1 min-w-[210px]',\n field: [\n 'group/field relative flex items-stretch gap-3 h-14 px-4 box-border w-full',\n 'text-on-surface text-body-large cursor-pointer text-left outline-none',\n 'transition-[border-color,padding] duration-150 ease-standard',\n 'data-[disabled]:opacity-[0.38] data-[disabled]:pointer-events-none',\n ],\n inputWrap: 'relative z-0 flex-1 flex items-center min-w-0 overflow-visible',\n value: 'flex-1 truncate text-body-large text-on-surface',\n label: [\n 'absolute left-0 pointer-events-none origin-left',\n 'top-1/2 -translate-y-1/2 text-body-large text-on-surface-variant',\n 'transition-all duration-150 ease-standard',\n 'group-data-[focused]/field:text-primary group-data-[invalid]/field:text-error',\n ],\n icon: [\n // Disabled dimming comes from the field's own opacity (0.38); no per-icon\n // color override here, else it would compound to ~0.14.\n 'flex items-center text-on-surface-variant transition-transform duration-150 [&>svg]:size-6',\n 'group-data-[popup-open]/field:rotate-180',\n ],\n leadingIcon:\n 'inline-flex items-center justify-center shrink-0 text-on-surface-variant [&>svg]:size-6',\n supporting: [\n 'flex justify-between gap-4 px-4 text-body-small text-on-surface-variant',\n 'group-data-[invalid]:text-error',\n ],\n supportingText: 'min-w-0',\n },\n variants: {\n variant: {\n filled: {\n field: [\n 'overflow-hidden rounded-t-extra-small bg-surface-container-highest',\n // M3 filled hover: state layer (on-surface × state-hover).\n 'before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none',\n 'before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'data-[disabled]:before:opacity-0',\n // M3 filled resting active-indicator: 1dp on-surface-variant.\n 'border-b border-on-surface-variant hover:border-on-surface',\n // M3 filled focus-active-indicator-height is 3dp.\n 'data-[focused]:border-b-[3px] data-[focused]:border-primary',\n 'data-[popup-open]:border-b-[3px] data-[popup-open]:border-primary',\n 'data-[invalid]:border-error',\n ],\n value: 'pt-3',\n label: [\n 'group-data-[focused]/field:top-1.5 group-data-[focused]/field:translate-y-0 group-data-[focused]/field:text-body-small',\n 'group-data-[filled]/field:top-1.5 group-data-[filled]/field:translate-y-0 group-data-[filled]/field:text-body-small',\n 'group-data-[popup-open]/field:top-1.5 group-data-[popup-open]/field:translate-y-0 group-data-[popup-open]/field:text-body-small',\n 'group-data-[has-placeholder]/field:top-1.5 group-data-[has-placeholder]/field:translate-y-0 group-data-[has-placeholder]/field:text-body-small',\n ],\n },\n outlined: {\n field: [\n 'overflow-visible rounded-extra-small border border-outline hover:border-on-surface',\n // M3 outlined focus-outline-width is 3dp; padding drops 2px so content\n // stays steady as the 1dp border grows (matches the TextField anchor).\n 'data-[focused]:border-[3px] data-[focused]:border-primary data-[focused]:px-[14px]',\n 'data-[popup-open]:border-[3px] data-[popup-open]:border-primary data-[popup-open]:px-[14px]',\n 'data-[invalid]:border-error',\n ],\n label: [\n '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',\n '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',\n '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',\n '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',\n ],\n },\n },\n },\n defaultVariants: {\n variant: 'outlined',\n },\n});\n\nconst s = selectTv();\nexport const Select = createSelect(\n {\n trigger: s.trigger(),\n value: s.value(),\n icon: s.icon(),\n popup: s.popup(),\n item: s.item(),\n itemIndicator: s.itemIndicator(),\n groupLabel: s.groupLabel(),\n scrollUpArrow: s.scrollUpArrow(),\n scrollDownArrow: s.scrollDownArrow(),\n },\n ({ variant }) => {\n const f = selectFieldTv({ variant });\n return {\n root: f.root(),\n field: f.field(),\n inputWrap: f.inputWrap(),\n value: f.value(),\n label: f.label(),\n icon: f.icon(),\n leadingIcon: f.leadingIcon(),\n supporting: f.supporting(),\n supportingText: f.supportingText(),\n };\n },\n);\n\nexport type { SelectFieldProps } from '@m3-baseui/core';\n"]}
1
+ {"version":3,"sources":["../../../src/tv.ts","../../../src/components/menu/menu-selectable-item.ts","../../../src/components/menu/menu-surface.ts","../../../src/components/select/select.ts"],"names":["baseTv"],"mappings":"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","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 * menu-selectable-item.ts — shared M3 selectable menu row tokens.\n *\n * Select.Item and Menu CheckboxItem / RadioItem share secondary-container fill,\n * position-based selected shapes (issue #98), and the 24dp leading indicator column.\n */\nimport { tv } from '../../tv';\n\n/** State layer on selectable rows (hover / highlighted / pressed). */\nexport const menuSelectableItemStateLayer = [\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 'data-[highlighted]:before:opacity-[var(--md-sys-state-hover)]',\n 'active:before:opacity-[var(--md-sys-state-pressed)]',\n] as const;\n\n/** M3 selectable row fill when selected or checked. */\nexport const menuSelectableItemSelectedFill = [\n 'data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container',\n 'data-[checked]:bg-secondary-container data-[checked]:text-on-secondary-container',\n] as const;\n\n/** M3 MenuDefaults.itemShape — corner radii on the selected/checked container. */\nexport const menuSelectableItemPositionShape = [\n 'data-[selected]:data-[position=only]:rounded-extra-small',\n 'data-[selected]:data-[position=first]:rounded-t-extra-small',\n 'data-[selected]:data-[position=middle]:rounded-none',\n 'data-[selected]:data-[position=last]:rounded-b-extra-small',\n 'data-[checked]:data-[position=only]:rounded-extra-small',\n 'data-[checked]:data-[position=first]:rounded-t-extra-small',\n 'data-[checked]:data-[position=middle]:rounded-none',\n 'data-[checked]:data-[position=last]:rounded-b-extra-small',\n] as const;\n\n/** Fallback when rows are rendered via a wrapper and data-position is not stamped. */\nexport const menuSelectableItemPositionShapeFallback = [\n 'data-[selected]:not([data-position]):rounded-extra-small',\n 'data-[checked]:not([data-position]):rounded-extra-small',\n] as const;\n\nexport const menuSelectableItemDisabled = [\n 'data-[disabled]:text-on-surface/[0.38] data-[disabled]:before:opacity-0 data-[disabled]:pointer-events-none',\n 'data-[disabled]:data-[selected]:bg-transparent data-[disabled]:data-[selected]:text-on-surface/[0.38]',\n 'data-[disabled]:data-[checked]:bg-transparent data-[disabled]:data-[checked]:text-on-surface/[0.38]',\n] as const;\n\nexport const menuSelectableItemBase = [\n 'group relative cursor-pointer select-none outline-none text-label-large text-on-surface',\n 'h-12 px-3 overflow-hidden',\n ...menuSelectableItemStateLayer,\n ...menuSelectableItemSelectedFill,\n ...menuSelectableItemPositionShape,\n ...menuSelectableItemPositionShapeFallback,\n ...menuSelectableItemDisabled,\n] as const;\n\nexport const menuSelectableItemTv = tv({\n slots: {\n /** Select row: check + label + optional trailing meta. */\n selectItem: ['grid grid-cols-[24px_1fr_auto] items-center gap-3', ...menuSelectableItemBase],\n /** Menu checkbox / radio row: check + label. */\n menuSelectableItem: ['grid grid-cols-[24px_1fr] items-center gap-3', ...menuSelectableItemBase],\n itemIndicator: [\n 'inline-flex items-center justify-center text-on-surface',\n 'invisible group-data-[selected]:visible group-data-[checked]:visible',\n 'group-data-[selected]:text-on-secondary-container group-data-[checked]:text-on-secondary-container',\n 'group-data-[disabled]:text-on-surface/[0.38]',\n ],\n },\n});\n\nexport const menuSelectableItem = menuSelectableItemTv();\n","/**\n * menu-surface.ts — shared M3 menu popup surface tokens (Menus specs).\n *\n * Used by Menu (standard width) and Select (anchor-width + scroll). Engine-neutral\n * class strings; both components compose variants on top.\n */\nimport { tv } from '../../tv';\n\n/** Base popup surface shared by Menu and Select list popups. */\nexport const menuSurfaceBase = [\n 'py-2',\n 'bg-surface-container text-on-surface rounded-extra-small shadow-level2',\n 'origin-[var(--transform-origin)] transition-[opacity,transform] duration-150 ease-standard',\n 'data-[starting-style]:opacity-0 data-[starting-style]:scale-95',\n 'data-[ending-style]:opacity-0',\n 'focus:outline-none',\n] as const;\n\nexport const menuSurfaceTv = tv({\n slots: {\n popup: ['max-w-[280px]', ...menuSurfaceBase],\n groupLabel: 'px-3 py-2 text-label-small text-on-surface-variant',\n },\n variants: {\n width: {\n /** Standalone Menu: 112–280dp. */\n standard: { popup: 'min-w-[112px]' },\n /** Exposed Dropdown / Select: at least anchor width, capped at 280dp. */\n anchor: { popup: 'min-w-[max(112px,var(--anchor-width))]' },\n },\n scroll: {\n none: {},\n /** Select popup: clamp height and scroll the list. */\n auto: { popup: 'max-h-[var(--available-height)] overflow-auto' },\n },\n },\n defaultVariants: {\n width: 'standard',\n scroll: 'none',\n },\n});\n\nexport const menuSurface = menuSurfaceTv();\n","/**\n * select.ts — Tailwind classes for the M3 Select.\n *\n * Trigger = outlined field (56dp; 3dp primary border when open/focused, per the\n * M3 outlined-field focus-outline-width). Popup = M3 menu surface sized to the\n * anchor, clamped to the M3 menu 112–280dp bounds. Selectable items use\n * label-large, a leading check (on-surface; on-secondary-container when\n * selected), and secondary-container fill on the selected row. Same DOM as VE.\n *\n * Disabled follows the M3 outlined-field per-token opacities (not a blanket\n * fade): outline on-surface/0.12, label/value + icon on-surface/0.38.\n */\nimport { createSelect } from '@m3-baseui/core';\nimport { tv } from '../../tv';\nimport { menuSelectableItem } from '../menu/menu-selectable-item';\nimport { menuSurfaceTv } from '../menu/menu-surface';\n\nconst surface = menuSurfaceTv({ width: 'anchor', scroll: 'auto' });\nconst selectable = menuSelectableItem;\n\nexport const selectTv = tv({\n slots: {\n trigger: [\n 'group relative inline-flex items-center justify-between gap-2 box-border',\n 'h-14 min-w-[200px] px-4 rounded-extra-small border border-outline bg-transparent',\n 'text-on-surface text-body-large cursor-pointer outline-none text-left',\n 'transition-colors duration-150 ease-standard',\n // focus/open = 3dp primary outline; padding drops 2px to keep content steady\n 'data-[popup-open]:border-primary data-[popup-open]:border-[3px] data-[popup-open]:px-[14px]',\n 'focus-visible:border-primary focus-visible:border-[3px] focus-visible:px-[14px]',\n 'data-[disabled]:border-on-surface/[0.12] data-[disabled]:text-on-surface/[0.38] data-[disabled]:pointer-events-none',\n ],\n value: 'flex-1 truncate',\n icon: 'flex text-on-surface-variant transition-transform duration-150 group-data-[popup-open]:rotate-180 group-data-[disabled]:text-on-surface/[0.38]',\n popup: surface.popup(),\n item: [\n selectable.selectItem(),\n // M3 trailing supporting text (e.g. meta) sits in the last column.\n '[&_[data-slot=select-trailing]]:pl-4 [&_[data-slot=select-trailing]]:text-label-large [&_[data-slot=select-trailing]]:text-on-surface-variant',\n 'data-[selected]:[&_[data-slot=select-trailing]]:text-on-secondary-container',\n 'data-[disabled]:[&_[data-slot=select-trailing]]:text-on-surface/[0.38]',\n ],\n itemIndicator: selectable.itemIndicator(),\n groupLabel: surface.groupLabel(),\n },\n});\n\n/**\n * Exposed Dropdown Menu anchor (issue #96): the Select rendered as an M3\n * TextField. The floating label, focus/filled border and trailing dropdown\n * icon key off the trigger's own field state — Base UI stamps `data-focused` /\n * `data-filled` / `data-invalid` / `data-popup-open` on the trigger (the\n * `group/field`) once it sits inside `Field.Root`. Mirrors the standalone\n * TextField so the anchor reads identically. Same DOM as the VE build.\n */\nexport const selectFieldTv = tv({\n slots: {\n // The `group` hook lives here (not in engine-neutral core): supporting text\n // keys its error color off Field.Root's `group-data-[invalid]`.\n root: 'group flex flex-col gap-1 min-w-[210px]',\n field: [\n 'group/field relative flex items-stretch gap-3 h-14 px-4 box-border w-full',\n 'text-on-surface text-body-large cursor-pointer text-left outline-none',\n 'transition-[border-color,padding] duration-150 ease-standard',\n 'data-[disabled]:opacity-[0.38] data-[disabled]:pointer-events-none',\n ],\n inputWrap: 'relative z-0 flex-1 flex items-center min-w-0 overflow-visible',\n value: 'flex-1 truncate text-body-large text-on-surface',\n label: [\n 'absolute left-0 pointer-events-none origin-left',\n 'top-1/2 -translate-y-1/2 text-body-large text-on-surface-variant',\n 'transition-all duration-150 ease-standard',\n 'group-data-[focused]/field:text-primary group-data-[invalid]/field:text-error',\n ],\n icon: [\n // Disabled dimming comes from the field's own opacity (0.38); no per-icon\n // color override here, else it would compound to ~0.14.\n 'flex items-center text-on-surface-variant transition-transform duration-150 [&>svg]:size-6',\n 'group-data-[popup-open]/field:rotate-180',\n ],\n leadingIcon:\n 'inline-flex items-center justify-center shrink-0 text-on-surface-variant [&>svg]:size-6',\n supporting: [\n 'flex justify-between gap-4 px-4 text-body-small text-on-surface-variant',\n 'group-data-[invalid]:text-error',\n ],\n supportingText: 'min-w-0',\n },\n variants: {\n variant: {\n filled: {\n field: [\n 'overflow-hidden rounded-t-extra-small bg-surface-container-highest',\n // M3 filled hover: state layer (on-surface × state-hover).\n 'before:absolute before:inset-0 before:rounded-[inherit] before:bg-current before:opacity-0 before:pointer-events-none',\n 'before:transition-opacity before:duration-100',\n 'hover:before:opacity-[var(--md-sys-state-hover)]',\n 'data-[disabled]:before:opacity-0',\n // M3 filled resting active-indicator: 1dp on-surface-variant.\n 'border-b border-on-surface-variant hover:border-on-surface',\n // M3 filled focus-active-indicator-height is 3dp.\n 'data-[focused]:border-b-[3px] data-[focused]:border-primary',\n 'data-[popup-open]:border-b-[3px] data-[popup-open]:border-primary',\n 'data-[invalid]:border-error',\n ],\n value: 'pt-3',\n label: [\n 'group-data-[focused]/field:top-1.5 group-data-[focused]/field:translate-y-0 group-data-[focused]/field:text-body-small',\n 'group-data-[filled]/field:top-1.5 group-data-[filled]/field:translate-y-0 group-data-[filled]/field:text-body-small',\n 'group-data-[popup-open]/field:top-1.5 group-data-[popup-open]/field:translate-y-0 group-data-[popup-open]/field:text-body-small',\n 'group-data-[has-placeholder]/field:top-1.5 group-data-[has-placeholder]/field:translate-y-0 group-data-[has-placeholder]/field:text-body-small',\n ],\n },\n outlined: {\n field: [\n 'overflow-visible rounded-extra-small border border-outline hover:border-on-surface',\n // M3 outlined focus-outline-width is 3dp; padding drops 2px so content\n // stays steady as the 1dp border grows (matches the TextField anchor).\n 'data-[focused]:border-[3px] data-[focused]:border-primary data-[focused]:px-[14px]',\n 'data-[popup-open]:border-[3px] data-[popup-open]:border-primary data-[popup-open]:px-[14px]',\n 'data-[invalid]:border-error',\n ],\n label: [\n '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',\n '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',\n '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',\n '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',\n ],\n },\n },\n },\n defaultVariants: {\n variant: 'outlined',\n },\n});\n\nconst s = selectTv();\nexport const Select = createSelect(\n {\n trigger: s.trigger(),\n value: s.value(),\n icon: s.icon(),\n popup: s.popup(),\n item: s.item(),\n itemIndicator: s.itemIndicator(),\n groupLabel: s.groupLabel(),\n },\n ({ variant }) => {\n const f = selectFieldTv({ variant });\n return {\n root: f.root(),\n field: f.field(),\n inputWrap: f.inputWrap(),\n value: f.value(),\n label: f.label(),\n icon: f.icon(),\n leadingIcon: f.leadingIcon(),\n supporting: f.supporting(),\n supportingText: f.supportingText(),\n };\n },\n);\n\nexport type { SelectFieldProps } from '@m3-baseui/core';\n"]}
package/dist/index.js CHANGED
@@ -846,16 +846,7 @@ var selectTv = tv7({
846
846
  "data-[disabled]:[&_[data-slot=select-trailing]]:text-on-surface/[0.38]"
847
847
  ],
848
848
  itemIndicator: selectable2.itemIndicator(),
849
- groupLabel: surface2.groupLabel(),
850
- // Sticky scroll affordances at the popup edges; surface-tinted with a chevron.
851
- scrollUpArrow: [
852
- "sticky top-0 z-[1] flex items-center justify-center h-6 cursor-default",
853
- "bg-surface-container text-on-surface-variant [&>svg]:size-5"
854
- ],
855
- scrollDownArrow: [
856
- "sticky bottom-0 z-[1] flex items-center justify-center h-6 cursor-default",
857
- "bg-surface-container text-on-surface-variant [&>svg]:size-5"
858
- ]
849
+ groupLabel: surface2.groupLabel()
859
850
  }
860
851
  });
861
852
  var selectFieldTv = tv7({
@@ -946,9 +937,7 @@ var Select = createSelect(
946
937
  popup: s3.popup(),
947
938
  item: s3.item(),
948
939
  itemIndicator: s3.itemIndicator(),
949
- groupLabel: s3.groupLabel(),
950
- scrollUpArrow: s3.scrollUpArrow(),
951
- scrollDownArrow: s3.scrollDownArrow()
940
+ groupLabel: s3.groupLabel()
952
941
  },
953
942
  ({ variant }) => {
954
943
  const f = selectFieldTv({ variant });
@@ -2214,13 +2203,19 @@ var carouselTv = tv7({
2214
2203
  slots: {
2215
2204
  root: [
2216
2205
  "flex gap-2 overflow-x-auto snap-x snap-mandatory scroll-smooth",
2217
- "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
2206
+ "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
2207
+ // Keyboard focus ring (M3: 3px secondary, 2px offset); keyboard-only.
2208
+ "outline-none focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-secondary",
2209
+ // Reduced motion: jump instead of smooth-scrolling between snap cells.
2210
+ "motion-reduce:scroll-auto"
2218
2211
  ],
2219
2212
  item: "snap-start shrink-0 overflow-hidden rounded-large"
2220
2213
  },
2221
2214
  variants: {
2222
2215
  variant: {
2223
2216
  "multi-browse": { item: "w-40 h-56" },
2217
+ // Uniform, wider cells that scroll past the container edge.
2218
+ uncontained: { item: "w-56 h-56" },
2224
2219
  hero: { item: "w-72 h-56 snap-center" },
2225
2220
  "full-screen": {
2226
2221
  // gap-0: full-screen slides fill the viewport with no inter-slide gap.