@mkbabb/glass-ui 9.0.0 → 10.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 (170) hide show
  1. package/MIGRATION.md +4768 -0
  2. package/README.md +57 -13
  3. package/dist/DialogContent-CwIBvou_.js +157 -0
  4. package/dist/{DropdownMenuTrigger-8UZsBtZ8.js → DropdownMenuTrigger-CKRnhDSQ.js} +1 -1
  5. package/dist/{Surface-i1tWC-Ga.js → Surface-1nPoabc3.js} +1 -1
  6. package/dist/{accent-tone-solve-Cw7WkRD9.js → accent-tone-solve-5H6FY2QO.js} +1 -1
  7. package/dist/aurora.js +22 -13
  8. package/dist/{badge-owUOaaba.js → badge-BO6BC4G5.js} +1 -1
  9. package/dist/badge.js +1 -1
  10. package/dist/blob.js +2 -2
  11. package/dist/{button-yvGPb0Bx.js → button-BOFTUPyU.js} +1 -1
  12. package/dist/button.js +1 -1
  13. package/dist/{card-3HFFpC7_.js → card-ByyqRBvK.js} +2 -2
  14. package/dist/card.js +1 -1
  15. package/dist/carousel.js +3 -3
  16. package/dist/chip.js +8 -3
  17. package/dist/{class-names-q-UGOkHH.js → class-names-FlXcvRRT.js} +65 -18
  18. package/dist/{collapsible-B7O6m-Ch.js → collapsible-DFzK29Oh.js} +5 -2
  19. package/dist/collapsible.js +1 -1
  20. package/dist/color.js +11 -11
  21. package/dist/{command-tEzAaVY_.js → command-C-5xSEJ2.js} +8 -8
  22. package/dist/command.js +1 -1
  23. package/dist/component-styles.css +1 -0
  24. package/dist/components/_shared/class-names.d.ts +10 -1
  25. package/dist/components/_shared/menu/menu.css +1 -1
  26. package/dist/components/_shared/overlay/index.d.ts +1 -0
  27. package/dist/components/_shared/overlay/shortcuts.d.ts +12 -0
  28. package/dist/components/aurora/composables/atoms.d.ts +22 -6
  29. package/dist/components/aurora/composables/runtime.d.ts +6 -4
  30. package/dist/components/aurora/constants/presets.d.ts +19 -1
  31. package/dist/components/blob/Blob.vue.d.ts +3 -3
  32. package/dist/components/card/Card.vue.d.ts +8 -2
  33. package/dist/components/chip/Chip.vue.d.ts +1 -7
  34. package/dist/components/chip/chipVariants.d.ts +1 -0
  35. package/dist/components/collapsible/Collapsible.vue.d.ts +1 -0
  36. package/dist/components/command/CommandDialog.vue.d.ts +1 -1
  37. package/dist/components/configurator/styles.css +1 -1
  38. package/dist/components/dark-mode-toggle/dark-mode-toggle.css +1 -1
  39. package/dist/components/deck/styles/capture.css +1 -1
  40. package/dist/components/dialog/styles.css +1 -1
  41. package/dist/components/dock/composables/dockCrossfadeContext.d.ts +0 -2
  42. package/dist/components/dock/composables/index.d.ts +1 -1
  43. package/dist/components/dock/composables/useDockHold.d.ts +16 -12
  44. package/dist/components/dock/styles/layers.css +1 -1
  45. package/dist/components/fourier-field/FourierField.vue.d.ts +1 -1
  46. package/dist/components/fourier-field/constants.d.ts +8 -7
  47. package/dist/components/fourier-field/index.d.ts +2 -2
  48. package/dist/components/labeled-field/LabeledSwitch.vue.d.ts +3 -1
  49. package/dist/components/labeled-field/types.d.ts +1 -1
  50. package/dist/components/menu/DropdownMenu.vue.d.ts +1 -1
  51. package/dist/components/metric/coalesce-metric.d.ts +6 -1
  52. package/dist/components/metric/styles.css +1 -1
  53. package/dist/components/popover/Popover.vue.d.ts +1 -1
  54. package/dist/components/scroll-progress-rim/styles.css +1 -1
  55. package/dist/components/sheet/styles.css +1 -1
  56. package/dist/components/slider/styles.css +1 -1
  57. package/dist/components/tabs/SegmentedTabs.vue.d.ts +25 -112
  58. package/dist/components/tabs/composables/useTabDragMorph.d.ts +1 -1
  59. package/dist/components/tabs/composables/useTabResponsive.d.ts +11 -11
  60. package/dist/components/tabs/index.d.ts +1 -1
  61. package/dist/components/tabs/styles/drag.css +1 -1
  62. package/dist/components/tabs/styles/segmented.css +1 -1
  63. package/dist/components/tabs/types.d.ts +85 -0
  64. package/dist/components/timeline/index.d.ts +2 -0
  65. package/dist/components/toast/Toast.vue.d.ts +2 -2
  66. package/dist/composables/color/index.d.ts +0 -15
  67. package/dist/composables/dark/darkModeSyncScript.d.ts +24 -1
  68. package/dist/composables/dom/useResolveTokenColor.d.ts +1 -1
  69. package/dist/composables/glass/index.d.ts +2 -0
  70. package/dist/composables/keyboard/useKeyboardShortcuts.d.ts +47 -1
  71. package/dist/composables/sidebar/types.d.ts +5 -1
  72. package/dist/{configurator-BHJymdrF.js → configurator-DiwVN573.js} +16 -16
  73. package/dist/configurator.js +1 -1
  74. package/dist/constellation.js +3 -3
  75. package/dist/{content-CWO-XL7o.js → content-So3j6SOe.js} +1 -1
  76. package/dist/dark-mode-toggle.js +2 -2
  77. package/dist/{dark-CLlmo7dD.js → dark-pONY3x93.js} +2 -2
  78. package/dist/dark.js +1 -1
  79. package/dist/{data-table-_RrOEdiw.js → data-table-Ba_uTfPc.js} +3 -3
  80. package/dist/data-table.js +1 -1
  81. package/dist/{deck-Ci6YjB5e.js → deck-Cm_VmyNL.js} +1 -1
  82. package/dist/deck.js +1 -1
  83. package/dist/{dialog-CbRnTRtg.js → dialog-BZoFG0j8.js} +1 -1
  84. package/dist/dialog.js +2 -2
  85. package/dist/dock.js +9 -13
  86. package/dist/easing.js +4 -4
  87. package/dist/{expandable-container-BY1hQXi4.js → expandable-container-CZUj9BzY.js} +9 -9
  88. package/dist/expandable-container.js +1 -1
  89. package/dist/fourier-field.js +53 -58
  90. package/dist/glass-ui.css +1 -1
  91. package/dist/glass-ui.js +27 -27
  92. package/dist/handmark.js +1 -1
  93. package/dist/index.d.ts +1 -1
  94. package/dist/infinite-scroll.js +16 -17
  95. package/dist/{input-Bls2A4Tt.js → input-eLZ_AU7l.js} +1 -1
  96. package/dist/input.js +1 -1
  97. package/dist/keyboard.js +64 -21
  98. package/dist/{label-BQEZhnK_.js → label-CE03H1KL.js} +2 -2
  99. package/dist/label.js +1 -1
  100. package/dist/labeled-field.js +8 -5
  101. package/dist/{menu-TDMNtZjG.js → menu-BnmCOa3y.js} +92 -89
  102. package/dist/menu.js +2 -2
  103. package/dist/metric.js +12 -7
  104. package/dist/{motion-D4uYE0UM.js → motion-BvV1_24p.js} +1 -1
  105. package/dist/motion-core.js +1 -1
  106. package/dist/{number-field-NFAwQ0HK.js → number-field-RP89046a.js} +2 -2
  107. package/dist/number-field.js +1 -1
  108. package/dist/pager-dots.js +3 -3
  109. package/dist/popover-DA87hFBx.js +184 -0
  110. package/dist/popover.js +1 -1
  111. package/dist/{progress-DF8dWZIX.js → progress-eVa-mc7J.js} +1 -1
  112. package/dist/progress.js +1 -1
  113. package/dist/{radio-group-BNV7PN1O.js → radio-group-B58Bz16F.js} +1 -1
  114. package/dist/radio-group.js +1 -1
  115. package/dist/{select-COox45Kv.js → select-fy3vtArm.js} +13 -13
  116. package/dist/select.js +1 -1
  117. package/dist/{separator-CN11t406.js → separator-D4EZM10u.js} +2 -2
  118. package/dist/separator.js +1 -1
  119. package/dist/{sheet-BEFvnO_u.js → sheet-BQJyER59.js} +120 -115
  120. package/dist/sheet.js +2 -2
  121. package/dist/shortcuts-DGGWNRNe.js +13 -0
  122. package/dist/sidebar.js +4 -4
  123. package/dist/{status-dot-BpnqOP5N.js → status-dot-W4LFiJps.js} +2 -2
  124. package/dist/status-dot.js +1 -1
  125. package/dist/styles/accessibility.css +1 -1
  126. package/dist/styles/animations.css +1 -1
  127. package/dist/styles/components.css +1 -1
  128. package/dist/styles/glass/a11y-fallback.css +1 -1
  129. package/dist/styles/glass/dissolve.css +1 -1
  130. package/dist/styles/glass/focus-veil.css +1 -1
  131. package/dist/styles/glass/ladder.css +1 -1
  132. package/dist/styles/glass/overlay-plate.css +1 -1
  133. package/dist/styles/glass/reveal.css +1 -1
  134. package/dist/styles/glass-specular-track.css +1 -1
  135. package/dist/styles/paper.css +1 -1
  136. package/dist/styles/scroll-choreography.css +1 -1
  137. package/dist/styles/scroll-chrome.css +1 -1
  138. package/dist/styles/scroll-driven.css +1 -1
  139. package/dist/styles/theme/literals.css +1 -1
  140. package/dist/styles/tokens/color-radius.css +1 -1
  141. package/dist/styles/tokens/dark-arm-glass.css +1 -1
  142. package/dist/styles/tokens/light-dark.css +1 -1
  143. package/dist/styles/tokens/offsets.css +1 -1
  144. package/dist/styles/tokens/scheme-motion.css +1 -1
  145. package/dist/styles/tokens/sizing.css +1 -1
  146. package/dist/styles/typography/semantic.css +1 -1
  147. package/dist/styles/typography/utilities.css +1 -1
  148. package/dist/styles/utilities/a11y-overrides.css +1 -1
  149. package/dist/styles/utilities/responsive.css +1 -1
  150. package/dist/styles/view-transition.css +1 -1
  151. package/dist/styles/viz-reveal.css +1 -1
  152. package/dist/surface.js +1 -1
  153. package/dist/{switch-lLkbREB-.js → switch-BYUZ6g9G.js} +1 -1
  154. package/dist/switch.js +1 -1
  155. package/dist/{tabs-DSJMd1Et.js → tabs-rdRXKXxd.js} +4 -3
  156. package/dist/tabs.js +1 -1
  157. package/dist/textarea.js +1 -1
  158. package/dist/timeline.js +44 -42
  159. package/dist/{toast-9c6Kp58L.js → toast-DVOwo6GB.js} +1 -1
  160. package/dist/toast.js +1 -1
  161. package/dist/{toggle-group-DUcmKnDw.js → toggle-group-CC5b3o1R.js} +1 -1
  162. package/dist/toggle-group.js +1 -1
  163. package/dist/{tooltip-BKk2qVDn.js → tooltip-DhTHhtJN.js} +1 -1
  164. package/dist/tooltip.js +1 -1
  165. package/dist/typewriter.js +1 -1
  166. package/dist/{useAccentTone-DFAh1osB.js → useAccentTone-DitmKfGL.js} +1 -1
  167. package/dist/{usePointerVelocityField-DsIf7yyq.js → usePointerVelocityField-Lx26_Yap.js} +1 -1
  168. package/package.json +4 -2
  169. package/dist/DialogContent-4hzLiaCQ.js +0 -152
  170. package/dist/popover-C04Rrdcz.js +0 -181
@@ -37,5 +37,5 @@ export type LabeledSliderProps = Omit<SliderProps, "class" | "modelValue"> & Lab
37
37
  modelValue: number;
38
38
  };
39
39
  export type LabeledSwitchProps = Omit<SwitchProps, "class" | "modelValue"> & LabeledFieldCommonProps & {
40
- modelValue: boolean;
40
+ modelValue?: boolean;
41
41
  };
@@ -37,9 +37,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Dropdo
37
37
  }, string, import("vue").PublicProps, Readonly<DropdownMenuComponentProps> & Readonly<{
38
38
  "onUpdate:open"?: ((value: boolean) => any) | undefined;
39
39
  }>, {
40
+ modal: boolean;
40
41
  open: boolean;
41
42
  defaultOpen: boolean;
42
- modal: boolean;
43
43
  trigger: MenuTrigger;
44
44
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
45
45
  default?: () => unknown;
@@ -10,11 +10,16 @@ export interface CoalesceMetricOptions {
10
10
  /** `12400` → `12.4K`. `Intl.NumberFormat` compact notation, never a hand ladder. */
11
11
  compact?: boolean;
12
12
  locale?: string;
13
+ /** A positive number takes a leading `+`—the delta, whose number and sign carry
14
+ its polarity (O-32 §2.1). A negative already carries its sign; zero takes none. */
15
+ signed?: boolean;
13
16
  }
14
17
  /**
15
18
  * The family's ONE data-shaping seam. Every readout in the family — the atom's
16
19
  * value, its unit-bearing reading, its delta — passes through this and nothing
17
- * else, which is why "what counts as empty" has exactly one answer.
20
+ * else, which is why "what counts as empty" has exactly one answer. [2026-09-22 ·
21
+ * O-32 §2.1: the delta's `+` is part of its reading, so `signed` is shaped here on
22
+ * both the compact and the plain path—never a prefix at the call site.]
18
23
  *
19
24
  * Finite numbers (including `0` and `-0`) and nonblank strings are readings.
20
25
  * Blank strings, non-finite numbers, `null` and `undefined` take the placeholder.
@@ -1 +1 @@
1
- @layer components{.metric{display: inline-grid;grid-template-columns: minmax(0,auto) minmax(0,1fr);min-inline-size: 0;align-items: baseline;color: var(--foreground);gap: 0.125rem 0.5rem;}.metric[data-posture="stacked"],.metric[data-posture="cell"]{grid-template-columns: minmax(0,1fr);}.metric__label,.metric__context{min-inline-size: 0;overflow-wrap: anywhere;color: var(--muted-foreground);}.metric__label{font-size: var(--control-label);font-weight: 550;letter-spacing: var(--type-tracking-wide);text-transform: uppercase;}.metric__context{grid-column: 1 / -1;font-size: var(--type-caption);line-height: 1.35;}.metric__reading{display: inline-flex;min-inline-size: 0;align-items: baseline;gap: 0.3em;}.metric__value{min-inline-size: 3ch;overflow-wrap: anywhere;font-family: var(--font-mono);font-size: var(--type-prose);font-weight: 650;font-variant-numeric: tabular-nums lining-nums;letter-spacing: var(--type-tracking-tight);line-height: 1;}.metric__unit{flex: none;color: var(--muted-foreground);font-family: var(--font-mono);font-size: var(--type-caption);line-height: 1;}.metric__delta{flex: none;color: var(--muted-foreground);font-family: var(--font-mono);font-size: var(--type-caption);font-variant-numeric: tabular-nums lining-nums;line-height: 1;}.metric__delta[data-polarity="up"]{color: var(--success);}.metric__delta[data-polarity="down"]{color: var(--destructive);}.metric[data-size="sm"] .metric__value{font-size: var(--type-small);}.metric[data-size="lg"] .metric__value,.metric[data-posture="cell"] .metric__value{font-size: var(--type-title);}.metric[data-size="xl"] .metric__value{font-size: var(--type-display-3);}.metric[data-empty] .metric__value{color: var(--muted-foreground);}.metric[data-loading] .metric__value{color: transparent;border-radius: var(--radius-sm);background: color-mix( in oklab,var(--foreground) calc(var(--ink-seam) * 100%),transparent );}.metric[data-loading] .metric__unit,.metric[data-loading] .metric__delta{visibility: hidden;}.metric[data-posture="cell"]{display: grid;align-content: start;padding: clamp(0.75rem,2cqi,1rem);border: 1px solid oklch(from var(--foreground) l c h / var(--ink-edge));border-radius: var(--radius-card);background: var(--glass-plate-wash);gap: 0.375rem;}.metric-stack{container: metric-stack / inline-size;display: grid;grid-template-columns: minmax(7rem,1fr) minmax(0,auto);inline-size: 100%;gap: 0.75rem 1.25rem;}.metric-stack[data-density="compact"]{gap: 0.5rem 1rem;}.metric-row{display: grid;grid-column: 1 / -1;grid-template-columns: subgrid;align-items: baseline;padding-block: 0.25rem;}.metric-row > .metric[data-posture="row"]{display: grid;grid-column: 1 / -1;grid-template-columns: subgrid;}.metric[data-posture="row"] > .metric__reading{justify-self: end;}.metric[data-posture="row"] > .metric__context{grid-column: 1;}@container metric-stack (max-width: 24rem){.metric-row,.metric-row > .metric[data-posture="row"]{grid-template-columns: minmax(0,1fr);gap: 0.25rem;}.metric[data-posture="row"] > .metric__reading{justify-self: start;}}}
1
+ @layer components{.metric{display: inline-grid;grid-template-columns: minmax(0,auto) minmax(0,1fr);min-inline-size: 0;align-items: baseline;color: var(--foreground);gap: 0.125rem 0.5rem;}.metric[data-posture="stacked"],.metric[data-posture="cell"]{grid-template-columns: minmax(0,1fr);}.metric__label,.metric__context{min-inline-size: 0;overflow-wrap: anywhere;color: var(--muted-foreground);}.metric__label{font-size: var(--control-label);font-weight: 550;letter-spacing: var(--type-tracking-wide);text-transform: uppercase;}.metric__context{grid-column: 1 / -1;font-size: var(--type-caption);line-height: 1.35;}.metric__reading{display: inline-flex;min-inline-size: 0;align-items: baseline;gap: 0.3em;}.metric__value{min-inline-size: 3ch;overflow-wrap: anywhere;font-family: var(--font-mono);font-size: var(--type-prose);font-weight: 650;font-variant-numeric: tabular-nums lining-nums;letter-spacing: var(--type-tracking-tight);line-height: 1;}.metric__unit{flex: none;color: var(--muted-foreground);font-family: var(--font-mono);font-size: var(--type-caption);line-height: 1;}.metric__delta{flex: none;color: var(--foreground);font-family: var(--font-mono);font-size: var(--type-caption);font-variant-numeric: tabular-nums lining-nums;line-height: 1;}.metric[data-size="sm"] .metric__value{font-size: var(--type-small);}.metric[data-size="lg"] .metric__value,.metric[data-posture="cell"] .metric__value{font-size: var(--type-title);}.metric[data-size="xl"] .metric__value{font-size: var(--type-display-3);}.metric[data-empty] .metric__value{color: var(--muted-foreground);}.metric[data-loading] .metric__value{color: transparent;border-radius: var(--radius-sm);background: color-mix( in oklab,var(--foreground) calc(var(--ink-seam) * 100%),transparent );}.metric[data-loading] .metric__unit,.metric[data-loading] .metric__delta{visibility: hidden;}.metric[data-posture="cell"]{display: grid;align-content: start;padding: clamp(0.75rem,2cqi,1rem);border: 1px solid oklch(from var(--foreground) l c h / var(--ink-edge));border-radius: var(--radius-card);background: var(--glass-plate-wash);gap: 0.375rem;}.metric-stack{container: metric-stack / inline-size;display: grid;grid-template-columns: minmax(7rem,1fr) minmax(0,auto);inline-size: 100%;gap: 0.75rem 1.25rem;}.metric-stack[data-density="compact"]{gap: 0.5rem 1rem;}.metric-row{display: grid;grid-column: 1 / -1;grid-template-columns: subgrid;align-items: baseline;padding-block: 0.25rem;}.metric-row > .metric[data-posture="row"]{display: grid;grid-column: 1 / -1;grid-template-columns: subgrid;}.metric[data-posture="row"] > .metric__reading{justify-self: end;}.metric[data-posture="row"] > .metric__context{grid-column: 1;}@container metric-stack (max-width: 24rem){.metric-row,.metric-row > .metric[data-posture="row"]{grid-template-columns: minmax(0,1fr);gap: 0.25rem;}.metric[data-posture="row"] > .metric__reading{justify-self: start;}}}
@@ -46,9 +46,9 @@ declare const __VLS_base: import("vue").DefineComponent<PopoverProps, {}, {}, {}
46
46
  }, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{
47
47
  "onUpdate:open"?: ((value: boolean) => any) | undefined;
48
48
  }>, {
49
+ modal: boolean;
49
50
  open: boolean;
50
51
  defaultOpen: boolean;
51
- modal: boolean;
52
52
  trigger: PopoverTriggerMode;
53
53
  openDelay: number;
54
54
  closeDelay: number;
@@ -1 +1 @@
1
- .scroll-progress-rim{--scroll-progress-rim-width: 3px;--scroll-progress-rim-inset: 2px;--scroll-progress-rim-margin: 8px;position: absolute;inset: 0;z-index: 2;isolation: isolate;pointer-events: none;}.scroll-progress-rim__track{position: absolute;border-radius: var(--radius-pill);background: var(--track-well-recess);}.scroll-progress-rim[data-orientation="horizontal"] .scroll-progress-rim__track{inset-inline: var(--scroll-progress-rim-margin);inset-block-end: var(--scroll-progress-rim-inset);block-size: var(--scroll-progress-rim-width);}.scroll-progress-rim[data-orientation="vertical"] .scroll-progress-rim__track{inset-block: var(--scroll-progress-rim-margin);inset-inline-end: var(--scroll-progress-rim-inset);inline-size: var(--scroll-progress-rim-width);}.scroll-progress-rim__fill{position: absolute;inset: 0;border-radius: inherit;background: var(--scroll-progress-rim-spectrum,var(--rainbow-violet));clip-path: inset(0 100% 0 0 round var(--radius-pill));transition: clip-path var(--spring-dock-duration) var(--spring-dock);}.scroll-progress-rim[data-orientation="horizontal"] .scroll-progress-rim__fill{clip-path: inset( 0 calc(100% - var(--scroll-progress-rim-fill,0%)) 0 0 round var(--radius-pill) );}.scroll-progress-rim[data-orientation="horizontal"]:dir(rtl) .scroll-progress-rim__fill{clip-path: inset( 0 0 0 calc(100% - var(--scroll-progress-rim-fill,0%)) round var(--radius-pill) );}.scroll-progress-rim[data-orientation="vertical"] .scroll-progress-rim__fill{clip-path: inset( calc(100% - var(--scroll-progress-rim-fill,0%)) 0 0 0 round var(--radius-pill) );}@media (prefers-reduced-motion: reduce){.scroll-progress-rim__fill{transition: none;}}
1
+ @layer components{.scroll-progress-rim{--scroll-progress-rim-width: 3px;--scroll-progress-rim-inset: 2px;--scroll-progress-rim-margin: 8px;position: absolute;inset: 0;z-index: 2;isolation: isolate;pointer-events: none;}.scroll-progress-rim__track{position: absolute;border-radius: var(--radius-pill);background: var(--track-well-recess);}.scroll-progress-rim[data-orientation="horizontal"] .scroll-progress-rim__track{inset-inline: var(--scroll-progress-rim-margin);inset-block-end: var(--scroll-progress-rim-inset);block-size: var(--scroll-progress-rim-width);}.scroll-progress-rim[data-orientation="vertical"] .scroll-progress-rim__track{inset-block: var(--scroll-progress-rim-margin);inset-inline-end: var(--scroll-progress-rim-inset);inline-size: var(--scroll-progress-rim-width);}.scroll-progress-rim__fill{position: absolute;inset: 0;border-radius: inherit;background: var(--scroll-progress-rim-spectrum,var(--rainbow-violet));clip-path: inset(0 100% 0 0 round var(--radius-pill));transition: clip-path var(--spring-dock-duration) var(--spring-dock);}.scroll-progress-rim[data-orientation="horizontal"] .scroll-progress-rim__fill{clip-path: inset( 0 calc(100% - var(--scroll-progress-rim-fill,0%)) 0 0 round var(--radius-pill) );}.scroll-progress-rim[data-orientation="horizontal"]:dir(rtl) .scroll-progress-rim__fill{clip-path: inset( 0 0 0 calc(100% - var(--scroll-progress-rim-fill,0%)) round var(--radius-pill) );}.scroll-progress-rim[data-orientation="vertical"] .scroll-progress-rim__fill{clip-path: inset( calc(100% - var(--scroll-progress-rim-fill,0%)) 0 0 0 round var(--radius-pill) );}@media (prefers-reduced-motion: reduce){.scroll-progress-rim__fill{transition: none;}}}
@@ -1 +1 @@
1
- :where([data-slot="sheet-content"]){position: fixed;z-index: var(--z-modal);}@property --detent-t{syntax: "<number>";inherits: false;initial-value: 0;}:where([data-slot="sheet-content"][data-detents]){--sheet-seam-width: 1px;contain: layout paint;display: grid;grid-template-rows: auto minmax(0,1fr);}:where([data-slot="sheet-content"][data-modal="false"]){z-index: calc(var(--z-dock) - 1);}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-detent-handle"],[data-slot="sheet-content"][data-detents] [data-slot="dialog-header"] ){touch-action: none;}:where([data-slot="sheet-content"][data-dragging]){cursor: grabbing;user-select: none;}:where([data-slot="sheet-content"] > [data-slot="sheet-content-region"]){display: grid;align-content: start;gap: var(--space-body);}:where([data-slot="sheet-content"][data-scroll] > [data-slot="sheet-content-region"]){min-block-size: 0;max-block-size: calc(100dvh - 2 * var(--space-family));overflow-y: auto;}:where( [data-slot="sheet-content"][data-side="left"]:not([data-detents]) > [data-slot="sheet-content-region"],[data-slot="sheet-content"][data-side="right"]:not([data-detents]) > [data-slot="sheet-content-region"] ){display: flex;flex-direction: column;block-size: 100%;min-block-size: 0;}:where( [data-slot="sheet-content"][data-side="left"] > [data-slot="sheet-content-region"] > :only-child,[data-slot="sheet-content"][data-side="right"] > [data-slot="sheet-content-region"] > :only-child ){min-block-size: 0;}:where([data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"]){display: grid;grid-template-rows: minmax(0,auto) minmax(1lh,1fr) auto;align-content: end;min-block-size: 0;gap: var(--space-body);}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"] > :not([data-slot="dialog-header"]):not([data-slot="dialog-footer"]) ){min-block-size: 0;overflow-y: auto;overscroll-behavior: contain;}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"] > [data-slot="dialog-header"] ){overflow: hidden;padding-block-end: var(--space-body);border-block-end: var(--sheet-seam-width) solid oklch(from var(--glass-veil-ink) l c h / calc(var(--glass-veil-step) * 2));}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"] > [data-slot="dialog-footer"] ){padding-block-start: var(--space-body);border-block-start: var(--sheet-seam-width) solid oklch(from var(--glass-veil-ink) l c h / calc(var(--glass-veil-step) * 2));}:where([data-slot="sheet-content"]:not([data-detents]):has([data-slot="dialog-close"])) :where([data-slot="dialog-header"]){padding-inline-end: calc(var(--touch-target) + var(--space-atom));}:where([data-slot="sheet-content"][data-detents] > [data-slot="sheet-detent-handle"]){display: flex;align-items: center;justify-content: center;min-block-size: var(--touch-target);cursor: grab;}:where([data-slot="sheet-detent-handle"] > [data-slot="sheet-detent-grip"]){display: block;inline-size: calc( var(--space-section) + var(--space-family) * clamp(0,var(--detent-t),1) );block-size: calc(var(--space-atom) / 2);border-radius: var(--radius-pill);background-color: currentcolor;opacity: calc(0.45 + ((0.85 - 0.45) / 2) * clamp(0,var(--detent-t),1));transition: opacity var(--spring-dock-duration) var(--spring-dock),inline-size var(--spring-dock-duration) var(--spring-dock);}@media (hover: hover){:where([data-slot="sheet-detent-handle"]:hover > [data-slot="sheet-detent-grip"]){opacity: 0.85;}}:where([data-slot="sheet-detent-handle"]:focus-visible){outline: none;}:where( [data-slot="sheet-detent-handle"]:focus-visible > [data-slot="sheet-detent-grip"],[data-slot="sheet-content"][data-dragging] [data-slot="sheet-detent-grip"] ){opacity: 0.85;}:where( [data-slot="sheet-detent-handle"]:focus-visible > [data-slot="sheet-detent-grip"] ){box-shadow: 0 0 0 3px var(--focus-ring-color);}@media (prefers-reduced-motion: reduce){:where([data-slot="sheet-detent-grip"]){transition: none;}}:where([data-slot="sheet-content"]){anchor-name: --glass-sheet-edge;}:where([data-slot="sheet-content"][data-surface="glass"]){-webkit-backdrop-filter: none;backdrop-filter: none;}:where([data-slot="glass-graded-halo"]){position: fixed;position-anchor: --glass-sheet-edge;top: anchor(top);right: anchor(right);bottom: anchor(bottom);left: anchor(left);z-index: calc(var(--z-modal) - 1);pointer-events: none;background: linear-gradient( var(--sheet-edge-direction),color-mix(in oklab,var(--glass-plate-overlay) 10%,transparent) 0,color-mix(in oklab,var(--glass-plate-overlay) 16%,transparent) 40px,color-mix(in oklab,var(--glass-plate-overlay) 34%,transparent) 120px,color-mix(in oklab,var(--glass-plate-overlay) 34%,transparent) 100% );-webkit-backdrop-filter: blur(calc(34px * var(--glass-level))) saturate(var(--glass-saturate));backdrop-filter: blur(calc(34px * var(--glass-level))) saturate(var(--glass-saturate));mask-image: linear-gradient( var(--sheet-edge-direction),rgb(0 0 0 / 0.325) 0,rgb(0 0 0 / 0.45) 40px,black 120px,black 100% );}:where([data-slot="glass-graded-halo"][data-modal="false"]){z-index: calc(var(--z-dock) - 2);}:where([data-slot="glass-graded-halo"][data-side="top"]){--sheet-edge-direction: to top;border-end-start-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-side="bottom"]){--sheet-edge-direction: to bottom;border-start-start-radius: var(--radius-3xl);border-start-end-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-side="left"]){--sheet-edge-direction: to left;border-start-end-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-side="right"]){--sheet-edge-direction: to right;border-start-start-radius: var(--radius-3xl);border-end-start-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-detents][data-side="bottom"]){height: 100dvh;bottom: auto;}:where([data-slot="glass-graded-halo"][data-detents][data-side="top"]){height: 100dvh;top: auto;}:where([data-slot="glass-graded-halo"][data-detents][data-side="left"]){width: 100dvw;left: auto;}:where([data-slot="glass-graded-halo"][data-detents][data-side="right"]){width: 100dvw;right: auto;}@media (prefers-reduced-transparency: reduce),(forced-colors: active){:where([data-slot="glass-graded-halo"]){display: none;}}:where([data-slot="sheet-content"][data-side="top"]){left: 0;right: 0;top: 0;}:where([data-slot="sheet-content"][data-side="bottom"]){left: 0;right: 0;bottom: 0;}:where([data-slot="sheet-content"][data-side="left"]){top: 0;bottom: 0;left: 0;height: 100%;width: 75%;}:where([data-slot="sheet-content"][data-side="right"]){top: 0;bottom: 0;right: 0;height: 100%;width: 75%;}@media (min-width: 40rem){:where([data-slot="sheet-content"][data-side="left"]),:where([data-slot="sheet-content"][data-side="right"]){max-width: 24rem;}}:where( [data-slot="sheet-content"][data-detents][data-side="bottom"],[data-slot="sheet-content"][data-detents][data-side="top"] ){block-size: calc(clamp(0,var(--detent-t),1) * 100dvh);min-block-size: calc( 2 * var(--space-family) + var(--sheet-seam-width) + var(--touch-target) + 2 * var(--space-body) + var(--space-body) + var(--sheet-seam-width) + 1lh + var(--space-body) + var(--sheet-seam-width) + var(--touch-target) );max-block-size: 100dvh;}:where( [data-slot="sheet-content"][data-detents][data-side="left"],[data-slot="sheet-content"][data-detents][data-side="right"] ){width: calc(clamp(0,var(--detent-t),1) * 100dvw);max-width: 100dvw;height: 100%;}:where([data-slot="sheet-content"]){padding-inline: var(--space-family);padding-block: var(--space-family);}:where([data-slot="sheet-content"][data-side="top"]){border-end-start-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="sheet-content"][data-side="bottom"]){border-start-start-radius: var(--radius-3xl);border-start-end-radius: var(--radius-3xl);}:where([data-slot="sheet-content"][data-side="left"]){border-start-end-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="sheet-content"][data-side="right"]){border-start-start-radius: var(--radius-3xl);border-end-start-radius: var(--radius-3xl);}
1
+ @layer components{:where([data-slot="sheet-content"]){position: fixed;z-index: var(--z-modal);}}@property --detent-t{syntax: "<number>";inherits: false;initial-value: 0;}@layer components{:where([data-slot="sheet-content"][data-detents]){--sheet-seam-width: 1px;contain: layout paint;display: grid;grid-template-rows: auto minmax(0,1fr);}:where([data-slot="sheet-content"][data-modal="false"]){z-index: calc(var(--z-dock) - 1);}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-detent-handle"],[data-slot="sheet-content"][data-detents] [data-slot="dialog-header"] ){touch-action: none;}:where([data-slot="sheet-content"][data-dragging]){cursor: grabbing;user-select: none;}:where([data-slot="sheet-content"] > [data-slot="sheet-content-region"]){display: grid;align-content: start;gap: var(--space-body);}:where([data-slot="sheet-content"][data-scroll] > [data-slot="sheet-content-region"]){min-block-size: 0;max-block-size: calc(100dvh - 2 * var(--space-family));overflow-y: auto;}:where( [data-slot="sheet-content"][data-side="left"]:not([data-detents]) > [data-slot="sheet-content-region"],[data-slot="sheet-content"][data-side="right"]:not([data-detents]) > [data-slot="sheet-content-region"] ){display: flex;flex-direction: column;block-size: 100%;min-block-size: 0;}:where( [data-slot="sheet-content"][data-side="left"] > [data-slot="sheet-content-region"] > :only-child,[data-slot="sheet-content"][data-side="right"] > [data-slot="sheet-content-region"] > :only-child ){min-block-size: 0;}:where([data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"]){display: grid;grid-template-rows: minmax(0,auto) minmax(1lh,1fr) auto;align-content: end;min-block-size: 0;gap: var(--space-body);}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"] > :not([data-slot="dialog-header"]):not([data-slot="dialog-footer"]) ){min-block-size: 0;overflow-y: auto;overscroll-behavior: contain;}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"] > [data-slot="dialog-header"] ){overflow: hidden;padding-block-end: var(--space-body);border-block-end: var(--sheet-seam-width) solid oklch(from var(--glass-veil-ink) l c h / calc(var(--glass-veil-step) * 2));}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"] > [data-slot="dialog-footer"] ){padding-block-start: var(--space-body);border-block-start: var(--sheet-seam-width) solid oklch(from var(--glass-veil-ink) l c h / calc(var(--glass-veil-step) * 2));}:where([data-slot="sheet-content"]:not([data-detents]):has([data-slot="dialog-close"])) :where([data-slot="dialog-header"]){padding-inline-end: calc(var(--touch-target) + var(--space-atom));}:where([data-slot="sheet-content"][data-detents] > [data-slot="sheet-detent-handle"]){display: flex;align-items: center;justify-content: center;min-block-size: var(--touch-target);cursor: grab;}:where([data-slot="sheet-detent-handle"] > [data-slot="sheet-detent-grip"]){display: block;inline-size: calc( var(--space-section) + var(--space-family) * clamp(0,var(--detent-t),1) );block-size: calc(var(--space-atom) / 2);border-radius: var(--radius-pill);background-color: currentcolor;opacity: calc(0.45 + ((0.85 - 0.45) / 2) * clamp(0,var(--detent-t),1));transition: opacity var(--spring-dock-duration) var(--spring-dock),inline-size var(--spring-dock-duration) var(--spring-dock);}@media (hover: hover){:where([data-slot="sheet-detent-handle"]:hover > [data-slot="sheet-detent-grip"]){opacity: 0.85;}}:where([data-slot="sheet-detent-handle"]:focus-visible){outline: none;}:where( [data-slot="sheet-detent-handle"]:focus-visible > [data-slot="sheet-detent-grip"],[data-slot="sheet-content"][data-dragging] [data-slot="sheet-detent-grip"] ){opacity: 0.85;}:where( [data-slot="sheet-detent-handle"]:focus-visible > [data-slot="sheet-detent-grip"] ){box-shadow: 0 0 0 3px var(--focus-ring-color);}@media (prefers-reduced-motion: reduce){:where([data-slot="sheet-detent-grip"]){transition: none;}}:where([data-slot="sheet-content"]){anchor-name: --glass-sheet-edge;}:where([data-slot="sheet-content"][data-surface="glass"]){-webkit-backdrop-filter: none;backdrop-filter: none;}:where([data-slot="glass-graded-halo"]){position: fixed;position-anchor: --glass-sheet-edge;top: anchor(top);right: anchor(right);bottom: anchor(bottom);left: anchor(left);z-index: calc(var(--z-modal) - 1);pointer-events: none;background: linear-gradient( var(--sheet-edge-direction),color-mix(in oklab,var(--glass-plate-overlay) 10%,transparent) 0,color-mix(in oklab,var(--glass-plate-overlay) 16%,transparent) 40px,color-mix(in oklab,var(--glass-plate-overlay) 34%,transparent) 120px,color-mix(in oklab,var(--glass-plate-overlay) 34%,transparent) 100% );-webkit-backdrop-filter: blur(calc(34px * var(--glass-level))) saturate(var(--glass-saturate));backdrop-filter: blur(calc(34px * var(--glass-level))) saturate(var(--glass-saturate));mask-image: linear-gradient( var(--sheet-edge-direction),rgb(0 0 0 / 0.325) 0,rgb(0 0 0 / 0.45) 40px,black 120px,black 100% );}:where([data-slot="glass-graded-halo"][data-modal="false"]){z-index: calc(var(--z-dock) - 2);}:where([data-slot="glass-graded-halo"][data-side="top"]){--sheet-edge-direction: to top;border-end-start-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-side="bottom"]){--sheet-edge-direction: to bottom;border-start-start-radius: var(--radius-3xl);border-start-end-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-side="left"]){--sheet-edge-direction: to left;border-start-end-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-side="right"]){--sheet-edge-direction: to right;border-start-start-radius: var(--radius-3xl);border-end-start-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-detents][data-side="bottom"]){height: 100dvh;bottom: auto;}:where([data-slot="glass-graded-halo"][data-detents][data-side="top"]){height: 100dvh;top: auto;}:where([data-slot="glass-graded-halo"][data-detents][data-side="left"]){width: 100dvw;left: auto;}:where([data-slot="glass-graded-halo"][data-detents][data-side="right"]){width: 100dvw;right: auto;}@media (prefers-reduced-transparency: reduce),(forced-colors: active){:where([data-slot="glass-graded-halo"]){display: none;}}:where([data-slot="sheet-content"][data-side="top"]){left: 0;right: 0;top: 0;}:where([data-slot="sheet-content"][data-side="bottom"]){left: 0;right: 0;bottom: 0;}:where([data-slot="sheet-content"][data-side="left"]){top: 0;bottom: 0;left: 0;height: 100%;width: 75%;}:where([data-slot="sheet-content"][data-side="right"]){top: 0;bottom: 0;right: 0;height: 100%;width: 75%;}@media (min-width: 40rem){:where([data-slot="sheet-content"][data-side="left"]),:where([data-slot="sheet-content"][data-side="right"]){max-width: 24rem;}}:where( [data-slot="sheet-content"][data-detents][data-side="bottom"],[data-slot="sheet-content"][data-detents][data-side="top"] ){block-size: calc(clamp(0,var(--detent-t),1) * 100dvh);min-block-size: calc( 2 * var(--space-family) + var(--sheet-seam-width) + var(--touch-target) + 2 * var(--space-body) + var(--space-body) + var(--sheet-seam-width) + 1lh + var(--space-body) + var(--sheet-seam-width) + var(--touch-target) );max-block-size: 100dvh;}:where( [data-slot="sheet-content"][data-detents][data-side="left"],[data-slot="sheet-content"][data-detents][data-side="right"] ){width: calc(clamp(0,var(--detent-t),1) * 100dvw);max-width: 100dvw;height: 100%;}:where([data-slot="sheet-content"]){padding-inline: var(--space-family);padding-block: var(--space-family);}:where([data-slot="sheet-content"][data-side="top"]){border-end-start-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="sheet-content"][data-side="bottom"]){border-start-start-radius: var(--radius-3xl);border-start-end-radius: var(--radius-3xl);}:where([data-slot="sheet-content"][data-side="left"]){border-start-end-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="sheet-content"][data-side="right"]){border-start-start-radius: var(--radius-3xl);border-end-start-radius: var(--radius-3xl);}}
@@ -1 +1 @@
1
- @property --glass-slider-track-background{syntax: "*";inherits: true;}.glass-slider{--slider-range-origin: left center;position: relative;display: flex;inline-size: 100%;align-items: center;touch-action: none;user-select: none;transition: color var(--duration-fast) var(--ease-standard);}.glass-slider[data-inverted],.glass-slider:dir(rtl){--slider-range-origin: right center;}.glass-slider:dir(rtl)[data-inverted]{--slider-range-origin: left center;}.glass-slider[data-size="sm"]{--slider-track-height: 0.75rem;--slider-thumb-size: 0.5rem;}.glass-slider[data-size="md"]{--slider-track-height: 1.25rem;--slider-thumb-size: 1rem;}.glass-slider[data-size="lg"]{--slider-track-height: 1.75rem;--slider-thumb-size: 1.5rem;}.glass-slider[data-variant="spectrum"]{--slider-track-height: calc(var(--slider-thumb-size,1rem) * 1.5);}@media (pointer: coarse){.glass-slider{--slider-target-floor: max( var(--slider-track-height,0.375rem),var(--slider-touch-target,1.5rem) );min-block-size: var(--slider-target-floor);min-inline-size: var(--slider-target-floor);}}.slider-track{width: 100%;flex-grow: 1;height: var(--slider-track-height,0.375rem);background: var(--glass-slider-track-background,var(--muted-medium));transition: background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);}.slider-range{position: absolute;height: 100%;--liquid-fill-tint: var(--slider-range-bg,var(--glass-capsule-warm));}.slider-thumb{display: block;width: 0;height: var(--slider-track-height,0.375rem);opacity: 0;background: transparent;border: none;box-shadow: none;transition: transform var(--spring-press-duration) var(--spring-press);}.glass-slider:not([data-variant="spectrum"]):hover .slider-range{--liquid-fill-strength: 100%;}.glass-slider:not([data-variant="spectrum"]):has(:focus-visible) .slider-track{box-shadow: var(--focus-ring-shadow);}.glass-slider[data-held] .slider-range,.glass-slider:active .slider-range{--smear: calc(var(--atom-drag-v,0) * var(--motion-weight,0.618));transform: scale( calc(1.02 + 0.16 * var(--smear)),calc(0.94 - 0.06 * var(--smear)) );transform-origin: var(--slider-range-origin);transition: transform var(--spring-press-duration) var(--spring-press);}.glass-slider:not(:active):not([data-held]) .slider-range{transition: transform var(--duration-normal) var(--ease-cartoon-punch),--glass-veil-rung var(--spring-dock-duration) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);}@media (prefers-reduced-motion: reduce){.glass-slider:active .slider-range,.glass-slider[data-held] .slider-range{--motion-weight: 0;transform: scale(1,0.97);}}.glass-slider[data-disabled] .slider-range{opacity: var(--opacity-disabled);}.glass-slider[data-invalid] .slider-track{box-shadow: inset 0 0 0 1px var(--destructive);}.glass-slider[data-invalid]:has(:focus-visible) .slider-track{box-shadow: var(--focus-ring-shadow),inset 0 0 0 1px var(--destructive);}.glass-slider[data-variant="spectrum"][data-held] .slider-thumb{box-shadow: 0 0 0 6px var(--surface-tint-15),var(--shadow-sm);}.glass-slider[data-variant="spectrum"] .slider-track{background: var(--glass-slider-track-background,var(--secondary));}.glass-slider[data-variant="spectrum"] .slider-thumb{width: calc(var(--slider-thumb-size,1rem) * 0.75);height: var(--slider-track-height,0.375rem);opacity: 1;background: transparent;border: 2px solid var(--background);border-radius: calc(var(--slider-thumb-size,1rem) * 0.4);box-shadow: var(--shadow-sm);}@supports (corner-shape: superellipse(2)){.glass-slider[data-variant="spectrum"] .slider-thumb{corner-shape: var(--corner-shape-thumb);}}.glass-slider[data-variant="spectrum"]:hover .slider-thumb{box-shadow: 0 0 0 4px var(--surface-tint-8),var(--shadow-sm);}.glass-slider[data-variant="spectrum"] .slider-thumb:focus-visible{outline: none;box-shadow: var(--focus-ring-shadow),var(--shadow-sm);}.glass-slider[data-orientation="vertical"]{flex-direction: column;width: var(--slider-track-height,0.375rem);height: 12rem;}.glass-slider[data-orientation="vertical"] .slider-track{width: var(--slider-track-height,0.375rem);height: 100%;}.glass-slider[data-orientation="vertical"] .slider-range{width: 100%;height: auto;}.glass-slider[data-orientation="vertical"]:active .slider-range,.glass-slider[data-orientation="vertical"][data-held] .slider-range{--smear: calc(var(--atom-drag-v,0) * var(--motion-weight,0.618));transform: scale( calc(0.94 - 0.06 * var(--smear)),calc(1.02 + 0.16 * var(--smear)) );transform-origin: center bottom;}.glass-slider[data-orientation="vertical"][data-inverted] .slider-range{transform-origin: center top;}.glass-slider[data-orientation="vertical"][data-variant="spectrum"] .slider-thumb{width: var(--slider-track-height,0.375rem);height: calc(var(--slider-thumb-size,1rem) * 0.75);}@media (prefers-reduced-motion: reduce){.glass-slider[data-orientation="vertical"]:active .slider-range,.glass-slider[data-orientation="vertical"][data-held] .slider-range{transform: scale(0.97,1);}}@media (forced-colors: active){.slider-track{background: Canvas;border: 1px solid CanvasText;}.slider-range{background: Highlight;}.glass-slider[data-variant="spectrum"] .slider-thumb{border-color: CanvasText;forced-color-adjust: none;background: Highlight;}.glass-loupe{background: Canvas;border: 1px solid CanvasText;}}.glass-loupe{--loupe-k-max: 2.6;--loupe-k-min: 1.15;--loupe-k: calc( var(--loupe-k-max) - (var(--loupe-k-max) - var(--loupe-k-min)) * var(--flex-vel,0) );--loupe-vel: var(--flex-vel,0);--loupe-span: calc(var(--slider-track-height,1.25rem) * 6);position: fixed;z-index: calc(var(--z-overlay) - 1);inline-size: var(--loupe-span);block-size: calc(var(--slider-track-height,1.25rem) * var(--loupe-k-max));inset-block-start: var(--loupe-top,0);inset-inline-start: var(--loupe-left,0);translate: -50% -100%;scale: 0.13;transform-origin: 50% 100%;transition: scale var(--spring-present-duration) var(--spring-present),opacity var(--spring-present-duration) var(--ease-standard);opacity: 0;overflow: hidden;border-radius: var(--radius-pill);pointer-events: none;box-shadow: var(--glass-material-rim),var(--glass-under-shadow-quiet);}.glass-loupe[data-engaged]{scale: 1;opacity: 1;}.glass-loupe:not([data-engaged]){transition: scale var(--spring-present-exit-duration) var(--ease-standard),opacity var(--spring-present-exit-duration) var(--ease-standard);}.glass-loupe-clone{--s: 3;position: absolute;inset-block-start: 50%;inset-inline-start: 0;inline-size: calc(var(--loupe-track-w,0px) * var(--s));block-size: calc(var(--slider-track-height,1.25rem) * var(--s));border-radius: calc(var(--radius-pill) * var(--s));overflow: hidden;background: var(--glass-slider-track-background,var(--muted-medium));transform: translate( calc(var(--loupe-span) / 2 - var(--loupe-k) * var(--loupe-x,0px)),-50% ) scale(calc(var(--loupe-k) / var(--s)));transform-origin: 0 50%;filter: blur(calc(var(--loupe-vel,0) * 0.75px));transition: filter var(--duration-normal) var(--ease-standard);}.glass-loupe-fill{position: absolute;inset-block: 0;inset-inline-start: 0;inline-size: var(--loupe-fill-w,0px);background: var(--slider-range-bg,var(--glass-capsule-warm));}.glass-loupe-mark{position: absolute;inset-block: 0;inset-inline-start: 50%;inline-size: 2px;translate: -50% 0;background: var(--foreground);opacity: 0.24;}@media (prefers-reduced-motion: reduce){.glass-loupe{transition-duration: 0.01ms;}.glass-loupe-clone{filter: none;}}
1
+ @property --glass-slider-track-background{syntax: "*";inherits: true;}.glass-slider{--slider-range-origin: left center;position: relative;display: flex;inline-size: 100%;align-items: center;touch-action: none;user-select: none;transition: color var(--duration-fast) var(--ease-standard);}.glass-slider{cursor: grab;}.glass-slider[data-held],.glass-slider:active{cursor: grabbing;}.glass-slider[data-disabled]{cursor: not-allowed;}.glass-slider[data-inverted],.glass-slider:dir(rtl){--slider-range-origin: right center;}.glass-slider:dir(rtl)[data-inverted]{--slider-range-origin: left center;}.glass-slider[data-size="sm"]{--slider-track-height: var(--slider-track-height-sm);--slider-thumb-size: min(var(--slider-thumb-size-sm),var(--slider-track-height-sm));}.glass-slider[data-size="md"]{--slider-track-height: var(--slider-track-height-md);--slider-thumb-size: min(var(--slider-thumb-size-md),var(--slider-track-height-md));}.glass-slider[data-size="lg"]{--slider-track-height: var(--slider-track-height-lg);--slider-thumb-size: min(var(--slider-thumb-size-lg),var(--slider-track-height-lg));}.glass-slider[data-variant="spectrum"]{--slider-track-height: calc(var(--slider-thumb-size,1rem) * 1.5);}@media (pointer: coarse){.glass-slider{--slider-target-floor: max( var(--slider-track-height,0.375rem),var(--slider-touch-target,1.5rem) );min-block-size: var(--slider-target-floor);min-inline-size: var(--slider-target-floor);}}.slider-track{width: 100%;flex-grow: 1;height: var(--slider-track-height,0.375rem);background: var(--glass-slider-track-background,var(--muted-medium));transition: background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);}.slider-range{position: absolute;height: 100%;--liquid-fill-tint: var(--slider-range-bg,var(--glass-capsule-warm));}.slider-thumb{display: block;width: 0;height: var(--slider-track-height,0.375rem);opacity: 0;background: transparent;border: none;box-shadow: none;transition: transform var(--spring-press-duration) var(--spring-press);}.glass-slider:not([data-variant="spectrum"]):hover .slider-range{--liquid-fill-strength: 100%;}.glass-slider:not([data-variant="spectrum"]):has(:focus-visible) .slider-track{box-shadow: var(--focus-ring-shadow);}.glass-slider[data-held] .slider-range,.glass-slider:active .slider-range{--smear: calc(var(--atom-drag-v,0) * var(--motion-weight,0.618));transform: scale( calc(1.02 + 0.16 * var(--smear)),calc(0.94 - 0.06 * var(--smear)) );transform-origin: var(--slider-range-origin);transition: transform var(--spring-press-duration) var(--spring-press);}.glass-slider:not(:active):not([data-held]) .slider-range{transition: transform var(--duration-normal) var(--ease-cartoon-punch),--glass-veil-rung var(--spring-dock-duration) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);}@media (prefers-reduced-motion: reduce){.glass-slider:active .slider-range,.glass-slider[data-held] .slider-range{--motion-weight: 0;transform: scale(1,0.97);}}.glass-slider[data-disabled] .slider-range{opacity: var(--opacity-disabled);}.glass-slider[data-invalid] .slider-track{box-shadow: inset 0 0 0 1px var(--destructive);}.glass-slider[data-invalid]:has(:focus-visible) .slider-track{box-shadow: var(--focus-ring-shadow),inset 0 0 0 1px var(--destructive);}.glass-slider[data-variant="spectrum"][data-held] .slider-thumb{box-shadow: 0 0 0 6px var(--surface-tint-15),var(--shadow-sm);}.glass-slider[data-variant="spectrum"] .slider-track{background: var(--glass-slider-track-background,var(--secondary));}.glass-slider[data-variant="spectrum"] .slider-thumb{width: calc(var(--slider-thumb-size,1rem) * 0.75);height: var(--slider-track-height,0.375rem);opacity: 1;background: transparent;border: 2px solid var(--background);border-radius: calc(var(--slider-thumb-size,1rem) * 0.4);box-shadow: var(--shadow-sm);}@supports (corner-shape: superellipse(2)){.glass-slider[data-variant="spectrum"] .slider-thumb{corner-shape: var(--corner-shape-thumb);}}.glass-slider[data-variant="spectrum"]:hover .slider-thumb{box-shadow: 0 0 0 4px var(--surface-tint-8),var(--shadow-sm);}.glass-slider[data-variant="spectrum"] .slider-thumb:focus-visible{outline: none;box-shadow: var(--focus-ring-shadow),var(--shadow-sm);}.glass-slider[data-orientation="vertical"]{flex-direction: column;width: var(--slider-track-height,0.375rem);height: 12rem;}.glass-slider[data-orientation="vertical"] .slider-track{width: var(--slider-track-height,0.375rem);height: 100%;}.glass-slider[data-orientation="vertical"] .slider-range{width: 100%;height: auto;}.glass-slider[data-orientation="vertical"]:active .slider-range,.glass-slider[data-orientation="vertical"][data-held] .slider-range{--smear: calc(var(--atom-drag-v,0) * var(--motion-weight,0.618));transform: scale( calc(0.94 - 0.06 * var(--smear)),calc(1.02 + 0.16 * var(--smear)) );transform-origin: center bottom;}.glass-slider[data-orientation="vertical"][data-inverted] .slider-range{transform-origin: center top;}.glass-slider[data-orientation="vertical"][data-variant="spectrum"] .slider-thumb{width: var(--slider-track-height,0.375rem);height: calc(var(--slider-thumb-size,1rem) * 0.75);}@media (prefers-reduced-motion: reduce){.glass-slider[data-orientation="vertical"]:active .slider-range,.glass-slider[data-orientation="vertical"][data-held] .slider-range{transform: scale(0.97,1);}}@media (forced-colors: active){.slider-track{background: Canvas;border: 1px solid CanvasText;}.slider-range{background: Highlight;}.glass-slider[data-variant="spectrum"] .slider-thumb{border-color: CanvasText;forced-color-adjust: none;background: Highlight;}.glass-loupe{background: Canvas;border: 1px solid CanvasText;}}.glass-loupe{--loupe-k-max: 2.6;--loupe-k-min: 1.15;--loupe-k: calc( var(--loupe-k-max) - (var(--loupe-k-max) - var(--loupe-k-min)) * var(--flex-vel,0) );--loupe-vel: var(--flex-vel,0);--loupe-span: calc(var(--slider-track-height,1.25rem) * 6);position: fixed;z-index: calc(var(--z-overlay) - 1);inline-size: var(--loupe-span);block-size: calc(var(--slider-track-height,1.25rem) * var(--loupe-k-max));inset-block-start: var(--loupe-top,0);inset-inline-start: var(--loupe-left,0);translate: -50% -100%;scale: 0.13;transform-origin: 50% 100%;transition: scale var(--spring-present-duration) var(--spring-present),opacity var(--spring-present-duration) var(--ease-standard);opacity: 0;overflow: hidden;border-radius: var(--radius-pill);pointer-events: none;box-shadow: var(--glass-material-rim),var(--glass-under-shadow-quiet);}.glass-loupe[data-engaged]{scale: 1;opacity: 1;}.glass-loupe:not([data-engaged]){transition: scale var(--spring-present-exit-duration) var(--ease-standard),opacity var(--spring-present-exit-duration) var(--ease-standard);}.glass-loupe-clone{--s: 3;position: absolute;inset-block-start: 50%;inset-inline-start: 0;inline-size: calc(var(--loupe-track-w,0px) * var(--s));block-size: calc(var(--slider-track-height,1.25rem) * var(--s));border-radius: calc(var(--radius-pill) * var(--s));overflow: hidden;background: var(--glass-slider-track-background,var(--muted-medium));transform: translate( calc(var(--loupe-span) / 2 - var(--loupe-k) * var(--loupe-x,0px)),-50% ) scale(calc(var(--loupe-k) / var(--s)));transform-origin: 0 50%;filter: blur(calc(var(--loupe-vel,0) * 0.75px));transition: filter var(--duration-normal) var(--ease-standard);}.glass-loupe-fill{position: absolute;inset-block: 0;inset-inline-start: 0;inline-size: var(--loupe-fill-w,0px);background: var(--slider-range-bg,var(--glass-capsule-warm));}.glass-loupe-mark{position: absolute;inset-block: 0;inset-inline-start: 50%;inline-size: 2px;translate: -50% 0;background: var(--foreground);opacity: 0.24;}@media (prefers-reduced-motion: reduce){.glass-loupe{transition-duration: 0.01ms;}.glass-loupe-clone{filter: none;}}
@@ -1,115 +1,28 @@
1
- import { type HTMLAttributes } from "vue";
2
- import type { TabActivation } from "./composables/useTabRovingFocus.js";
3
- import type { Motion } from "../_shared/axes.js";
4
- /** The canonical tab/option shape — one descriptor across both materials. */
5
- export interface SegmentedTabOption {
6
- label: string;
7
- value: string;
8
- icon?: string;
9
- disabled?: boolean;
10
- /**
11
- * The `id` of the tabpanel this option reveals. When set and semantics resolve to
12
- * `tabs`, it is emitted as the tab's `aria-controls`, completing the APG
13
- * tablist↔tabpanel linkage for consumers that own a panel. Ignored in `toggle`
14
- * semantics (a toggle group mutates a shared surface, not a distinct panel).
15
- */
16
- controls?: string;
17
- }
18
- /** The two materials: `pill` is the default glass eyeglass; `underline` is the paper ink hairline. */
19
- export type SegmentedTabsVariant = "pill" | "underline";
20
- /** The interaction semantic, independent of material. `toggle` exposes a
21
- * group of pressed buttons; `tabs` exposes a tablist with selected tabs. */
22
- export type SegmentedTabsSemantics = "toggle" | "tabs";
23
- /** Whether focus movement also selects. Manual activation waits for Enter/Space. */
24
- export type SegmentedTabsActivation = TabActivation;
25
- /** The orientation axis — `horizontal` (default) lays children in a row + tracks
26
- * the indicator on the inline axis; `vertical` stacks a column + tracks the
27
- * block axis (the vertical underline is the leading-edge ink rail). */
28
- export type SegmentedTabsOrientation = "horizontal" | "vertical";
29
- export interface SegmentedTabsResponsive {
30
- /**
31
- * CSS length consumed inside `(min-width: <breakpoint>)`. BELOW it the
32
- * strip collapses to a `<Select>`; at/above it renders the tab strip.
33
- * Defaults to `"640px"` (Tailwind `sm:`).
34
- */
35
- breakpoint?: string;
36
- /**
37
- * Optional subset shown in the desktop strip (the mobile Select keeps the
38
- * full option list). Falls back to `options`.
39
- */
40
- desktopOptions?: SegmentedTabOption[] | null;
41
- /** Accessible name for the mobile `<SelectTrigger>`. */
42
- ariaLabel?: string;
43
- /** Class merged onto the mobile `<SelectTrigger>` only. */
44
- triggerClass?: HTMLAttributes["class"];
45
- }
46
- export interface SegmentedTabsProps {
47
- options: SegmentedTabOption[];
48
- /** Accessible name shared by the desktop strip and responsive Select. */
49
- ariaLabel?: string;
50
- /**
51
- * The material — `pill` (DEFAULT, the glass eyeglass) or `underline` (the paper
52
- * ink-hairline rule). TWO, and the eyeglass is not a third: it is what `pill`
53
- * IS. A "million variants that are essentially the same thing" is the failure
54
- * mode this axis exists to refuse.
55
- */
56
- variant?: SegmentedTabsVariant;
57
- /**
58
- * Interaction semantics, independent of `variant`. When omitted, preserves the
59
- * historical mapping: `pill` → `toggle`, `underline` → `tabs`.
60
- */
61
- semantics?: SegmentedTabsSemantics;
62
- /** Selection follows focus by default; manual mode activates with Enter/Space. */
63
- activation?: SegmentedTabsActivation;
64
- /**
65
- * Orientation — `horizontal` (default) or `vertical`. Axis-derived on the
66
- * one indicator engine.
67
- */
68
- orientation?: SegmentedTabsOrientation;
69
- /**
70
- * Responsive collapse — below the breakpoint the strip becomes a `<Select>`.
71
- * `true` uses defaults; an object tunes the breakpoint, desktop subset, and
72
- * accessible name.
73
- */
74
- responsive?: boolean | SegmentedTabsResponsive;
75
- /**
76
- * Motion weight. `full` (default) lets the pill indicator follow a pointer,
77
- * squash with drag velocity, and settle to the nearest tab. Drag supplements the
78
- * fully operable click and keyboard path; it is never the sole selection method.
79
- * `reduced` and `off` use the click-only strip while preserving roving focus.
80
- * Underline has no deformable indicator. Reduced-motion preference forces
81
- * `full → reduced`.
82
- */
83
- motion?: Motion;
84
- class?: HTMLAttributes["class"];
85
- }
86
- type __VLS_Props = SegmentedTabsProps;
87
- type __VLS_ModelProps = {
88
- modelValue: string;
89
- };
90
- type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
91
- declare var __VLS_32: {
92
- option: SegmentedTabOption;
93
- active: boolean;
94
- };
95
- type __VLS_Slots = {} & {
96
- option?: (props: typeof __VLS_32) => any;
1
+ import type { SegmentedTabOption, SegmentedTabsProps } from "./types.js";
2
+ declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
3
+ props: import("vue").PublicProps & __VLS_PrettifyLocal<(SegmentedTabsProps<T> & {
4
+ modelValue: T;
5
+ }) & {
6
+ "onUpdate:modelValue"?: ((value: T) => any) | undefined;
7
+ }> & (typeof globalThis extends {
8
+ __VLS_PROPS_FALLBACK: infer P;
9
+ } ? P : {});
10
+ expose: (exposed: {}) => void;
11
+ attrs: any;
12
+ slots: {
13
+ option?: (props: {
14
+ option: SegmentedTabOption<T>;
15
+ active: boolean;
16
+ }) => any;
17
+ };
18
+ emit: (event: "update:modelValue", value: T) => void;
19
+ }>) => import("vue").VNode & {
20
+ __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
97
21
  };
98
- declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
99
- "update:modelValue": (value: string) => any;
100
- }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
101
- "onUpdate:modelValue"?: ((value: string) => any) | undefined;
102
- }>, {
103
- orientation: SegmentedTabsOrientation;
104
- variant: SegmentedTabsVariant;
105
- responsive: boolean | SegmentedTabsResponsive;
106
- activation: SegmentedTabsActivation;
107
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
108
- declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
109
22
  declare const _default: typeof __VLS_export;
110
23
  export default _default;
111
- type __VLS_WithSlots<T, S> = T & {
112
- new (): {
113
- $slots: S;
114
- };
115
- };
24
+ type __VLS_PrettifyLocal<T> = (T extends any ? {
25
+ [K in keyof T]: T[K];
26
+ } : {
27
+ [K in keyof T as K]: T[K];
28
+ }) & {};
@@ -1,6 +1,6 @@
1
1
  import type { ComputedRef, Ref } from "vue";
2
2
  import { type UseDragMorphReturn } from "../../../composables/motion/morph/useDragMorph.js";
3
- import type { SegmentedTabOption } from "../SegmentedTabs.vue.js";
3
+ import type { SegmentedTabOption } from "../types.js";
4
4
  /**
5
5
  * Package-private composable for `SegmentedTabs.vue` — the LIQUID
6
6
  * TAB (the `:draggable` axis). A composable held under the
@@ -1,5 +1,5 @@
1
1
  import type { ComputedRef, Ref } from "vue";
2
- import type { SegmentedTabOption, SegmentedTabsResponsive } from "../SegmentedTabs.vue.js";
2
+ import type { SegmentedTabOption, SegmentedTabsResponsive } from "../types.js";
3
3
  /**
4
4
  * Package-private composable for `SegmentedTabs.vue` (the
5
5
  * roving-focus/responsive carve). The responsive-collapse concern
@@ -13,30 +13,30 @@ import type { SegmentedTabOption, SegmentedTabsResponsive } from "../SegmentedTa
13
13
  * lifecycle-hook owner), so the SFC never re-declares the `mql` listener. It owns the SSR/desktop-first
14
14
  * default, the mobile-only model fall-back, and the accessible name resolution.
15
15
  */
16
- export interface UseTabResponsiveParams {
16
+ export interface UseTabResponsiveParams<V extends string = string> {
17
17
  /** The `:responsive` prop — `false` | `true` | a tuning object. */
18
- responsive: () => boolean | SegmentedTabsResponsive;
18
+ responsive: () => boolean | SegmentedTabsResponsive<V>;
19
19
  /** The full option list (the mobile `<Select>` keeps ALL options). */
20
- options: ComputedRef<SegmentedTabOption[]>;
20
+ options: ComputedRef<SegmentedTabOption<V>[]>;
21
21
  /** The single-select model (the strip value the collapse falls back off). */
22
- model: Ref<string | undefined>;
22
+ model: Ref<V | undefined>;
23
23
  }
24
- export interface UseTabResponsiveReturn {
24
+ export interface UseTabResponsiveReturn<V extends string = string> {
25
25
  /** The resolved responsive config, or `null` when `:responsive` is off. */
26
- responsiveCfg: ComputedRef<SegmentedTabsResponsive | null>;
26
+ responsiveCfg: ComputedRef<SegmentedTabsResponsive<V> | null>;
27
27
  /** The collapse breakpoint CSS length (default `"640px"`). */
28
28
  breakpoint: ComputedRef<string>;
29
29
  /** The desktop-strip option subset (falls back to the full list). */
30
- desktopOptions: ComputedRef<SegmentedTabOption[]>;
30
+ desktopOptions: ComputedRef<SegmentedTabOption<V>[]>;
31
31
  /** `true` at/above the breakpoint (the matchMedia state; SSR-default `true`). */
32
32
  isDesktop: Ref<boolean>;
33
33
  /** The value the STRIP renders (falls back off a mobile-only model). */
34
- stripValue: ComputedRef<string | undefined>;
34
+ stripValue: ComputedRef<V | undefined>;
35
35
  /** The options the STRIP renders (desktop subset when responsive, else full). */
36
- stripOptions: ComputedRef<SegmentedTabOption[]>;
36
+ stripOptions: ComputedRef<SegmentedTabOption<V>[]>;
37
37
  /** The accessible name for the mobile `<SelectTrigger>`. */
38
38
  mobileAriaLabel: ComputedRef<string>;
39
39
  /** `true` when the mobile `<Select>` should render (responsive + below breakpoint). */
40
40
  showMobileSelect: ComputedRef<boolean>;
41
41
  }
42
- export declare function useTabResponsive(params: UseTabResponsiveParams): UseTabResponsiveReturn;
42
+ export declare function useTabResponsive<V extends string = string>(params: UseTabResponsiveParams<V>): UseTabResponsiveReturn<V>;
@@ -1,2 +1,2 @@
1
1
  export { default as SegmentedTabs } from "./SegmentedTabs.vue.js";
2
- export type { SegmentedTabOption, SegmentedTabsVariant, SegmentedTabsSemantics, SegmentedTabsActivation, SegmentedTabsOrientation, SegmentedTabsProps, SegmentedTabsResponsive, } from "./SegmentedTabs.vue.js";
2
+ export type { SegmentedTabOption, SegmentedTabsVariant, SegmentedTabsSemantics, SegmentedTabsActivation, SegmentedTabsOrientation, SegmentedTabsProps, SegmentedTabsResponsive, } from "./types.js";
@@ -1 +1 @@
1
- .glass-drag-grabbable{cursor: grab;touch-action: none;}.glass-drag-lift{cursor: grabbing;will-change: transform;}.segmented-tabs:has(.segmented-indicator.glass-drag-grabbable) .segmented-tab[data-active]{pointer-events: none;}.segmented-indicator.glass-drag-lift{z-index: 30;}
1
+ @layer components{.glass-drag-grabbable{cursor: grab;touch-action: none;}.glass-drag-lift{cursor: grabbing;will-change: transform;}.segmented-tabs:has(.segmented-indicator.glass-drag-grabbable) .segmented-tab[data-active]{pointer-events: none;}.segmented-indicator.glass-drag-lift{z-index: 30;}}
@@ -1 +1 @@
1
- .segmented-tabs{--bouncy-track-trim: 0.1875rem;--bouncy-slider-radius: var(--radius-tab);--bouncy-track-radius: calc(var(--bouncy-slider-radius) + var(--bouncy-track-trim));--stretch: 1;position: relative;display: inline-grid;grid-auto-flow: column;grid-auto-columns: 1fr;padding: var(--bouncy-track-trim);border-radius: var(--bouncy-track-radius);overflow: visible;}.segmented-tabs--vertical{display: inline-flex;flex-direction: column;grid-auto-flow: unset;grid-auto-columns: unset;align-items: stretch;--bouncy-slider-radius: var(--radius-strip);--radius-ctx: var(--bouncy-track-radius);--radius-inset: var(--bouncy-track-trim);}.segmented-tabs--vertical .segmented-indicator{border-radius: max( var(--radius-floor),calc(var(--radius-ctx) - var(--radius-inset)) );}@media (min-width: 640px){.segmented-tabs{--bouncy-track-trim: 0.25rem;}}.segmented-indicator{position: absolute;z-index: 0;border-radius: var(--bouncy-slider-radius);transform-origin: var(--eyeglass-origin,50%) center;scale: var(--eyeglass-span,var(--stretch)) var(--eyeglass-swell,1);}.segmented-tabs--vertical .segmented-indicator{transform-origin: center var(--eyeglass-origin,50%);scale: var(--eyeglass-swell,1) var(--eyeglass-span,var(--stretch));}.segmented-tabs--underline .segmented-indicator{background: none;border-radius: 0;border-block-end: var(--paper-ink-mark-weight) solid var(--paper-ink-mark-color);scale: var(--stretch) 1;}.segmented-tabs--underline.segmented-tabs--vertical .segmented-indicator{border-block-end: none;border-inline-start: var(--paper-ink-mark-weight) solid var(--paper-ink-mark-color);scale: 1 var(--stretch);}.segmented-tabs:not(.segmented-tabs--underline){--eyeglass-span-max: 1.6;--eyeglass-cascade-annotation: 100ms;--eyeglass-light-clock: var(--engage-control-engage-release);transition: background var(--eyeglass-light-clock) var(--ease-standard);}.segmented-tabs:not(.segmented-tabs--underline) .segmented-indicator{box-shadow: var(--glass-rim-top),var(--glass-rim-bottom),inset 0 1px 2px var(--tab-track-recess-ink);}.segmented-tabs[data-eyeglass-wake]:not(.segmented-tabs--underline){--eyeglass-light-clock: var(--engage-control-engage-attack);background: color-mix( in oklab,var(--glass-plate-quiet),var(--glass-capsule-warm) var(--glass-capsule-warm-floor) );}.segmented-tabs[data-eyeglass-wake]:not(.segmented-tabs--underline) .segmented-indicator{box-shadow: var(--glass-rim-top),var(--glass-rim-bottom),var(--glass-shadow-capsule);}.segmented-indicator[data-eyeglass-clamped]{--eyeglass-swell: 1.22;}@media (prefers-reduced-motion: no-preference){.segmented-indicator--js{transition: translate var(--tab-indicator-duration) var(--spring-dock),width var(--tab-indicator-duration) var(--spring-dock),height var(--tab-indicator-duration) var(--spring-dock),scale var(--tab-indicator-duration) var(--ease-cartoon-punch),box-shadow var(--eyeglass-light-clock,var(--duration-fast)) var(--ease-standard),opacity var(--duration-fast) ease;}}.segmented-tab{position: relative;z-index: 10;border: none;background: none;font-weight: 500;cursor: pointer;white-space: nowrap;padding: 0.25rem 0.625rem;border-radius: var(--bouncy-slider-radius);font: inherit;font-size: var(--type-caption);color: color-mix(in oklab,var(--muted-foreground),var(--glass-capsule-warm) 12%);transition: color var(--duration-fast) ease;scale: 1;translate: 0;}@media (min-width: 640px){.segmented-tab{padding: 0.3125rem 0.75rem;font-size: var(--type-small);}}.segmented-tab[data-active]{color: var(--foreground);transition-delay: var(--eyeglass-cascade-annotation,0s);}.segmented-tab.is-disabled{opacity: 0.4;cursor: not-allowed;pointer-events: none;filter: blur(0.5px);}.segmented-tabs--underline{display: flex;grid-auto-flow: unset;grid-auto-columns: unset;gap: 0.25rem;padding: 0;background: none;-webkit-backdrop-filter: none;backdrop-filter: none;box-shadow: none;border-radius: 0;border-block-end: 1px solid var(--border);}.segmented-tabs--underline.segmented-tabs--vertical{flex-direction: column;align-items: stretch;border-block-end: none;border-inline-start: 1px solid var(--border);}.segmented-tabs--underline .segmented-tab{padding: 0.375rem 0.75rem;font-size: var(--type-subheading);letter-spacing: var(--type-tracking-display);border-radius: var(--bouncy-slider-radius);transition: color var(--duration-fast) ease;}.segmented-tabs--underline.segmented-tabs--vertical .segmented-tab{text-align: start;}.segmented-tabs--underline .segmented-tab:hover{color: color-mix(in oklab,var(--foreground) 70%,transparent);}
1
+ @layer components{.segmented-tabs{--bouncy-track-trim: 0.1875rem;--bouncy-slider-radius: var(--radius-tab);--bouncy-track-radius: calc(var(--bouncy-slider-radius) + var(--bouncy-track-trim));--stretch: 1;position: relative;display: inline-grid;grid-auto-flow: column;grid-auto-columns: 1fr;padding: var(--bouncy-track-trim);border-radius: var(--bouncy-track-radius);overflow: visible;}.segmented-tabs--vertical{display: inline-flex;flex-direction: column;grid-auto-flow: unset;grid-auto-columns: unset;align-items: stretch;--bouncy-slider-radius: var(--radius-strip);--radius-ctx: var(--bouncy-track-radius);--radius-inset: var(--bouncy-track-trim);}.segmented-tabs--vertical .segmented-indicator{border-radius: max( var(--radius-floor),calc(var(--radius-ctx) - var(--radius-inset)) );}@media (min-width: 640px){.segmented-tabs{--bouncy-track-trim: 0.25rem;}}.segmented-indicator{position: absolute;z-index: 0;border-radius: var(--bouncy-slider-radius);transform-origin: var(--eyeglass-origin,50%) center;scale: var(--eyeglass-span,var(--stretch)) var(--eyeglass-swell,1);}.segmented-tabs--vertical .segmented-indicator{transform-origin: center var(--eyeglass-origin,50%);scale: var(--eyeglass-swell,1) var(--eyeglass-span,var(--stretch));}.segmented-tabs--underline .segmented-indicator{background: none;border-radius: 0;border-block-end: var(--paper-ink-mark-weight) solid var(--paper-ink-mark-color);scale: var(--stretch) 1;}.segmented-tabs--underline.segmented-tabs--vertical .segmented-indicator{border-block-end: none;border-inline-start: var(--paper-ink-mark-weight) solid var(--paper-ink-mark-color);scale: 1 var(--stretch);}.segmented-tabs:not(.segmented-tabs--underline){--eyeglass-span-max: 1.6;--eyeglass-cascade-annotation: 100ms;--eyeglass-light-clock: var(--engage-control-engage-release);transition: background var(--eyeglass-light-clock) var(--ease-standard);}.segmented-tabs:not(.segmented-tabs--underline) .segmented-indicator{box-shadow: var(--glass-rim-top),var(--glass-rim-bottom),inset 0 1px 2px var(--tab-track-recess-ink);}.segmented-tabs[data-eyeglass-wake]:not(.segmented-tabs--underline){--eyeglass-light-clock: var(--engage-control-engage-attack);background: color-mix( in oklab,var(--glass-plate-quiet),var(--glass-capsule-warm) var(--glass-capsule-warm-floor) );}.segmented-tabs[data-eyeglass-wake]:not(.segmented-tabs--underline) .segmented-indicator{box-shadow: var(--glass-rim-top),var(--glass-rim-bottom),var(--glass-shadow-capsule);}.segmented-indicator[data-eyeglass-clamped]{--eyeglass-swell: 1.22;}@media (prefers-reduced-motion: no-preference){.segmented-indicator--js{transition: translate var(--tab-indicator-duration) var(--spring-dock),width var(--tab-indicator-duration) var(--spring-dock),height var(--tab-indicator-duration) var(--spring-dock),scale var(--tab-indicator-duration) var(--ease-cartoon-punch),box-shadow var(--eyeglass-light-clock,var(--duration-fast)) var(--ease-standard),opacity var(--duration-fast) ease;}}.segmented-tab{position: relative;z-index: 10;border: none;background: none;font-weight: 500;cursor: pointer;white-space: nowrap;padding: 0.25rem 0.625rem;border-radius: var(--bouncy-slider-radius);font: inherit;font-size: var(--type-caption);color: color-mix(in oklab,var(--muted-foreground),var(--glass-capsule-warm) 12%);transition: color var(--duration-fast) ease;scale: 1;translate: 0;}@media (min-width: 640px){.segmented-tab{padding: 0.3125rem 0.75rem;font-size: var(--type-small);}}.segmented-tab[data-active]{color: var(--foreground);transition-delay: var(--eyeglass-cascade-annotation,0s);}.segmented-tab.is-disabled{opacity: 0.4;cursor: not-allowed;pointer-events: none;filter: blur(0.5px);}.segmented-tabs--underline{display: flex;grid-auto-flow: unset;grid-auto-columns: unset;gap: 0.25rem;padding: 0;background: none;-webkit-backdrop-filter: none;backdrop-filter: none;box-shadow: none;border-radius: 0;border-block-end: 1px solid var(--border);}.segmented-tabs--underline.segmented-tabs--vertical{flex-direction: column;align-items: stretch;border-block-end: none;border-inline-start: 1px solid var(--border);}.segmented-tabs--underline .segmented-tab{padding: 0.375rem 0.75rem;font-size: var(--type-subheading);letter-spacing: var(--type-tracking-display);border-radius: var(--bouncy-slider-radius);transition: color var(--duration-fast) ease;}.segmented-tabs--underline.segmented-tabs--vertical .segmented-tab{text-align: start;}.segmented-tabs--underline .segmented-tab:not([data-active]){color: var(--muted-foreground);}.segmented-tabs--underline .segmented-tab:hover{color: color-mix(in oklab,var(--foreground) 70%,transparent);}}
@@ -0,0 +1,85 @@
1
+ import type { HTMLAttributes } from "vue";
2
+ import type { Motion } from "../_shared/axes.js";
3
+ import type { TabActivation } from "./composables/useTabRovingFocus.js";
4
+ /** The canonical tab/option shape — one descriptor across both materials. */
5
+ export interface SegmentedTabOption<V extends string = string> {
6
+ label: string;
7
+ value: V;
8
+ icon?: string;
9
+ disabled?: boolean;
10
+ /**
11
+ * The `id` of the tabpanel this option reveals. When set and semantics resolve to
12
+ * `tabs`, it is emitted as the tab's `aria-controls`, completing the APG
13
+ * tablist↔tabpanel linkage for consumers that own a panel. Ignored in `toggle`
14
+ * semantics (a toggle group mutates a shared surface, not a distinct panel).
15
+ */
16
+ controls?: string;
17
+ }
18
+ /** The two materials: `pill` is the default glass eyeglass; `underline` is the paper ink hairline. */
19
+ export type SegmentedTabsVariant = "pill" | "underline";
20
+ /** The interaction semantic, independent of material. `toggle` exposes a
21
+ * group of pressed buttons; `tabs` exposes a tablist with selected tabs. */
22
+ export type SegmentedTabsSemantics = "toggle" | "tabs";
23
+ /** Whether focus movement also selects. Manual activation waits for Enter/Space. */
24
+ export type SegmentedTabsActivation = TabActivation;
25
+ /** The orientation axis — `horizontal` (default) lays children in a row + tracks
26
+ * the indicator on the inline axis; `vertical` stacks a column + tracks the
27
+ * block axis (the vertical underline is the leading-edge ink rail). */
28
+ export type SegmentedTabsOrientation = "horizontal" | "vertical";
29
+ export interface SegmentedTabsResponsive<V extends string = string> {
30
+ /**
31
+ * CSS length consumed inside `(min-width: <breakpoint>)`. BELOW it the
32
+ * strip collapses to a `<Select>`; at/above it renders the tab strip.
33
+ * Defaults to `"640px"` (Tailwind `sm:`).
34
+ */
35
+ breakpoint?: string;
36
+ /**
37
+ * Optional subset shown in the desktop strip (the mobile Select keeps the
38
+ * full option list). Falls back to `options`.
39
+ */
40
+ desktopOptions?: SegmentedTabOption<V>[] | null;
41
+ /** Accessible name for the mobile `<SelectTrigger>`. */
42
+ ariaLabel?: string;
43
+ /** Class merged onto the mobile `<SelectTrigger>` only. */
44
+ triggerClass?: HTMLAttributes["class"];
45
+ }
46
+ export interface SegmentedTabsProps<V extends string = string> {
47
+ options: SegmentedTabOption<V>[];
48
+ /** Accessible name shared by the desktop strip and responsive Select. */
49
+ ariaLabel?: string;
50
+ /**
51
+ * The material — `pill` (DEFAULT, the glass eyeglass) or `underline` (the paper
52
+ * ink-hairline rule). TWO, and the eyeglass is not a third: it is what `pill`
53
+ * IS. A "million variants that are essentially the same thing" is the failure
54
+ * mode this axis exists to refuse.
55
+ */
56
+ variant?: SegmentedTabsVariant;
57
+ /**
58
+ * Interaction semantics, independent of `variant`. When omitted, preserves the
59
+ * historical mapping: `pill` → `toggle`, `underline` → `tabs`.
60
+ */
61
+ semantics?: SegmentedTabsSemantics;
62
+ /** Selection follows focus by default; manual mode activates with Enter/Space. */
63
+ activation?: SegmentedTabsActivation;
64
+ /**
65
+ * Orientation — `horizontal` (default) or `vertical`. Axis-derived on the
66
+ * one indicator engine.
67
+ */
68
+ orientation?: SegmentedTabsOrientation;
69
+ /**
70
+ * Responsive collapse — below the breakpoint the strip becomes a `<Select>`.
71
+ * `true` uses defaults; an object tunes the breakpoint, desktop subset, and
72
+ * accessible name.
73
+ */
74
+ responsive?: boolean | SegmentedTabsResponsive<V>;
75
+ /**
76
+ * Motion weight. `full` (default) lets the pill indicator follow a pointer,
77
+ * squash with drag velocity, and settle to the nearest tab. Drag supplements the
78
+ * fully operable click and keyboard path; it is never the sole selection method.
79
+ * `reduced` and `off` use the click-only strip while preserving roving focus.
80
+ * Underline has no deformable indicator. Reduced-motion preference forces
81
+ * `full → reduced`.
82
+ */
83
+ motion?: Motion;
84
+ class?: HTMLAttributes["class"];
85
+ }
@@ -1,2 +1,4 @@
1
1
  export { default as Timeline } from "./Timeline.vue.js";
2
2
  export type { TimelineProps, TimelineSegment, TimelineSegmentState, } from "./types.js";
3
+ export { accentFor, HUE_OFFSET, HUE_STRIDE, HUE_STOPS } from "./geometry.js";
4
+ export type { TimelineSpan } from "./geometry.js";
@@ -35,18 +35,18 @@ type __VLS_Slots = {} & {
35
35
  };
36
36
  declare const __VLS_base: import("vue").DefineComponent<ToastProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
37
37
  pause: () => any;
38
+ resume: () => any;
38
39
  "update:open": (value: boolean) => any;
39
40
  escapeKeyDown: (event: KeyboardEvent) => any;
40
- resume: () => any;
41
41
  swipeStart: (event: ToastSwipeEvent) => any;
42
42
  swipeMove: (event: ToastSwipeEvent) => any;
43
43
  swipeCancel: (event: ToastSwipeEvent) => any;
44
44
  swipeEnd: (event: ToastSwipeEvent) => any;
45
45
  }, string, import("vue").PublicProps, Readonly<ToastProps> & Readonly<{
46
46
  onPause?: (() => any) | undefined;
47
+ onResume?: (() => any) | undefined;
47
48
  "onUpdate:open"?: ((value: boolean) => any) | undefined;
48
49
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
49
- onResume?: (() => any) | undefined;
50
50
  onSwipeStart?: ((event: ToastSwipeEvent) => any) | undefined;
51
51
  onSwipeMove?: ((event: ToastSwipeEvent) => any) | undefined;
52
52
  onSwipeCancel?: ((event: ToastSwipeEvent) => any) | undefined;
@@ -4,15 +4,6 @@ export interface OklchStop {
4
4
  C: number;
5
5
  h: number;
6
6
  }
7
- /**
8
- * A color seam: resolves a CSS color string to a GAMMA-sRGB triple in [0,1].
9
- * `defaultBlobColorResolver` is the default. A general-purpose injection type for
10
- * consumers that theme a substrate through an external color pipeline — the
11
- * `<FourierField>` ambient background takes it as an optional `colorResolver` prop
12
- * (paired with the `color` token seam). The goo-blob resolves color internally through
13
- * `cssToOklch → oklchToGammaRgb` without dependency injection.
14
- */
15
- export type ColorResolver = (css: string) => [number, number, number];
16
7
  /**
17
8
  * OKLCh stop → LINEAR-sRGB in [0,1] — aurora's bundle-canonical bake target (the
18
9
  * shader ACES-tonemaps in linear, so the LUT stays linear).
@@ -61,12 +52,6 @@ export declare function oklchToGammaRgb(stop: OklchStop): [number, number, numbe
61
52
  export declare function cssToOklch(css: string): OklchStop;
62
53
  /** OKLCh stop → `#rrggbb` gamma hex through value.js `toRgba8`. */
63
54
  export declare function oklchStopToHex(s: OklchStop): string;
64
- /**
65
- * Default `ColorResolver`: `(css) => gamma [r,g,b]` through
66
- * `cssToOklch → oklchToGammaRgb`. `<FourierField>` can pass it as its
67
- * `colorResolver`; Blob uses the same body internally without a DI seam.
68
- */
69
- export declare const defaultBlobColorResolver: ColorResolver;
70
55
  /**
71
56
  * Harmony schemes for the OKLCh palette derivers. Each maps the seed hue onto the
72
57
  * derived stops differently:
@@ -13,8 +13,27 @@ export interface DarkModeSyncScriptOptions {
13
13
  * follows `prefers-color-scheme`, which is right for an app. `false`/`true`
14
14
  * resolve DETERMINISTICALLY, which is right for a document that must not flip
15
15
  * with the projector's OS theme — a briefing, a print target, a capture.
16
+ *
17
+ * The scalar forms answer BOTH cases at once. The object form answers them
18
+ * SEPARATELY, which is the only way to say "a first visit is a deliberate
19
+ * light document, but a reader who chose `auto` gets their platform":
20
+ *
21
+ * ```ts
22
+ * darkModeSyncScript({ defaultDark: { absent: false, auto: "os" } });
23
+ * ```
24
+ *
25
+ * No scalar reproduces that pair — `false` makes `auto` mean light and `"os"`
26
+ * makes a first visit follow the OS — which is why a consumer with the split
27
+ * policy hand-rolls the whole `<head>` block instead of calling this.
28
+ *
29
+ * [2026-09-22 · register-wave N-3 — an UNREADABLE store (a throwing
30
+ * `localStorage` accessor or `getItem`) counts as ABSENT: the scalar forms
31
+ * fall to their one arm, the object form to `absent`.]
16
32
  */
17
- defaultDark?: boolean | "os";
33
+ defaultDark?: boolean | "os" | {
34
+ absent: boolean | "os";
35
+ auto: boolean | "os";
36
+ };
18
37
  /**
19
38
  * Honour `?light` / `?dark` in the query string, above storage and above the
20
39
  * default. This is the capture-forcing seam: a screenshot pipeline asks for a
@@ -25,6 +44,10 @@ export interface DarkModeSyncScriptOptions {
25
44
  * Write the RESOLVED mode back to storage, so an absent or `"auto"` value
26
45
  * becomes a concrete `"dark"`/`"light"` at first paint and the runtime
27
46
  * composable and the stamp cannot disagree about what `auto` meant.
47
+ *
48
+ * The write is emitted AFTER the stamp, so a storage that throws on write
49
+ * (quota, privacy mode, a sandboxed origin) costs the write-back and nothing
50
+ * else — the page is already themed when it fails.
28
51
  */
29
52
  normalize?: boolean;
30
53
  }
@@ -14,7 +14,7 @@ export interface ResolveTokenColorCache {
14
14
  *
15
15
  * @param css the color string (a `var(--token)` wrapper or a literal)
16
16
  * @param el the element to resolve the cascade against (the host wrapper)
17
- * @returns the concrete color string the `ColorResolver` can parse
17
+ * @returns the concrete color string a `(css) => rgb` resolver can parse
18
18
  */
19
19
  export declare function resolveTokenColor(css: string, el: HTMLElement | null): string;
20
20
  /**
@@ -1,5 +1,7 @@
1
1
  export { useSpecularTracking, createSpecularWriter, } from "./useSpecularTracking.js";
2
2
  export type { UseSpecularTracking, SpecularWriter, } from "./useSpecularTracking.js";
3
3
  export { vSpecular } from "./vSpecular.js";
4
+ export type { RendererStatus } from "./webgpu/rendererStatus.js";
5
+ export type { GpuBackend } from "./webgpu/useGpuSubstrate.js";
4
6
  export { useCanvas2D, resolveCanvasColor } from "./canvas2d/index.js";
5
7
  export type { Canvas2DFrame, Canvas2DHandle, Canvas2DOptions, Canvas2DSuspendReason, } from "./canvas2d/index.js";