@adea-ai/ui 0.117.0 → 0.118.1

package/dist/components/ui/slider/slider.js

@@ -16,9 +16,12 @@ function Slider$1(props) {
 		"aria-label",
 		"aria-labelledby"
 	]);
-	return createComponent(Slider, mergeProps({ get ["class"]() {
-		return cn("relative flex touch-none flex-col justify-center select-none", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=horizontal]:w-full", "data-[disabled]:opacity-50", local.class);
-	} }, rest, { get children() {
+	return createComponent(Slider, mergeProps({
+		"data-slot": "slider",
+		get ["class"]() {
+			return cn("relative flex touch-none flex-col justify-center select-none", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=horizontal]:w-full", "data-[disabled]:opacity-50", local.class);
+		}
+	}, rest, { get children() {
 		return [
 			createComponent(Slider.Track, {
 				get ["class"]() {

package/dist/components/ui/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":["Slider","KobalteSlider","ComponentProps","For","Show","createUniqueId","createRenderEffect","splitProps","cn","SliderProps","thumbLabels","trackClass","rangeClass","thumbClass","valueLabel","props","inputId","local","rest","_$createComponent","_$mergeProps","class","children","Track","Fill","_$memo","each","Array","from","length","value","defaultValue","_","index","Thumb","aria-label","aria-labelledby","undefined","Input","id","ref","input","String","minValue","hidden","when","ValueLabel","Slider","_$createComponent","KobalteSlider","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/slider/slider.tsx"],"sourcesContent":["import { Slider as KobalteSlider } from '@kobalte/core/slider'\nimport type { ComponentProps } from 'solid-js'\nimport { For, Show, createUniqueId, createRenderEffect, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Slider.\n *\n * For a value on a continuum where position matters more than precision — a\n * zoom, a volume, a threshold. When the number matters, pass `valueLabel` so\n * the value is both adjustable *and* readable; a bare slider is a control\n * nobody can set exactly.\n *\n * Kobalte handles pointer capture, keyboard stepping and the ARIA value\n * wiring; this paints the track, fill and one thumb per value. Each thumb\n * contains a form-native input, hidden from accessibility because the visible\n * thumb already exposes the slider role.\n */\nexport type SliderProps = ComponentProps<typeof KobalteSlider> & {\n  /** Accessible names for individual thumbs, in value order (for example minimum and maximum). */\n  thumbLabels?: readonly string[]\n  trackClass?: string\n  rangeClass?: string\n  thumbClass?: string\n  /** Show the current value beside the thumb while dragging. */\n  valueLabel?: boolean\n}\n\nexport function Slider(props: SliderProps) {\n  const inputId = createUniqueId()\n  const [local, rest] = splitProps(props, [\n    'class',\n    'trackClass',\n    'rangeClass',\n    'thumbClass',\n    'thumbLabels',\n    'valueLabel',\n    'children',\n    'aria-label',\n    'aria-labelledby',\n  ])\n\n  return (\n    <KobalteSlider\n      class={cn(\n        'relative flex touch-none flex-col justify-center select-none',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=horizontal]:w-full',\n        'data-[disabled]:opacity-50',\n        local.class\n      )}\n      {...rest}\n    >\n      <KobalteSlider.Track\n        class={cn(\n          'bg-input relative grow overflow-hidden rounded-full',\n          'data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full',\n          'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',\n          local.trackClass\n        )}\n      >\n        <KobalteSlider.Fill\n          class={cn(\n            'bg-primary absolute rounded-full',\n            'data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',\n            local.rangeClass\n          )}\n        />\n      </KobalteSlider.Track>\n      {local.children}\n      <For\n        each={Array.from(\n          { length: (props.value ?? props.defaultValue ?? [0]).length },\n          (_, index) => index\n        )}\n      >\n        {(index) => (\n          <KobalteSlider.Thumb\n            aria-label={local.thumbLabels?.[index] ?? local['aria-label']}\n            aria-labelledby={local.thumbLabels?.[index] ? undefined : local['aria-labelledby']}\n            class={cn(\n              'border-primary bg-background block size-4 shrink-0 rounded-full border-2 shadow-xs',\n              'transition-[color,box-shadow] ease-out outline-none',\n              'hover:ring-4 hover:ring-primary-subtle',\n              'focus-visible:ring-4 focus-visible:ring-primary-subtle',\n              local.thumbClass\n            )}\n          >\n            {/* Native reset uses the value property’s default, not an HTML defaultValue attribute. */}\n            <KobalteSlider.Input\n              id={`slider-${inputId}-${index}`}\n              ref={(input) => {\n                createRenderEffect(() => {\n                  input.defaultValue = String(\n                    props.defaultValue?.[index] ?? props.value?.[index] ?? props.minValue ?? 0\n                  )\n                })\n              }}\n              hidden\n              aria-hidden=\"true\"\n            />\n            <Show when={local.valueLabel}>\n              <KobalteSlider.ValueLabel class=\"bg-popover text-popover-foreground absolute -top-6 left-1/2 -translate-x-1/2 rounded-sm border border-border px-1 text-2xs tabular-nums\" />\n            </Show>\n          </KobalteSlider.Thumb>\n        )}\n      </For>\n    </KobalteSlider>\n  )\n}\n"],"mappings":";;;;;AA4BA,SAAgBA,SAAOe,OAAoB;CACzC,MAAMC,UAAUX,eAAe;CAC/B,MAAM,CAACY,OAAOC,QAAQX,WAAWQ,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAiB,CAClB;CAED,OAAAI,gBACGlB,QAAamB,WAAA,EAAA,KAAA,WAAA;EAAA,OACLZ,GACL,gEACA,2GACA,8BACAS,MAAMI,KACR;CAAC,EAAA,GACGH,MAAI,EAAA,IAAAI,WAAA;EAAA,OAAA;GAAAH,gBAEPlB,OAAcsB,OAAK;IAAA,KAAA,WAAA;KAAA,OACXf,GACL,uDACA,4EACA,wEACAS,MAAMN,UACR;IAAC;IAAA,IAAAW,WAAA;KAAA,OAAAH,gBAEAlB,OAAcuB,MAAI,EAAA,KAAA,WAAA;MAAA,OACVhB,GACL,oCACA,2EACAS,MAAML,UACR;KAAC,EAAA,CAAA;IAAA;GAAA,CAAA;GAAAa,WAGJR,MAAMK,QAAQ;GAAAH,gBACdhB,KAAG;IAAA,IACFuB,OAAI;KAAA,OAAEC,MAAMC,KACV,EAAEC,SAASd,MAAMe,SAASf,MAAMgB,gBAAgB,CAAC,CAAC,EAAA,CAAGF,OAAO,IAC3DG,GAAGC,UAAUA,KAChB;IAAC;IAAAX,WAECW,UAAKd,gBACJlB,OAAciC,OAAK;KAAA,KAAA,gBAAA;MAAA,OACNjB,MAAMP,cAAcuB,UAAUhB,MAAM;KAAa;KAAA,KAAA,qBAAA;MAAA,OAC5CQ,WAAA,CAAA,CAAAR,MAAMP,cAAcuB,MAAM,CAAA,CAAA,IAAGI,KAAAA,IAAYpB,MAAM;KAAkB;KAAA,KAAA,WAAA;MAAA,OAC3ET,GACL,sFACA,uDACA,0CACA,0DACAS,MAAMJ,UACR;KAAC;KAAA,IAAAS,WAAA;MAAA,OAAA,CAAAH,gBAGAlB,OAAcqC,OAAK;OAClBC,IAAI,UAAUvB,QAAO,GAAIiB;OAAOO,MAC1BC,UAAU;QACdnC,yBAAyB;SACvBmC,MAAMV,eAAeW,OACnB3B,MAAMgB,eAAeE,UAAUlB,MAAMe,QAAQG,UAAUlB,MAAM4B,YAAY,CAC3E;QACF,CAAC;OACH;OACAC,QAAM;OAAA,eAAA;MAAA,CAAA,GAAAzB,gBAGPf,MAAI;OAAA,IAACyC,OAAI;QAAA,OAAE5B,MAAMH;OAAU;OAAA,IAAAQ,WAAA;QAAA,OAAAH,gBACzBlB,OAAc6C,YAAU,EAAA,SAAA,0IAAA,CAAA;OAAA;MAAA,CAAA,CAAA;KAAA;IAAA,CAAA;GAG9B,CAAA;EAAA;CAAA,EAAA,CAAA,CAAA;AAIT"}
+{"version":3,"file":"slider.js","names":["Slider","KobalteSlider","ComponentProps","For","Show","createUniqueId","createRenderEffect","splitProps","cn","SliderProps","thumbLabels","trackClass","rangeClass","thumbClass","valueLabel","props","inputId","local","rest","_$createComponent","_$mergeProps","class","children","Track","Fill","_$memo","each","Array","from","length","value","defaultValue","_","index","Thumb","aria-label","aria-labelledby","undefined","Input","id","ref","input","String","minValue","hidden","when","ValueLabel","Slider","_$createComponent","KobalteSlider","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/slider/slider.tsx"],"sourcesContent":["import { Slider as KobalteSlider } from '@kobalte/core/slider'\nimport type { ComponentProps } from 'solid-js'\nimport { For, Show, createUniqueId, createRenderEffect, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Slider.\n *\n * For a value on a continuum where position matters more than precision — a\n * zoom, a volume, a threshold. When the number matters, pass `valueLabel` so\n * the value is both adjustable *and* readable; a bare slider is a control\n * nobody can set exactly.\n *\n * Kobalte handles pointer capture, keyboard stepping and the ARIA value\n * wiring; this paints the track, fill and one thumb per value. Each thumb\n * contains a form-native input, hidden from accessibility because the visible\n * thumb already exposes the slider role.\n */\nexport type SliderProps = ComponentProps<typeof KobalteSlider> & {\n  /** Accessible names for individual thumbs, in value order (for example minimum and maximum). */\n  thumbLabels?: readonly string[]\n  trackClass?: string\n  rangeClass?: string\n  thumbClass?: string\n  /** Show the current value beside the thumb while dragging. */\n  valueLabel?: boolean\n}\n\nexport function Slider(props: SliderProps) {\n  const inputId = createUniqueId()\n  const [local, rest] = splitProps(props, [\n    'class',\n    'trackClass',\n    'rangeClass',\n    'thumbClass',\n    'thumbLabels',\n    'valueLabel',\n    'children',\n    'aria-label',\n    'aria-labelledby',\n  ])\n\n  return (\n    <KobalteSlider\n      data-slot=\"slider\"\n      class={cn(\n        'relative flex touch-none flex-col justify-center select-none',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=horizontal]:w-full',\n        'data-[disabled]:opacity-50',\n        local.class\n      )}\n      {...rest}\n    >\n      <KobalteSlider.Track\n        class={cn(\n          'bg-input relative grow overflow-hidden rounded-full',\n          'data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full',\n          'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',\n          local.trackClass\n        )}\n      >\n        <KobalteSlider.Fill\n          class={cn(\n            'bg-primary absolute rounded-full',\n            'data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',\n            local.rangeClass\n          )}\n        />\n      </KobalteSlider.Track>\n      {local.children}\n      <For\n        each={Array.from(\n          { length: (props.value ?? props.defaultValue ?? [0]).length },\n          (_, index) => index\n        )}\n      >\n        {(index) => (\n          <KobalteSlider.Thumb\n            aria-label={local.thumbLabels?.[index] ?? local['aria-label']}\n            aria-labelledby={local.thumbLabels?.[index] ? undefined : local['aria-labelledby']}\n            class={cn(\n              'border-primary bg-background block size-4 shrink-0 rounded-full border-2 shadow-xs',\n              'transition-[color,box-shadow] ease-out outline-none',\n              'hover:ring-4 hover:ring-primary-subtle',\n              'focus-visible:ring-4 focus-visible:ring-primary-subtle',\n              local.thumbClass\n            )}\n          >\n            {/* Native reset uses the value property’s default, not an HTML defaultValue attribute. */}\n            <KobalteSlider.Input\n              id={`slider-${inputId}-${index}`}\n              ref={(input) => {\n                createRenderEffect(() => {\n                  input.defaultValue = String(\n                    props.defaultValue?.[index] ?? props.value?.[index] ?? props.minValue ?? 0\n                  )\n                })\n              }}\n              hidden\n              aria-hidden=\"true\"\n            />\n            <Show when={local.valueLabel}>\n              <KobalteSlider.ValueLabel class=\"bg-popover text-popover-foreground absolute -top-6 left-1/2 -translate-x-1/2 rounded-sm border border-border px-1 text-2xs tabular-nums\" />\n            </Show>\n          </KobalteSlider.Thumb>\n        )}\n      </For>\n    </KobalteSlider>\n  )\n}\n"],"mappings":";;;;;AA4BA,SAAgBA,SAAOe,OAAoB;CACzC,MAAMC,UAAUX,eAAe;CAC/B,MAAM,CAACY,OAAOC,QAAQX,WAAWQ,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAiB,CAClB;CAED,OAAAI,gBACGlB,QAAamB,WAAA;EAAA,aAAA;EAAA,KAAA,WAAA;GAAA,OAELZ,GACL,gEACA,2GACA,8BACAS,MAAMI,KACR;EAAC;CAAA,GACGH,MAAI,EAAA,IAAAI,WAAA;EAAA,OAAA;GAAAH,gBAEPlB,OAAcsB,OAAK;IAAA,KAAA,WAAA;KAAA,OACXf,GACL,uDACA,4EACA,wEACAS,MAAMN,UACR;IAAC;IAAA,IAAAW,WAAA;KAAA,OAAAH,gBAEAlB,OAAcuB,MAAI,EAAA,KAAA,WAAA;MAAA,OACVhB,GACL,oCACA,2EACAS,MAAML,UACR;KAAC,EAAA,CAAA;IAAA;GAAA,CAAA;GAAAa,WAGJR,MAAMK,QAAQ;GAAAH,gBACdhB,KAAG;IAAA,IACFuB,OAAI;KAAA,OAAEC,MAAMC,KACV,EAAEC,SAASd,MAAMe,SAASf,MAAMgB,gBAAgB,CAAC,CAAC,EAAA,CAAGF,OAAO,IAC3DG,GAAGC,UAAUA,KAChB;IAAC;IAAAX,WAECW,UAAKd,gBACJlB,OAAciC,OAAK;KAAA,KAAA,gBAAA;MAAA,OACNjB,MAAMP,cAAcuB,UAAUhB,MAAM;KAAa;KAAA,KAAA,qBAAA;MAAA,OAC5CQ,WAAA,CAAA,CAAAR,MAAMP,cAAcuB,MAAM,CAAA,CAAA,IAAGI,KAAAA,IAAYpB,MAAM;KAAkB;KAAA,KAAA,WAAA;MAAA,OAC3ET,GACL,sFACA,uDACA,0CACA,0DACAS,MAAMJ,UACR;KAAC;KAAA,IAAAS,WAAA;MAAA,OAAA,CAAAH,gBAGAlB,OAAcqC,OAAK;OAClBC,IAAI,UAAUvB,QAAO,GAAIiB;OAAOO,MAC1BC,UAAU;QACdnC,yBAAyB;SACvBmC,MAAMV,eAAeW,OACnB3B,MAAMgB,eAAeE,UAAUlB,MAAMe,QAAQG,UAAUlB,MAAM4B,YAAY,CAC3E;QACF,CAAC;OACH;OACAC,QAAM;OAAA,eAAA;MAAA,CAAA,GAAAzB,gBAGPf,MAAI;OAAA,IAACyC,OAAI;QAAA,OAAE5B,MAAMH;OAAU;OAAA,IAAAQ,WAAA;QAAA,OAAAH,gBACzBlB,OAAc6C,YAAU,EAAA,SAAA,0IAAA,CAAA;OAAA;MAAA,CAAA,CAAA;KAAA;IAAA,CAAA;GAG9B,CAAA;EAAA;CAAA,EAAA,CAAA,CAAA;AAIT"}

package/dist/components/ui/status-chip/status-chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-chip.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/status-chip/status-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAK1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,iBAAiB;;8EAa5B,CAAA;AAYF,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,GACT,SAAS,CAAA;AAEb,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uFAAuF;IACvF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iEAAiE;IACjE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAqChD;AAED,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC,CAAA;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,eAeA"}
+{"version":3,"file":"status-chip.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/status-chip/status-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAK1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,iBAAiB;;8EAa5B,CAAA;AAYF,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,GACT,SAAS,CAAA;AAEb,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uFAAuF;IACvF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iEAAiE;IACjE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAsChD;AAED,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC,CAAA;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,eAeA"}

package/dist/components/ui/status-chip/status-chip.js

@@ -4,7 +4,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
 import { className, createComponent, effect, insert, mergeProps, spread, template } from "solid-js/web";
 import { Show, splitProps } from "solid-js";
 //#region src/components/ui/status-chip/status-chip.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span><span aria-hidden=true></span><span>`);
+var _tmpl$ = /*#__PURE__*/ template(`<span data-slot=status-chip><span aria-hidden=true></span><span>`);
 var _tmpl$2 = /*#__PURE__*/ template(`<dl>`);
 var _tmpl$3 = /*#__PURE__*/ template(`<dt class=text-muted-foreground>`);
 var _tmpl$4 = /*#__PURE__*/ template(`<div class="flex items-baseline justify-between gap-4"><dd>`);

package/dist/components/ui/status-chip/status-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-chip.js","names":["Show","splitProps","ComponentProps","JSX","cva","cn","Tooltip","TooltipContent","TooltipTrigger","statusDotVariants","variants","tone","neutral","success","warning","danger","info","pending","unknown","defaultVariants","labelTone","Record","StatusTone","StatusChipProps","Omit","label","compact","detail","trailing","Element","StatusChip","props","local","rest","chip","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$spread","_$mergeProps","class","_$insert","_$effect","_p$","_v$","_v$2","e","_$className","t","undefined","_$createComponent","when","fallback","children","as","StatusEntry","Readonly","id","name","StatusList","entries","_el$4","_tmpl$2","map","entry","_el$5","_tmpl$4","_el$7","_el$6","_tmpl$3","_$mergeProps","_$className","_$createComponent"],"sources":["../../../../src/components/ui/status-chip/status-chip.tsx"],"sourcesContent":["import { Show, splitProps, type ComponentProps, type JSX } from 'solid-js'\nimport { cva } from '#lib/variants'\nimport { cn } from '#lib/utils'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'\n\n/**\n * StatusChip.\n *\n * A state, said in one word, with the reason available on hover. It exists\n * because a status readout has three parts that are always the same three parts —\n * a tone, a label, and the detail that justifies the label — and rendering them\n * ad hoc produces the two failures this component is here to prevent: a colour\n * with no text (unreadable to anyone who cannot see it) and a bare word with no\n * explanation (\"Needs configuration\" — of what?).\n *\n * The tones are deliberately not a rainbow. Seven cover what a status can actually\n * mean:\n *\n * - `neutral` — fine, and there is nothing to say about it.\n * - `success` — a check passed, a capability is ready, a job finished.\n * - `warning` — degraded, or needs a decision from the user.\n * - `danger` — blocked, failed, unrecoverable without intervention.\n * - `info` — in flight or scheduled; work is happening, nothing is wrong.\n * - `pending` — running now with no result yet (a check, a build). The ring\n *   turns, so it reads as live rather than as a settled state.\n * - `unknown` — the honest absence of information.\n *\n * `unknown` is not the same as `neutral`, and collapsing them is the mistake\n * worth avoiding: \"this is idle\" and \"we have not been told yet\" are different\n * facts, and a product that shows the second as the first is lying quietly. The\n * ring is hollow so it also reads as different in greyscale.\n *\n * The dot is `aria-hidden` and the label carries the meaning, so a tone is never\n * the only signal.\n */\nexport const statusDotVariants = cva('size-2 shrink-0 rounded-full', {\n  variants: {\n    tone: {\n      neutral: 'bg-muted-foreground',\n      success: 'bg-success',\n      warning: 'bg-warning',\n      danger: 'bg-destructive',\n      info: 'bg-info',\n      pending: 'border-2 border-info border-r-transparent motion-safe:animate-spin',\n      unknown: 'border border-muted-foreground bg-transparent',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\nconst labelTone: Record<StatusTone, string> = {\n  neutral: 'text-foreground',\n  success: 'text-foreground',\n  warning: 'text-foreground',\n  danger: 'text-foreground',\n  info: 'text-foreground',\n  pending: 'text-foreground',\n  unknown: 'text-muted-foreground',\n}\n\nexport type StatusTone =\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'pending'\n  | 'unknown'\n\nexport type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {\n  tone?: StatusTone\n  label: string\n  /** Visually hide the text while preserving it for assistive technology. */\n  compact?: boolean\n  /** Why the status is what it is. Shown in a tooltip; omit for a self-evident label. */\n  detail?: string\n  /** A trailing slot: a timestamp, a retry affordance, a count. */\n  trailing?: JSX.Element\n}\n\nexport function StatusChip(props: StatusChipProps) {\n  const [local, rest] = splitProps(props, [\n    'tone',\n    'label',\n    'compact',\n    'detail',\n    'trailing',\n    'class',\n  ])\n\n  const chip = (\n    <span\n      class={cn(\n        'inline-flex w-fit items-center gap-1.5 text-xs font-medium whitespace-nowrap',\n        labelTone[local.tone ?? 'neutral'],\n        local.class\n      )}\n      {...rest}\n    >\n      <span class={statusDotVariants({ tone: local.tone })} aria-hidden=\"true\" />\n      <span class={cn(local.compact && 'sr-only')}>{local.label}</span>\n      {local.trailing}\n    </span>\n  )\n\n  return (\n    <Show when={local.detail} fallback={chip}>\n      {(detail) => (\n        <Tooltip>\n          <TooltipTrigger as=\"span\" class=\"inline-flex\">\n            {chip}\n          </TooltipTrigger>\n          <TooltipContent data-slot=\"tooltip-content\">{detail()}</TooltipContent>\n        </Tooltip>\n      )}\n    </Show>\n  )\n}\n\nexport type StatusEntry = Readonly<{\n  /** A stable key for the row. */\n  id: string\n  /** What is being reported — \"Configuration\", \"Runtime\", \"Sync\". */\n  name: string\n  tone: StatusTone\n  label: string\n  detail?: string\n}>\n\n/**\n * StatusList.\n *\n * The several-facts-about-one-thing shape: an agent with a configuration state, a\n * runtime state and an activity state; a service with a build, a deploy and a\n * health check. It is a definition list rather than a table because there is no\n * column to sort or compare — the rows are facets of a single subject, and a\n * screen reader should hear them as such.\n *\n * Fixed width on the name column is what makes a column of these scannable; the\n * rows line up without a table's semantics.\n */\nexport function StatusList(props: {\n  entries: readonly StatusEntry[]\n  class?: string\n  /** Hide the name column and show only the chips — for a compact badge strip. */\n  compact?: boolean\n}) {\n  return (\n    <dl class={cn('grid gap-2 text-sm', props.class)}>\n      {props.entries.map((entry) => (\n        <div class=\"flex items-baseline justify-between gap-4\">\n          <Show when={!props.compact}>\n            <dt class=\"text-muted-foreground\">{entry.name}</dt>\n          </Show>\n          <dd class={cn(!props.compact && 'shrink-0')}>\n            <StatusChip tone={entry.tone} label={entry.label} detail={entry.detail} />\n          </dd>\n        </div>\n      ))}\n    </dl>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"status-chip.js","names":["Show","splitProps","ComponentProps","JSX","cva","cn","Tooltip","TooltipContent","TooltipTrigger","statusDotVariants","variants","tone","neutral","success","warning","danger","info","pending","unknown","defaultVariants","labelTone","Record","StatusTone","StatusChipProps","Omit","label","compact","detail","trailing","Element","StatusChip","props","local","rest","chip","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$spread","_$mergeProps","class","_$insert","_$effect","_p$","_v$","_v$2","e","_$className","t","undefined","_$createComponent","when","fallback","children","as","StatusEntry","Readonly","id","name","StatusList","entries","_el$4","_tmpl$2","map","entry","_el$5","_tmpl$4","_el$7","_el$6","_tmpl$3","_$mergeProps","_$className","_$createComponent"],"sources":["../../../../src/components/ui/status-chip/status-chip.tsx"],"sourcesContent":["import { Show, splitProps, type ComponentProps, type JSX } from 'solid-js'\nimport { cva } from '#lib/variants'\nimport { cn } from '#lib/utils'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'\n\n/**\n * StatusChip.\n *\n * A state, said in one word, with the reason available on hover. It exists\n * because a status readout has three parts that are always the same three parts —\n * a tone, a label, and the detail that justifies the label — and rendering them\n * ad hoc produces the two failures this component is here to prevent: a colour\n * with no text (unreadable to anyone who cannot see it) and a bare word with no\n * explanation (\"Needs configuration\" — of what?).\n *\n * The tones are deliberately not a rainbow. Seven cover what a status can actually\n * mean:\n *\n * - `neutral` — fine, and there is nothing to say about it.\n * - `success` — a check passed, a capability is ready, a job finished.\n * - `warning` — degraded, or needs a decision from the user.\n * - `danger` — blocked, failed, unrecoverable without intervention.\n * - `info` — in flight or scheduled; work is happening, nothing is wrong.\n * - `pending` — running now with no result yet (a check, a build). The ring\n *   turns, so it reads as live rather than as a settled state.\n * - `unknown` — the honest absence of information.\n *\n * `unknown` is not the same as `neutral`, and collapsing them is the mistake\n * worth avoiding: \"this is idle\" and \"we have not been told yet\" are different\n * facts, and a product that shows the second as the first is lying quietly. The\n * ring is hollow so it also reads as different in greyscale.\n *\n * The dot is `aria-hidden` and the label carries the meaning, so a tone is never\n * the only signal.\n */\nexport const statusDotVariants = cva('size-2 shrink-0 rounded-full', {\n  variants: {\n    tone: {\n      neutral: 'bg-muted-foreground',\n      success: 'bg-success',\n      warning: 'bg-warning',\n      danger: 'bg-destructive',\n      info: 'bg-info',\n      pending: 'border-2 border-info border-r-transparent motion-safe:animate-spin',\n      unknown: 'border border-muted-foreground bg-transparent',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\nconst labelTone: Record<StatusTone, string> = {\n  neutral: 'text-foreground',\n  success: 'text-foreground',\n  warning: 'text-foreground',\n  danger: 'text-foreground',\n  info: 'text-foreground',\n  pending: 'text-foreground',\n  unknown: 'text-muted-foreground',\n}\n\nexport type StatusTone =\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'pending'\n  | 'unknown'\n\nexport type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {\n  tone?: StatusTone\n  label: string\n  /** Visually hide the text while preserving it for assistive technology. */\n  compact?: boolean\n  /** Why the status is what it is. Shown in a tooltip; omit for a self-evident label. */\n  detail?: string\n  /** A trailing slot: a timestamp, a retry affordance, a count. */\n  trailing?: JSX.Element\n}\n\nexport function StatusChip(props: StatusChipProps) {\n  const [local, rest] = splitProps(props, [\n    'tone',\n    'label',\n    'compact',\n    'detail',\n    'trailing',\n    'class',\n  ])\n\n  const chip = (\n    <span\n      data-slot=\"status-chip\"\n      class={cn(\n        'inline-flex w-fit items-center gap-1.5 text-xs font-medium whitespace-nowrap',\n        labelTone[local.tone ?? 'neutral'],\n        local.class\n      )}\n      {...rest}\n    >\n      <span class={statusDotVariants({ tone: local.tone })} aria-hidden=\"true\" />\n      <span class={cn(local.compact && 'sr-only')}>{local.label}</span>\n      {local.trailing}\n    </span>\n  )\n\n  return (\n    <Show when={local.detail} fallback={chip}>\n      {(detail) => (\n        <Tooltip>\n          <TooltipTrigger as=\"span\" class=\"inline-flex\">\n            {chip}\n          </TooltipTrigger>\n          <TooltipContent data-slot=\"tooltip-content\">{detail()}</TooltipContent>\n        </Tooltip>\n      )}\n    </Show>\n  )\n}\n\nexport type StatusEntry = Readonly<{\n  /** A stable key for the row. */\n  id: string\n  /** What is being reported — \"Configuration\", \"Runtime\", \"Sync\". */\n  name: string\n  tone: StatusTone\n  label: string\n  detail?: string\n}>\n\n/**\n * StatusList.\n *\n * The several-facts-about-one-thing shape: an agent with a configuration state, a\n * runtime state and an activity state; a service with a build, a deploy and a\n * health check. It is a definition list rather than a table because there is no\n * column to sort or compare — the rows are facets of a single subject, and a\n * screen reader should hear them as such.\n *\n * Fixed width on the name column is what makes a column of these scannable; the\n * rows line up without a table's semantics.\n */\nexport function StatusList(props: {\n  entries: readonly StatusEntry[]\n  class?: string\n  /** Hide the name column and show only the chips — for a compact badge strip. */\n  compact?: boolean\n}) {\n  return (\n    <dl class={cn('grid gap-2 text-sm', props.class)}>\n      {props.entries.map((entry) => (\n        <div class=\"flex items-baseline justify-between gap-4\">\n          <Show when={!props.compact}>\n            <dt class=\"text-muted-foreground\">{entry.name}</dt>\n          </Show>\n          <dd class={cn(!props.compact && 'shrink-0')}>\n            <StatusChip tone={entry.tone} label={entry.label} detail={entry.detail} />\n          </dd>\n        </div>\n      ))}\n    </dl>\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/switch/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAsFxC;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,eAK5E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,eAKxF"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAuFxC;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,eAK5E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,WAAW,CAAC,eAKxF"}

package/dist/components/ui/switch/switch.js

@@ -34,6 +34,7 @@ function Switch$1(props) {
 		"aria-errormessage": local["aria-errormessage"]
 	});
 	return createComponent(Switch, mergeProps({
+		"data-slot": "switch",
 		get id() {
 			return field ? void 0 : local.id;
 		},

package/dist/components/ui/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":["Switch","KobalteSwitch","ComponentProps","JSX","splitProps","useFormFieldControl","cn","SwitchProps","Omit","inputId","controlClass","thumbClass","labelClass","descriptionClass","label","Element","description","children","props","local","rest","field","id","_$createComponent","_$mergeProps","undefined","title","class","Input","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","aria-busy","Control","Thumb","_$memo","_el$","_tmpl$","_$insert","_c$","Label","_c$2","Description","SwitchLabel","SwitchDescription","Switch","_$createComponent","KobalteSwitch","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/switch/switch.tsx"],"sourcesContent":["import { Switch as KobalteSwitch } from '@kobalte/core/switch'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * Switch.\n *\n * For a setting that takes effect the moment it is flipped. The distinction\n * from Checkbox is behaviour, not looks: a switch applies immediately and\n * belongs in a settings row, while a checkbox is a value the user is still\n * composing and is applied when a form is submitted. A switch inside an unsaved\n * form is the mistake this split exists to prevent.\n *\n * `Switch.Input` renders a real hidden checkbox, so the control is\n * form-native, keyboard-operable, and its `aria-checked` follows the state the\n * user sees.\n */\nexport type SwitchProps = Omit<ComponentProps<typeof KobalteSwitch>, 'children'> & {\n  /** ID for the hidden native switch input; useful with an external label. */\n  inputId?: string\n  controlClass?: string\n  thumbClass?: string\n  labelClass?: string\n  descriptionClass?: string\n  label?: JSX.Element\n  description?: JSX.Element\n  /**\n   * Replaces the control and label. Omit it to get the default control beside\n   * `label` and `description`; supply it to compose the parts yourself.\n   */\n  children?: JSX.Element\n}\n\nexport function Switch(props: SwitchProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'controlClass',\n    'thumbClass',\n    'labelClass',\n    'descriptionClass',\n    'children',\n    'label',\n    'description',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n    'aria-busy',\n    'id',\n    'inputId',\n    'title',\n  ])\n  const field = useFormFieldControl('control', {\n    id: local.inputId ?? local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n\n  return (\n    <KobalteSwitch\n      id={field ? undefined : local.id}\n      title={local.title}\n      class={cn('group/switch flex items-center gap-2.5', local.class)}\n      {...rest}\n    >\n      {/* The name belongs on the input; see Checkbox for why. */}\n      <KobalteSwitch.Input\n        id={field?.id ?? local.inputId}\n        aria-label={local['aria-label']}\n        aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n        aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n        aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n        aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n        aria-busy={local['aria-busy']}\n        title={local.title}\n      />\n      <KobalteSwitch.Control\n        class={cn(\n          'bg-input inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent',\n          'transition-colors ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'data-[checked]:bg-primary',\n          'data-[invalid]:border-destructive',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n          local.controlClass\n        )}\n      >\n        <KobalteSwitch.Thumb\n          class={cn(\n            'bg-background pointer-events-none block size-4 rounded-full shadow-xs',\n            'transition-transform ease-out',\n            'data-[checked]:translate-x-4',\n            local.thumbClass\n          )}\n        />\n      </KobalteSwitch.Control>\n      {local.children ??\n        (local.label || local.description ? (\n          <div class=\"grid gap-0.5\">\n            {local.label ? (\n              <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.labelClass)}>\n                {local.label}\n              </KobalteSwitch.Label>\n            ) : null}\n            {local.description ? (\n              <KobalteSwitch.Description\n                class={cn('text-muted-foreground text-sm', local.descriptionClass)}\n              >\n                {local.description}\n              </KobalteSwitch.Description>\n            ) : null}\n          </div>\n        ) : null)}\n    </KobalteSwitch>\n  )\n}\n\n/**\n * The switch's own label. Valid only inside a `<Switch>`: it is Kobalte's label\n * for that root's control, and outside one there is nothing to associate with.\n * A label drawn *beside* a switch — a settings row with the control trailing —\n * is plain text, and the switch takes an `aria-label` instead.\n */\nexport function SwitchLabel(props: ComponentProps<typeof KobalteSwitch.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.class)} {...rest} />\n  )\n}\n\nexport function SwitchDescription(props: ComponentProps<typeof KobalteSwitch.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteSwitch.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"switch.js","names":["Switch","KobalteSwitch","ComponentProps","JSX","splitProps","useFormFieldControl","cn","SwitchProps","Omit","inputId","controlClass","thumbClass","labelClass","descriptionClass","label","Element","description","children","props","local","rest","field","id","_$createComponent","_$mergeProps","undefined","title","class","Input","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","aria-busy","Control","Thumb","_$memo","_el$","_tmpl$","_$insert","_c$","Label","_c$2","Description","SwitchLabel","SwitchDescription","Switch","_$createComponent","KobalteSwitch","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/switch/switch.tsx"],"sourcesContent":["import { Switch as KobalteSwitch } from '@kobalte/core/switch'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * Switch.\n *\n * For a setting that takes effect the moment it is flipped. The distinction\n * from Checkbox is behaviour, not looks: a switch applies immediately and\n * belongs in a settings row, while a checkbox is a value the user is still\n * composing and is applied when a form is submitted. A switch inside an unsaved\n * form is the mistake this split exists to prevent.\n *\n * `Switch.Input` renders a real hidden checkbox, so the control is\n * form-native, keyboard-operable, and its `aria-checked` follows the state the\n * user sees.\n */\nexport type SwitchProps = Omit<ComponentProps<typeof KobalteSwitch>, 'children'> & {\n  /** ID for the hidden native switch input; useful with an external label. */\n  inputId?: string\n  controlClass?: string\n  thumbClass?: string\n  labelClass?: string\n  descriptionClass?: string\n  label?: JSX.Element\n  description?: JSX.Element\n  /**\n   * Replaces the control and label. Omit it to get the default control beside\n   * `label` and `description`; supply it to compose the parts yourself.\n   */\n  children?: JSX.Element\n}\n\nexport function Switch(props: SwitchProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'controlClass',\n    'thumbClass',\n    'labelClass',\n    'descriptionClass',\n    'children',\n    'label',\n    'description',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n    'aria-busy',\n    'id',\n    'inputId',\n    'title',\n  ])\n  const field = useFormFieldControl('control', {\n    id: local.inputId ?? local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n\n  return (\n    <KobalteSwitch\n      data-slot=\"switch\"\n      id={field ? undefined : local.id}\n      title={local.title}\n      class={cn('group/switch flex items-center gap-2.5', local.class)}\n      {...rest}\n    >\n      {/* The name belongs on the input; see Checkbox for why. */}\n      <KobalteSwitch.Input\n        id={field?.id ?? local.inputId}\n        aria-label={local['aria-label']}\n        aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n        aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n        aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n        aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n        aria-busy={local['aria-busy']}\n        title={local.title}\n      />\n      <KobalteSwitch.Control\n        class={cn(\n          'bg-input inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent',\n          'transition-colors ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'data-[checked]:bg-primary',\n          'data-[invalid]:border-destructive',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n          local.controlClass\n        )}\n      >\n        <KobalteSwitch.Thumb\n          class={cn(\n            'bg-background pointer-events-none block size-4 rounded-full shadow-xs',\n            'transition-transform ease-out',\n            'data-[checked]:translate-x-4',\n            local.thumbClass\n          )}\n        />\n      </KobalteSwitch.Control>\n      {local.children ??\n        (local.label || local.description ? (\n          <div class=\"grid gap-0.5\">\n            {local.label ? (\n              <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.labelClass)}>\n                {local.label}\n              </KobalteSwitch.Label>\n            ) : null}\n            {local.description ? (\n              <KobalteSwitch.Description\n                class={cn('text-muted-foreground text-sm', local.descriptionClass)}\n              >\n                {local.description}\n              </KobalteSwitch.Description>\n            ) : null}\n          </div>\n        ) : null)}\n    </KobalteSwitch>\n  )\n}\n\n/**\n * The switch's own label. Valid only inside a `<Switch>`: it is Kobalte's label\n * for that root's control, and outside one there is nothing to associate with.\n * A label drawn *beside* a switch — a settings row with the control trailing —\n * is plain text, and the switch takes an `aria-label` instead.\n */\nexport function SwitchLabel(props: ComponentProps<typeof KobalteSwitch.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.class)} {...rest} />\n  )\n}\n\nexport function SwitchDescription(props: ComponentProps<typeof KobalteSwitch.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteSwitch.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/tabs/tabs.d.ts

@@ -13,12 +13,30 @@ import type { ComponentProps } from 'solid-js';
 export declare function Tabs(props: ComponentProps<typeof KobalteTabs>): import("solid-js").JSX.Element;
 export type TabsListProps = ComponentProps<typeof KobalteTabs.List> & {
     appearance?: 'underline' | 'segmented';
+    /**
+     * Span the container, with the triggers at the start. For a row of tabs that
+     * heads a pane: the underline's rule then runs the pane's full width, the
+     * way the pane's other header rules do, instead of stopping at the last tab.
+     */
+    fill?: boolean;
+    /**
+     * Scroll sideways when the triggers outgrow the row, with no visible
+     * scrollbar, instead of overflowing it. Implies `fill`. The underline's rule
+     * is drawn inside the scroller so the selected mark still sits on it.
+     */
+    scrollable?: boolean;
 };
 /**
  * The underline appearance's rule is the baseline a horizontal row of tabs sits
  * on. A vertical list has no baseline — its triggers stack — so the rule is
  * dropped there; otherwise it draws as a stray line under the last trigger,
  * spanning only the list's width (the SettingsLayout rail showed exactly that).
+ *
+ * A scrolling list cannot draw that rule as its border: a scroller clips at its
+ * padding edge, and the selected trigger's mark overlaps the border by a pixel
+ * (`-mb-px`), so the mark would be cut off and the list would scroll vertically
+ * by that pixel. It reserves the pixel as padding instead and paints the rule
+ * there with an inset shadow, which lands exactly where the border was.
  */
 export declare function TabsList(props: TabsListProps): import("solid-js").JSX.Element;
 export type TabsTriggerProps = ComponentProps<typeof KobalteTabs.Trigger> & {

package/dist/components/ui/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AACxD,OAAO,KAAK,EAAY,cAAc,EAAE,MAAM,UAAU,CAAA;AA4BxD;;;;;;;;;GASG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,kCAkC7D;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,GAAG;IACpE,UAAU,CAAC,EAAE,WAAW,GAAG,WAAW,CAAA;CACvC,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kCAgB5C;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,GAAG;IAC1E,UAAU,CAAC,EAAE,WAAW,GAAG,WAAW,CAAA;CACvC,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kCAiClD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,kCAc5E"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AACxD,OAAO,KAAK,EAAY,cAAc,EAAE,MAAM,UAAU,CAAA;AA4BxD;;;;;;;;;GASG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,kCAmC7D;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,GAAG;IACpE,UAAU,CAAC,EAAE,WAAW,GAAG,WAAW,CAAA;IACtC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kCAwB5C;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,GAAG;IAC1E,UAAU,CAAC,EAAE,WAAW,GAAG,WAAW,CAAA;CACvC,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kCAkClD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,kCAe5E"}

package/dist/components/ui/tabs/tabs.js

@@ -44,6 +44,7 @@ function Tabs$1(props) {
 		value: tabs,
 		get children() {
 			return createComponent(Tabs, mergeProps({
+				"data-slot": "tabs",
 				get id() {
 					return id();
 				},
@@ -59,12 +60,27 @@ function Tabs$1(props) {
 * on. A vertical list has no baseline — its triggers stack — so the rule is
 * dropped there; otherwise it draws as a stray line under the last trigger,
 * spanning only the list's width (the SettingsLayout rail showed exactly that).
+*
+* A scrolling list cannot draw that rule as its border: a scroller clips at its
+* padding edge, and the selected trigger's mark overlaps the border by a pixel
+* (`-mb-px`), so the mark would be cut off and the list would scroll vertically
+* by that pixel. It reserves the pixel as padding instead and paints the rule
+* there with an inset shadow, which lands exactly where the border was.
 */
 function TabsList(props) {
-	const [local, rest] = splitProps(props, ["class", "appearance"]);
-	return createComponent(Tabs.List, mergeProps({ get ["class"]() {
-		return cn("inline-flex w-fit shrink-0 items-center justify-center", local.appearance === "segmented" ? "gap-0.5 rounded-lg bg-surface-hover p-0.5" : "gap-1 rounded-none border-b border-border data-[orientation=vertical]:border-b-0", "data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", local.class);
-	} }, rest));
+	const [local, rest] = splitProps(props, [
+		"class",
+		"appearance",
+		"fill",
+		"scrollable"
+	]);
+	const underline = () => local.appearance !== "segmented";
+	return createComponent(Tabs.List, mergeProps({
+		"data-slot": "tabs-list",
+		get ["class"]() {
+			return cn("shrink-0 items-center", local.fill || local.scrollable ? "flex w-full justify-start" : "inline-flex w-fit justify-center", local.scrollable && "no-scrollbar overflow-x-auto overflow-y-hidden", !underline() ? "gap-0.5 rounded-lg bg-surface-hover p-0.5" : local.scrollable ? "gap-1 rounded-none pb-px shadow-[inset_0_-1px_0_var(--border)] data-[orientation=vertical]:pb-0 data-[orientation=vertical]:shadow-none" : "gap-1 rounded-none border-b border-border data-[orientation=vertical]:border-b-0", "data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", local.class);
+		}
+	}, rest));
 }
 /**
 * The underline appearance marks the selected trigger on the edge it shares
@@ -94,6 +110,7 @@ function TabsTrigger(props) {
 		onCleanup(() => tabs.unregisterTriggerId(value, id));
 	});
 	return createComponent(Tabs.Trigger, mergeProps({
+		"data-slot": "tabs-trigger",
 		get id() {
 			return triggerId();
 		},
@@ -106,6 +123,7 @@ function TabsContent(props) {
 	const [local, rest] = splitProps(props, ["class", "aria-labelledby"]);
 	const tabs = useTabsId();
 	return createComponent(Tabs.Content, mergeProps({
+		"data-slot": "tabs-content",
 		get ["aria-labelledby"]() {
 			return local["aria-labelledby"] ?? tabs.triggerIds().get(rest.value) ?? `${tabs.id()}-trigger-${rest.value}`;
 		},

package/dist/components/ui/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["Tabs","KobalteTabs","Accessor","ComponentProps","createContext","createRenderEffect","createSignal","createUniqueId","onCleanup","splitProps","useContext","cn","TabsIdContextValue","id","orientation","triggerIds","ReadonlyMap","registerTriggerId","value","unregisterTriggerId","TabsIdContext","useTabsId","tabs","Error","props","local","rest","generatedId","setTriggerIds","Map","triggerId","current","set","get","next","delete","_$createComponent","Provider","children","_$mergeProps","class","TabsListProps","List","appearance","TabsList","TabsTriggerProps","Trigger","TabsTrigger","TabsContent","Content","aria-labelledby","Tabs","_$createComponent","KobalteTabs","_$mergeProps"],"sources":["../../../../src/components/ui/tabs/tabs.tsx"],"sourcesContent":["import { Tabs as KobalteTabs } from '@kobalte/core/tabs'\nimport type { Accessor, ComponentProps } from 'solid-js'\nimport {\n  createContext,\n  createRenderEffect,\n  createSignal,\n  createUniqueId,\n  onCleanup,\n  splitProps,\n  useContext,\n} from 'solid-js'\nimport { cn } from '#lib/utils'\n\ntype TabsIdContextValue = {\n  id: Accessor<string>\n  orientation: Accessor<'horizontal' | 'vertical'>\n  triggerIds: Accessor<ReadonlyMap<string, string>>\n  registerTriggerId: (value: string, id: string) => void\n  unregisterTriggerId: (value: string, id: string) => void\n}\n\nconst TabsIdContext = createContext<TabsIdContextValue>()\n\nfunction useTabsId() {\n  const tabs = useContext(TabsIdContext)\n  if (!tabs) throw new Error('[adea-ui]: Tabs parts must be used within Tabs.')\n  return tabs\n}\n\n/**\n * Tabs.\n *\n * For switching between sibling views of the *same* subject — a file's code,\n * diff and history. Not for moving between pages: a tab is expected to keep\n * its panel and its scroll position, which a route does not.\n *\n * `appearance=\"segmented\"` gives the joined bar KiroCrew uses inside a pane\n * where a full-width underline would collide with the panel's own header rule.\n */\nexport function Tabs(props: ComponentProps<typeof KobalteTabs>) {\n  const [local, rest] = splitProps(props, ['class', 'id'])\n  const generatedId = `tabs-${createUniqueId()}`\n  const id = () => local.id ?? generatedId\n  const [triggerIds, setTriggerIds] = createSignal<ReadonlyMap<string, string>>(new Map())\n  const tabs: TabsIdContextValue = {\n    id,\n    orientation: () => rest.orientation ?? 'horizontal',\n    triggerIds,\n    registerTriggerId: (value, triggerId) => {\n      setTriggerIds((current) => new Map(current).set(value, triggerId))\n    },\n    unregisterTriggerId: (value, triggerId) => {\n      setTriggerIds((current) => {\n        if (current.get(value) !== triggerId) return current\n        const next = new Map(current)\n        next.delete(value)\n        return next\n      })\n    },\n  }\n\n  return (\n    <TabsIdContext.Provider value={tabs}>\n      <KobalteTabs\n        id={id()}\n        class={cn(\n          'flex min-h-0 min-w-0 flex-col gap-2 data-[orientation=vertical]:flex-row',\n          local.class\n        )}\n        {...rest}\n      />\n    </TabsIdContext.Provider>\n  )\n}\n\nexport type TabsListProps = ComponentProps<typeof KobalteTabs.List> & {\n  appearance?: 'underline' | 'segmented'\n}\n\n/**\n * The underline appearance's rule is the baseline a horizontal row of tabs sits\n * on. A vertical list has no baseline — its triggers stack — so the rule is\n * dropped there; otherwise it draws as a stray line under the last trigger,\n * spanning only the list's width (the SettingsLayout rail showed exactly that).\n */\nexport function TabsList(props: TabsListProps) {\n  const [local, rest] = splitProps(props, ['class', 'appearance'])\n\n  return (\n    <KobalteTabs.List\n      class={cn(\n        'inline-flex w-fit shrink-0 items-center justify-center',\n        local.appearance === 'segmented'\n          ? 'gap-0.5 rounded-lg bg-surface-hover p-0.5'\n          : 'gap-1 rounded-none border-b border-border data-[orientation=vertical]:border-b-0',\n        'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport type TabsTriggerProps = ComponentProps<typeof KobalteTabs.Trigger> & {\n  appearance?: 'underline' | 'segmented'\n}\n\n/**\n * The underline appearance marks the selected trigger on the edge it shares\n * with the list's axis. A horizontal row reads left to right along a baseline,\n * so the mark is a bottom bar sitting on the list's rule. A vertical list stacks\n * its triggers, and a bottom bar there underlines one row of a column — it reads\n * as a divider, not a selection — so the mark moves to the inline-start edge,\n * the leading bar a side navigation uses, and the label aligns to that edge.\n *\n * The orientation is read from the root rather than from a `data-orientation`\n * selector so the vertical classes are unprefixed: a composite that replaces the\n * mark (SettingsNavigation's filled row passes `border-0`) then overrides it\n * through the ordinary class merge instead of fighting a variant-scoped border.\n */\nexport function TabsTrigger(props: TabsTriggerProps) {\n  const [local, rest] = splitProps(props, ['class', 'appearance', 'id'])\n  const tabs = useTabsId()\n  const triggerId = () => local.id ?? `${tabs.id()}-trigger-${rest.value}`\n\n  // Register before panels render, including SSR where createEffect is skipped.\n  createRenderEffect(() => {\n    const value = rest.value\n    const id = triggerId()\n    tabs.registerTriggerId(value, id)\n    onCleanup(() => tabs.unregisterTriggerId(value, id))\n  })\n\n  return (\n    <KobalteTabs.Trigger\n      id={triggerId()}\n      class={cn(\n        'inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium',\n        'transition-colors ease-out outline-none select-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'disabled:pointer-events-none disabled:opacity-50',\n        'text-foreground',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n        local.appearance === 'segmented'\n          ? 'h-control-sm rounded-md px-control-sm data-[selected]:bg-primary-subtle data-[selected]:text-foreground'\n          : tabs.orientation() === 'vertical'\n            ? 'h-control-md justify-start rounded-none border-s-2 border-transparent ps-3 pe-2 data-[selected]:border-primary'\n            : 'h-control-md -mb-px rounded-none border-b-2 border-transparent px-2 pb-2 data-[selected]:border-primary',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function TabsContent(props: ComponentProps<typeof KobalteTabs.Content>) {\n  const [local, rest] = splitProps(props, ['class', 'aria-labelledby'])\n  const tabs = useTabsId()\n  return (\n    <KobalteTabs.Content\n      aria-labelledby={\n        local['aria-labelledby'] ??\n        tabs.triggerIds().get(rest.value) ??\n        `${tabs.id()}-trigger-${rest.value}`\n      }\n      class={cn('min-h-0 min-w-0 flex-1 outline-none', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"tabs.js","names":["Tabs","KobalteTabs","Accessor","ComponentProps","createContext","createRenderEffect","createSignal","createUniqueId","onCleanup","splitProps","useContext","cn","TabsIdContextValue","id","orientation","triggerIds","ReadonlyMap","registerTriggerId","value","unregisterTriggerId","TabsIdContext","useTabsId","tabs","Error","props","local","rest","generatedId","setTriggerIds","Map","triggerId","current","set","get","next","delete","_$createComponent","Provider","children","_$mergeProps","class","TabsListProps","List","appearance","fill","scrollable","TabsList","underline","TabsTriggerProps","Trigger","TabsTrigger","TabsContent","Content","aria-labelledby","Tabs","_$createComponent","KobalteTabs","_$mergeProps"],"sources":["../../../../src/components/ui/tabs/tabs.tsx"],"sourcesContent":["import { Tabs as KobalteTabs } from '@kobalte/core/tabs'\nimport type { Accessor, ComponentProps } from 'solid-js'\nimport {\n  createContext,\n  createRenderEffect,\n  createSignal,\n  createUniqueId,\n  onCleanup,\n  splitProps,\n  useContext,\n} from 'solid-js'\nimport { cn } from '#lib/utils'\n\ntype TabsIdContextValue = {\n  id: Accessor<string>\n  orientation: Accessor<'horizontal' | 'vertical'>\n  triggerIds: Accessor<ReadonlyMap<string, string>>\n  registerTriggerId: (value: string, id: string) => void\n  unregisterTriggerId: (value: string, id: string) => void\n}\n\nconst TabsIdContext = createContext<TabsIdContextValue>()\n\nfunction useTabsId() {\n  const tabs = useContext(TabsIdContext)\n  if (!tabs) throw new Error('[adea-ui]: Tabs parts must be used within Tabs.')\n  return tabs\n}\n\n/**\n * Tabs.\n *\n * For switching between sibling views of the *same* subject — a file's code,\n * diff and history. Not for moving between pages: a tab is expected to keep\n * its panel and its scroll position, which a route does not.\n *\n * `appearance=\"segmented\"` gives the joined bar KiroCrew uses inside a pane\n * where a full-width underline would collide with the panel's own header rule.\n */\nexport function Tabs(props: ComponentProps<typeof KobalteTabs>) {\n  const [local, rest] = splitProps(props, ['class', 'id'])\n  const generatedId = `tabs-${createUniqueId()}`\n  const id = () => local.id ?? generatedId\n  const [triggerIds, setTriggerIds] = createSignal<ReadonlyMap<string, string>>(new Map())\n  const tabs: TabsIdContextValue = {\n    id,\n    orientation: () => rest.orientation ?? 'horizontal',\n    triggerIds,\n    registerTriggerId: (value, triggerId) => {\n      setTriggerIds((current) => new Map(current).set(value, triggerId))\n    },\n    unregisterTriggerId: (value, triggerId) => {\n      setTriggerIds((current) => {\n        if (current.get(value) !== triggerId) return current\n        const next = new Map(current)\n        next.delete(value)\n        return next\n      })\n    },\n  }\n\n  return (\n    <TabsIdContext.Provider value={tabs}>\n      <KobalteTabs\n        data-slot=\"tabs\"\n        id={id()}\n        class={cn(\n          'flex min-h-0 min-w-0 flex-col gap-2 data-[orientation=vertical]:flex-row',\n          local.class\n        )}\n        {...rest}\n      />\n    </TabsIdContext.Provider>\n  )\n}\n\nexport type TabsListProps = ComponentProps<typeof KobalteTabs.List> & {\n  appearance?: 'underline' | 'segmented'\n  /**\n   * Span the container, with the triggers at the start. For a row of tabs that\n   * heads a pane: the underline's rule then runs the pane's full width, the\n   * way the pane's other header rules do, instead of stopping at the last tab.\n   */\n  fill?: boolean\n  /**\n   * Scroll sideways when the triggers outgrow the row, with no visible\n   * scrollbar, instead of overflowing it. Implies `fill`. The underline's rule\n   * is drawn inside the scroller so the selected mark still sits on it.\n   */\n  scrollable?: boolean\n}\n\n/**\n * The underline appearance's rule is the baseline a horizontal row of tabs sits\n * on. A vertical list has no baseline — its triggers stack — so the rule is\n * dropped there; otherwise it draws as a stray line under the last trigger,\n * spanning only the list's width (the SettingsLayout rail showed exactly that).\n *\n * A scrolling list cannot draw that rule as its border: a scroller clips at its\n * padding edge, and the selected trigger's mark overlaps the border by a pixel\n * (`-mb-px`), so the mark would be cut off and the list would scroll vertically\n * by that pixel. It reserves the pixel as padding instead and paints the rule\n * there with an inset shadow, which lands exactly where the border was.\n */\nexport function TabsList(props: TabsListProps) {\n  const [local, rest] = splitProps(props, ['class', 'appearance', 'fill', 'scrollable'])\n  const underline = () => local.appearance !== 'segmented'\n\n  return (\n    <KobalteTabs.List\n      data-slot=\"tabs-list\"\n      class={cn(\n        'shrink-0 items-center',\n        local.fill || local.scrollable\n          ? 'flex w-full justify-start'\n          : 'inline-flex w-fit justify-center',\n        local.scrollable && 'no-scrollbar overflow-x-auto overflow-y-hidden',\n        !underline()\n          ? 'gap-0.5 rounded-lg bg-surface-hover p-0.5'\n          : local.scrollable\n            ? 'gap-1 rounded-none pb-px shadow-[inset_0_-1px_0_var(--border)] data-[orientation=vertical]:pb-0 data-[orientation=vertical]:shadow-none'\n            : 'gap-1 rounded-none border-b border-border data-[orientation=vertical]:border-b-0',\n        'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport type TabsTriggerProps = ComponentProps<typeof KobalteTabs.Trigger> & {\n  appearance?: 'underline' | 'segmented'\n}\n\n/**\n * The underline appearance marks the selected trigger on the edge it shares\n * with the list's axis. A horizontal row reads left to right along a baseline,\n * so the mark is a bottom bar sitting on the list's rule. A vertical list stacks\n * its triggers, and a bottom bar there underlines one row of a column — it reads\n * as a divider, not a selection — so the mark moves to the inline-start edge,\n * the leading bar a side navigation uses, and the label aligns to that edge.\n *\n * The orientation is read from the root rather than from a `data-orientation`\n * selector so the vertical classes are unprefixed: a composite that replaces the\n * mark (SettingsNavigation's filled row passes `border-0`) then overrides it\n * through the ordinary class merge instead of fighting a variant-scoped border.\n */\nexport function TabsTrigger(props: TabsTriggerProps) {\n  const [local, rest] = splitProps(props, ['class', 'appearance', 'id'])\n  const tabs = useTabsId()\n  const triggerId = () => local.id ?? `${tabs.id()}-trigger-${rest.value}`\n\n  // Register before panels render, including SSR where createEffect is skipped.\n  createRenderEffect(() => {\n    const value = rest.value\n    const id = triggerId()\n    tabs.registerTriggerId(value, id)\n    onCleanup(() => tabs.unregisterTriggerId(value, id))\n  })\n\n  return (\n    <KobalteTabs.Trigger\n      data-slot=\"tabs-trigger\"\n      id={triggerId()}\n      class={cn(\n        'inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium',\n        'transition-colors ease-out outline-none select-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'disabled:pointer-events-none disabled:opacity-50',\n        'text-foreground',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n        local.appearance === 'segmented'\n          ? 'h-control-sm rounded-md px-control-sm data-[selected]:bg-primary-subtle data-[selected]:text-foreground'\n          : tabs.orientation() === 'vertical'\n            ? 'h-control-md justify-start rounded-none border-s-2 border-transparent ps-3 pe-2 data-[selected]:border-primary'\n            : 'h-control-md -mb-px rounded-none border-b-2 border-transparent px-2 pb-2 data-[selected]:border-primary',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function TabsContent(props: ComponentProps<typeof KobalteTabs.Content>) {\n  const [local, rest] = splitProps(props, ['class', 'aria-labelledby'])\n  const tabs = useTabsId()\n  return (\n    <KobalteTabs.Content\n      data-slot=\"tabs-content\"\n      aria-labelledby={\n        local['aria-labelledby'] ??\n        tabs.triggerIds().get(rest.value) ??\n        `${tabs.id()}-trigger-${rest.value}`\n      }\n      class={cn('min-h-0 min-w-0 flex-1 outline-none', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/toggle/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,EAAwC,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGvF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc;;;8EA8B1B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAA;AAEnG,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,kCASxC"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,EAAwC,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGvF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc;;;8EA8B1B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAA;AAEnG,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,kCAUxC"}

package/dist/components/ui/toggle/toggle.js

@@ -56,12 +56,15 @@ function Toggle(props) {
 		"size",
 		"class"
 	]);
-	return createComponent(ToggleButton, mergeProps({ get ["class"]() {
-		return cn(toggleVariants({
-			variant: local.variant,
-			size: local.size
-		}), local.class);
-	} }, rest));
+	return createComponent(ToggleButton, mergeProps({
+		"data-slot": "toggle",
+		get ["class"]() {
+			return cn(toggleVariants({
+				variant: local.variant,
+				size: local.size
+			}), local.class);
+		}
+	}, rest));
 }
 //#endregion
 export { Toggle, toggleVariants };

package/dist/components/ui/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","names":["ToggleButton","ComponentProps","splitProps","cva","controlInteractive","controlSize","VariantProps","cn","toggleVariants","variants","variant","default","outline","subtle","size","xs","sm","md","lg","xl","defaultVariants","ToggleProps","Toggle","props","local","rest","_$createComponent","_$mergeProps","class","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/ui/toggle/toggle.tsx"],"sourcesContent":["import { ToggleButton } from '@kobalte/core/toggle-button'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cva, controlInteractive, controlSize, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Toggle.\n *\n * A button that stays pressed. The difference from Button is state, not looks:\n * a Toggle reports `aria-pressed` and holds its pressed appearance until\n * released, which is what makes it right for a formatting control and wrong\n * for a command.\n *\n * Kobalte supplies the pressed state and the keyboard behaviour; the styling\n * adds the one thing a headless primitive cannot know — that a pressed toggle\n * in a toolbar should read as *filled*, not merely outlined. Pressed reads on\n * the accent rung (`primary-subtle` with the accent glyph): pressed is the\n * control's on state, the same family the checked checkbox and switch own, so\n * it keeps a touch of the user's accent instead of a neutral fill.\n */\nexport const toggleVariants = cva(\n  `${controlInteractive} inline-flex items-center justify-center rounded-md font-medium whitespace-nowrap select-none hover:bg-surface-hover hover:text-foreground data-[pressed]:bg-primary-subtle data-[pressed]:text-primary disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        /** Sits inside a field or toolbar that already has a fill. */\n        outline: 'border border-border bg-transparent',\n        /** Filled even when unpressed, for a segmented control's idle item. */\n        subtle: 'bg-surface-hover',\n      },\n      size: {\n        '2xs': `${controlSize['2xs']} [&_svg]:size-3`,\n        xs: `${controlSize.xs} [&_svg]:size-3.5`,\n        sm: `${controlSize.sm} [&_svg]:size-3.5`,\n        md: `${controlSize.md} [&_svg]:size-4`,\n        lg: `${controlSize.lg} [&_svg]:size-4`,\n        xl: `${controlSize.xl} [&_svg]:size-5`,\n        '2xl': `${controlSize['2xl']} [&_svg]:size-6`,\n        'icon-2xs': 'size-control-2xs p-0 [&_svg]:size-3',\n        'icon-xs': 'size-control-xs p-0 [&_svg]:size-3.5',\n        'icon-sm': 'size-control-sm p-0 [&_svg]:size-3.5',\n        'icon-md': 'size-control-md p-0 [&_svg]:size-4',\n        'icon-lg': 'size-control-lg p-0 [&_svg]:size-4',\n        'icon-xl': 'size-control-xl p-0 [&_svg]:size-5',\n        'icon-2xl': 'size-control-2xl p-0 [&_svg]:size-6',\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'md' },\n  }\n)\n\nexport type ToggleProps = ComponentProps<typeof ToggleButton> & VariantProps<typeof toggleVariants>\n\nexport function Toggle(props: ToggleProps) {\n  const [local, rest] = splitProps(props, ['variant', 'size', 'class'])\n\n  return (\n    <ToggleButton\n      class={cn(toggleVariants({ variant: local.variant, size: local.size }), local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,IAAaQ,iBAAiBL,IAC5B,GAAGC,mBAAkB,wSACrB;CACEK,UAAU;EACRC,SAAS;GACPC,SAAS;;GAETC,SAAS;;GAETC,QAAQ;EACV;EACAC,MAAM;GACJ,OAAO,GAAGT,YAAY,OAAM;GAC5BU,IAAI,GAAGV,YAAYU,GAAE;GACrBC,IAAI,GAAGX,YAAYW,GAAE;GACrBC,IAAI,GAAGZ,YAAYY,GAAE;GACrBC,IAAI,GAAGb,YAAYa,GAAE;GACrBC,IAAI,GAAGd,YAAYc,GAAE;GACrB,OAAO,GAAGd,YAAY,OAAM;GAC5B,YAAY;GACZ,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,YAAY;EACd;CACF;CACAe,iBAAiB;EAAEV,SAAS;EAAWI,MAAM;CAAK;AACpD,CACF;AAIA,SAAgBQ,OAAOC,OAAoB;CACzC,MAAM,CAACC,OAAOC,QAAQvB,WAAWqB,OAAO;EAAC;EAAW;EAAQ;CAAO,CAAC;CAEpE,OAAAG,gBACG1B,cAAY2B,WAAA,EAAA,KAAA,WAAA;EAAA,OACJpB,GAAGC,eAAe;GAAEE,SAASc,MAAMd;GAASI,MAAMU,MAAMV;EAAK,CAAC,GAAGU,MAAMI,KAAK;CAAC,EAAA,GAChFH,IAAI,CAAA;AAGd"}
+{"version":3,"file":"toggle.js","names":["ToggleButton","ComponentProps","splitProps","cva","controlInteractive","controlSize","VariantProps","cn","toggleVariants","variants","variant","default","outline","subtle","size","xs","sm","md","lg","xl","defaultVariants","ToggleProps","Toggle","props","local","rest","_$createComponent","_$mergeProps","class","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/ui/toggle/toggle.tsx"],"sourcesContent":["import { ToggleButton } from '@kobalte/core/toggle-button'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cva, controlInteractive, controlSize, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Toggle.\n *\n * A button that stays pressed. The difference from Button is state, not looks:\n * a Toggle reports `aria-pressed` and holds its pressed appearance until\n * released, which is what makes it right for a formatting control and wrong\n * for a command.\n *\n * Kobalte supplies the pressed state and the keyboard behaviour; the styling\n * adds the one thing a headless primitive cannot know — that a pressed toggle\n * in a toolbar should read as *filled*, not merely outlined. Pressed reads on\n * the accent rung (`primary-subtle` with the accent glyph): pressed is the\n * control's on state, the same family the checked checkbox and switch own, so\n * it keeps a touch of the user's accent instead of a neutral fill.\n */\nexport const toggleVariants = cva(\n  `${controlInteractive} inline-flex items-center justify-center rounded-md font-medium whitespace-nowrap select-none hover:bg-surface-hover hover:text-foreground data-[pressed]:bg-primary-subtle data-[pressed]:text-primary disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        /** Sits inside a field or toolbar that already has a fill. */\n        outline: 'border border-border bg-transparent',\n        /** Filled even when unpressed, for a segmented control's idle item. */\n        subtle: 'bg-surface-hover',\n      },\n      size: {\n        '2xs': `${controlSize['2xs']} [&_svg]:size-3`,\n        xs: `${controlSize.xs} [&_svg]:size-3.5`,\n        sm: `${controlSize.sm} [&_svg]:size-3.5`,\n        md: `${controlSize.md} [&_svg]:size-4`,\n        lg: `${controlSize.lg} [&_svg]:size-4`,\n        xl: `${controlSize.xl} [&_svg]:size-5`,\n        '2xl': `${controlSize['2xl']} [&_svg]:size-6`,\n        'icon-2xs': 'size-control-2xs p-0 [&_svg]:size-3',\n        'icon-xs': 'size-control-xs p-0 [&_svg]:size-3.5',\n        'icon-sm': 'size-control-sm p-0 [&_svg]:size-3.5',\n        'icon-md': 'size-control-md p-0 [&_svg]:size-4',\n        'icon-lg': 'size-control-lg p-0 [&_svg]:size-4',\n        'icon-xl': 'size-control-xl p-0 [&_svg]:size-5',\n        'icon-2xl': 'size-control-2xl p-0 [&_svg]:size-6',\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'md' },\n  }\n)\n\nexport type ToggleProps = ComponentProps<typeof ToggleButton> & VariantProps<typeof toggleVariants>\n\nexport function Toggle(props: ToggleProps) {\n  const [local, rest] = splitProps(props, ['variant', 'size', 'class'])\n\n  return (\n    <ToggleButton\n      data-slot=\"toggle\"\n      class={cn(toggleVariants({ variant: local.variant, size: local.size }), local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,IAAaQ,iBAAiBL,IAC5B,GAAGC,mBAAkB,wSACrB;CACEK,UAAU;EACRC,SAAS;GACPC,SAAS;;GAETC,SAAS;;GAETC,QAAQ;EACV;EACAC,MAAM;GACJ,OAAO,GAAGT,YAAY,OAAM;GAC5BU,IAAI,GAAGV,YAAYU,GAAE;GACrBC,IAAI,GAAGX,YAAYW,GAAE;GACrBC,IAAI,GAAGZ,YAAYY,GAAE;GACrBC,IAAI,GAAGb,YAAYa,GAAE;GACrBC,IAAI,GAAGd,YAAYc,GAAE;GACrB,OAAO,GAAGd,YAAY,OAAM;GAC5B,YAAY;GACZ,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,YAAY;EACd;CACF;CACAe,iBAAiB;EAAEV,SAAS;EAAWI,MAAM;CAAK;AACpD,CACF;AAIA,SAAgBQ,OAAOC,OAAoB;CACzC,MAAM,CAACC,OAAOC,QAAQvB,WAAWqB,OAAO;EAAC;EAAW;EAAQ;CAAO,CAAC;CAEpE,OAAAG,gBACG1B,cAAY2B,WAAA;EAAA,aAAA;EAAA,KAAA,WAAA;GAAA,OAEJpB,GAAGC,eAAe;IAAEE,SAASc,MAAMd;IAASI,MAAMU,MAAMV;GAAK,CAAC,GAAGU,MAAMI,KAAK;EAAC;CAAA,GAChFH,IAAI,CAAA;AAGd"}

package/dist/components/ui/toggle-group/toggle-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toggle-group/toggle-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD;;;;;;;;;;;;;GAaG;AACH;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,SAAS,CAAC,CAAA;IACxD,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;IAClD,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kCAgBlD;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,GAC/E,YAAY,CAAC,OAAO,cAAc,CAAC,CAAA;AAWrC,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,kCAiB1D"}
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toggle-group/toggle-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD;;;;;;;;;;;;;GAaG;AACH;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,SAAS,CAAC,CAAA;IACxD,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;IAClD,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kCAiBlD;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,GAC/E,YAAY,CAAC,OAAO,cAAc,CAAC,CAAA;AAWrC,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,kCAkB1D"}

package/dist/components/ui/toggle-group/toggle-group.js

@@ -11,6 +11,7 @@ function ToggleGroup$1(props) {
 		"multiple"
 	]);
 	return createComponent(ToggleGroup, mergeProps({
+		"data-slot": "toggle-group",
 		get multiple() {
 			return local.multiple ?? false;
 		},
@@ -33,6 +34,7 @@ function ToggleGroupItem(props) {
 		"onKeyDown"
 	]);
 	return createComponent(ToggleGroup.Item, mergeProps({
+		"data-slot": "toggle-group-item",
 		get ["class"]() {
 			return cn(toggleVariants({
 				variant: local.variant,

package/dist/components/ui/toggle-group/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.js","names":["ToggleGroup","KobalteToggleGroup","ComponentProps","splitProps","VariantProps","cn","toggleVariants","ToggleGroupProps","Omit","multiple","variant","size","attached","props","local","rest","_$createComponent","_$mergeProps","class","ToggleGroupItemProps","Item","invokeEventHandler","handler","event","Event","Array","isArray","callback","data","ToggleGroupItem","onKeyDown","key","stopPropagation","ToggleGroup","_$createComponent","KobalteToggleGroup","_$mergeProps"],"sources":["../../../../src/components/ui/toggle-group/toggle-group.tsx"],"sourcesContent":["import { ToggleGroup as KobalteToggleGroup } from '@kobalte/core/toggle-group'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport type { VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\nimport { toggleVariants } from '../toggle/toggle'\n\n/**\n * ToggleGroup.\n *\n * A set of related toggles that behave as one control: at most one pressed\n * (`multiple={false}`, the default) or any number (`multiple={true}`). The\n * group owns the selection and the roving focus, which is what makes arrow keys\n * move between items and a screen reader announce the position within the set.\n * A row of independent Toggles looks identical and does neither.\n *\n * `attached` joins the items into one rounded run for a segmented control. The\n * joining lives on the *group*, via child selectors, so an item never has to\n * know whether it sits at an end — which is also where the border collapse\n * (`-ms-px`) belongs.\n */\n/**\n * `multiple` is optional here although Kobalte requires it: the primitive models\n * single and multiple selection as two shapes, which forces every caller to state\n * the obvious. Defaulting to single selection keeps the common case a one-word\n * component, and a caller that wants many passes `multiple`.\n */\nexport type ToggleGroupProps = Omit<ComponentProps<typeof KobalteToggleGroup>, 'multiple'> & {\n  multiple?: boolean\n  variant?: VariantProps<typeof toggleVariants>['variant']\n  size?: VariantProps<typeof toggleVariants>['size']\n  /** Join the items into one rounded run instead of a spaced row. */\n  attached?: boolean\n}\n\nexport function ToggleGroup(props: ToggleGroupProps) {\n  const [local, rest] = splitProps(props, ['class', 'attached', 'multiple'])\n\n  return (\n    <KobalteToggleGroup\n      multiple={local.multiple ?? false}\n      class={cn(\n        'flex w-fit flex-row items-center',\n        local.attached\n          ? '[&>*:first-child]:rounded-e-none [&>*:last-child]:rounded-s-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ms-px'\n          : 'gap-1',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport type ToggleGroupItemProps = ComponentProps<typeof KobalteToggleGroup.Item> &\n  VariantProps<typeof toggleVariants>\n\nfunction invokeEventHandler(handler: unknown, event: Event) {\n  if (Array.isArray(handler)) {\n    const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]\n    callback(data, event)\n  } else if (typeof handler === 'function') {\n    ;(handler as (event: Event) => void)(event)\n  }\n}\n\nexport function ToggleGroupItem(props: ToggleGroupItemProps) {\n  const [local, rest] = splitProps(props, ['class', 'variant', 'size', 'onKeyDown'])\n\n  return (\n    <KobalteToggleGroup.Item\n      class={cn(toggleVariants({ variant: local.variant, size: local.size }), local.class)}\n      onKeyDown={(event) => {\n        invokeEventHandler(local.onKeyDown, event)\n        // The group root's selection collection clears the selection and marks\n        // Escape handled, which starves an enclosing dialog or drawer of the\n        // Escape it needs to dismiss. Stopping at the focused item is the only\n        // point before that handler, so pass Escape through from here.\n        if (event.key === 'Escape') event.stopPropagation()\n      }}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;AAmCA,SAAgBA,cAAYa,OAAyB;CACnD,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO;EAAC;EAAS;EAAY;CAAU,CAAC;CAEzE,OAAAG,gBACGf,aAAkBgB,WAAA;EAAA,IACjBR,WAAQ;GAAA,OAAEK,MAAML,YAAY;EAAK;EAAA,KAAA,WAAA;GAAA,OAC1BJ,GACL,oCACAS,MAAMF,WACF,0JACA,SACJE,MAAMI,KACR;EAAC;CAAA,GACGH,IAAI,CAAA;AAGd;AAKA,SAASM,mBAAmBC,SAAkBC,OAAc;CAC1D,IAAIE,MAAMC,QAAQJ,OAAO,GAAG;EAC1B,MAAM,CAACK,UAAUC,QAAQN;EACzBK,SAASC,MAAML,KAAK;CACtB,OAAO,IAAI,OAAOD,YAAY,YAC3B,QAAoCC,KAAK;AAE9C;AAEA,SAAgBM,gBAAgBhB,OAA6B;CAC3D,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO;EAAC;EAAS;EAAW;EAAQ;CAAW,CAAC;CAEjF,OAAAG,gBACGf,YAAmBmB,MAAIH,WAAA;EAAA,KAAA,WAAA;GAAA,OACfZ,GAAGC,eAAe;IAAEI,SAASI,MAAMJ;IAASC,MAAMG,MAAMH;GAAK,CAAC,GAAGG,MAAMI,KAAK;EAAC;EACpFY,YAAYP,UAAU;GACpBF,mBAAmBP,MAAMgB,WAAWP,KAAK;GAKzC,IAAIA,MAAMQ,QAAQ,UAAUR,MAAMS,gBAAgB;EACpD;CAAC,GACGjB,IAAI,CAAA;AAGd"}
+{"version":3,"file":"toggle-group.js","names":["ToggleGroup","KobalteToggleGroup","ComponentProps","splitProps","VariantProps","cn","toggleVariants","ToggleGroupProps","Omit","multiple","variant","size","attached","props","local","rest","_$createComponent","_$mergeProps","class","ToggleGroupItemProps","Item","invokeEventHandler","handler","event","Event","Array","isArray","callback","data","ToggleGroupItem","onKeyDown","key","stopPropagation","ToggleGroup","_$createComponent","KobalteToggleGroup","_$mergeProps"],"sources":["../../../../src/components/ui/toggle-group/toggle-group.tsx"],"sourcesContent":["import { ToggleGroup as KobalteToggleGroup } from '@kobalte/core/toggle-group'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport type { VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\nimport { toggleVariants } from '../toggle/toggle'\n\n/**\n * ToggleGroup.\n *\n * A set of related toggles that behave as one control: at most one pressed\n * (`multiple={false}`, the default) or any number (`multiple={true}`). The\n * group owns the selection and the roving focus, which is what makes arrow keys\n * move between items and a screen reader announce the position within the set.\n * A row of independent Toggles looks identical and does neither.\n *\n * `attached` joins the items into one rounded run for a segmented control. The\n * joining lives on the *group*, via child selectors, so an item never has to\n * know whether it sits at an end — which is also where the border collapse\n * (`-ms-px`) belongs.\n */\n/**\n * `multiple` is optional here although Kobalte requires it: the primitive models\n * single and multiple selection as two shapes, which forces every caller to state\n * the obvious. Defaulting to single selection keeps the common case a one-word\n * component, and a caller that wants many passes `multiple`.\n */\nexport type ToggleGroupProps = Omit<ComponentProps<typeof KobalteToggleGroup>, 'multiple'> & {\n  multiple?: boolean\n  variant?: VariantProps<typeof toggleVariants>['variant']\n  size?: VariantProps<typeof toggleVariants>['size']\n  /** Join the items into one rounded run instead of a spaced row. */\n  attached?: boolean\n}\n\nexport function ToggleGroup(props: ToggleGroupProps) {\n  const [local, rest] = splitProps(props, ['class', 'attached', 'multiple'])\n\n  return (\n    <KobalteToggleGroup\n      data-slot=\"toggle-group\"\n      multiple={local.multiple ?? false}\n      class={cn(\n        'flex w-fit flex-row items-center',\n        local.attached\n          ? '[&>*:first-child]:rounded-e-none [&>*:last-child]:rounded-s-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ms-px'\n          : 'gap-1',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport type ToggleGroupItemProps = ComponentProps<typeof KobalteToggleGroup.Item> &\n  VariantProps<typeof toggleVariants>\n\nfunction invokeEventHandler(handler: unknown, event: Event) {\n  if (Array.isArray(handler)) {\n    const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]\n    callback(data, event)\n  } else if (typeof handler === 'function') {\n    ;(handler as (event: Event) => void)(event)\n  }\n}\n\nexport function ToggleGroupItem(props: ToggleGroupItemProps) {\n  const [local, rest] = splitProps(props, ['class', 'variant', 'size', 'onKeyDown'])\n\n  return (\n    <KobalteToggleGroup.Item\n      data-slot=\"toggle-group-item\"\n      class={cn(toggleVariants({ variant: local.variant, size: local.size }), local.class)}\n      onKeyDown={(event) => {\n        invokeEventHandler(local.onKeyDown, event)\n        // The group root's selection collection clears the selection and marks\n        // Escape handled, which starves an enclosing dialog or drawer of the\n        // Escape it needs to dismiss. Stopping at the focused item is the only\n        // point before that handler, so pass Escape through from here.\n        if (event.key === 'Escape') event.stopPropagation()\n      }}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;AAmCA,SAAgBA,cAAYa,OAAyB;CACnD,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO;EAAC;EAAS;EAAY;CAAU,CAAC;CAEzE,OAAAG,gBACGf,aAAkBgB,WAAA;EAAA,aAAA;EAAA,IAEjBR,WAAQ;GAAA,OAAEK,MAAML,YAAY;EAAK;EAAA,KAAA,WAAA;GAAA,OAC1BJ,GACL,oCACAS,MAAMF,WACF,0JACA,SACJE,MAAMI,KACR;EAAC;CAAA,GACGH,IAAI,CAAA;AAGd;AAKA,SAASM,mBAAmBC,SAAkBC,OAAc;CAC1D,IAAIE,MAAMC,QAAQJ,OAAO,GAAG;EAC1B,MAAM,CAACK,UAAUC,QAAQN;EACzBK,SAASC,MAAML,KAAK;CACtB,OAAO,IAAI,OAAOD,YAAY,YAC3B,QAAoCC,KAAK;AAE9C;AAEA,SAAgBM,gBAAgBhB,OAA6B;CAC3D,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO;EAAC;EAAS;EAAW;EAAQ;CAAW,CAAC;CAEjF,OAAAG,gBACGf,YAAmBmB,MAAIH,WAAA;EAAA,aAAA;EAAA,KAAA,WAAA;GAAA,OAEfZ,GAAGC,eAAe;IAAEI,SAASI,MAAMJ;IAASC,MAAMG,MAAMH;GAAK,CAAC,GAAGG,MAAMI,KAAK;EAAC;EACpFY,YAAYP,UAAU;GACpBF,mBAAmBP,MAAMgB,WAAWP,KAAK;GAKzC,IAAIA,MAAMQ,QAAQ,UAAUR,MAAMS,gBAAgB;EACpD;CAAC,GACGjB,IAAI,CAAA;AAGd"}

package/dist/components/ui/typography/typography.d.ts

@@ -59,9 +59,16 @@ export declare function Heading<T extends ValidComponent = 'h2'>(props: HeadingP
  * foreground without the caller restating it.
  *
  * Defaults: `body` renders a `p`, `code` a `code`, every other variant a `span`.
+ *
+ * `overline` is the small uppercase label above a group — a list group's
+ * heading, a settings navigation group, an eyebrow over a page title. It is the
+ * one variant whose tone defaults to `muted` rather than inheriting, because an
+ * overline in the body foreground competes with the heading it introduces. Pass
+ * `tone` to override. It labels a group; it is not a heading, so it renders a
+ * `span` and stays out of the document outline.
  */
 export declare const textVariants: (props?: ({
-    variant?: "body" | "caption" | "code" | "label" | "strong" | "micro" | null | undefined;
+    variant?: "body" | "caption" | "code" | "label" | "strong" | "overline" | "micro" | null | undefined;
     tone?: "inherit" | "foreground" | "muted" | null | undefined;
     numeric?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -71,9 +78,13 @@ export declare const textElement: {
     readonly strong: "span";
     readonly caption: "span";
     readonly micro: "span";
+    readonly overline: "span";
     readonly code: "code";
 };
+/** The tone a variant takes when the caller names none: muted for `overline`, else inherit. */
+export declare function textDefaultTone(variant: TextVariant | null | undefined): "muted" | undefined;
 type TextVariantProps = VariantProps<typeof textVariants>;
+type TextVariant = keyof typeof textElement;
 export type TextProps<T extends ValidComponent = 'p'> = PolymorphicProps<T, TextVariantProps & {
     class?: string;
 }>;

package/dist/components/ui/typography/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/typography/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,EAAmC,KAAK,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/E,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,eAAe;;;;;8EAsC1B,CAAA;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;CAOjB,CAAA;AAEV,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAA;AAG/D,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,IAAI,IAAI,gBAAgB,CAC1E,CAAC,EACD,mBAAmB,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CACF,CAAA;AAED,wBAAgB,OAAO,CAAC,CAAC,SAAS,cAAc,GAAG,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,kCA0B9E;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY;;;;8EA6BvB,CAAA;AAEF,eAAO,MAAM,WAAW;;;;;;;CAOd,CAAA;AAEV,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAGzD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,IAAI,gBAAgB,CACtE,CAAC,EACD,gBAAgB,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CACF,CAAA;AAED,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,kCAoBvE"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/typography/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,EAAmC,KAAK,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/E,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,eAAe;;;;;8EAsC1B,CAAA;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;CAOjB,CAAA;AAEV,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAA;AAG/D,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,IAAI,IAAI,gBAAgB,CAC1E,CAAC,EACD,mBAAmB,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CACF,CAAA;AAED,wBAAgB,OAAO,CAAC,CAAC,SAAS,cAAc,GAAG,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,kCA0B9E;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,YAAY;;;;8EA+BvB,CAAA;AAEF,eAAO,MAAM,WAAW;;;;;;;;CAQd,CAAA;AAEV,+FAA+F;AAC/F,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,uBAEtE;AAED,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AACzD,KAAK,WAAW,GAAG,MAAM,OAAO,WAAW,CAAA;AAE3C,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,IAAI,gBAAgB,CACtE,CAAC,EACD,gBAAgB,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CACF,CAAA;AAED,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,kCAwBvE"}

package/dist/components/ui/typography/typography.js

@@ -112,6 +112,13 @@ function Heading(props) {
 * foreground without the caller restating it.
 *
 * Defaults: `body` renders a `p`, `code` a `code`, every other variant a `span`.
+*
+* `overline` is the small uppercase label above a group — a list group's
+* heading, a settings navigation group, an eyebrow over a page title. It is the
+* one variant whose tone defaults to `muted` rather than inheriting, because an
+* overline in the body foreground competes with the heading it introduces. Pass
+* `tone` to override. It labels a group; it is not a heading, so it renders a
+* `span` and stays out of the document outline.
 */
 var textVariants = /* @__PURE__ */ cva("", {
 	variants: {
@@ -126,6 +133,8 @@ var textVariants = /* @__PURE__ */ cva("", {
 			caption: "text-xs",
 			/** 11px / 500. The floor: keyboard keys, the status bar. */
 			micro: "text-2xs font-medium",
+			/** 11px / 500, uppercase and tracked. A group label or eyebrow; muted by default. */
+			overline: "text-2xs font-medium tracking-wide uppercase",
 			/** 12px mono. Ids, paths, hashes, inline code. */
 			code: "font-code text-code"
 		},
@@ -147,8 +156,13 @@ var textElement = {
 	strong: "span",
 	caption: "span",
 	micro: "span",
+	overline: "span",
 	code: "code"
 };
+/** The tone a variant takes when the caller names none: muted for `overline`, else inherit. */
+function textDefaultTone(variant) {
+	return variant === "overline" ? "muted" : void 0;
+}
 function Text(props) {
 	const [local, rest] = splitProps(props, [
 		"as",
@@ -165,13 +179,13 @@ function Text(props) {
 		get ["class"]() {
 			return cn(textVariants({
 				variant: local.variant,
-				tone: local.tone,
+				tone: local.tone ?? textDefaultTone(local.variant),
 				numeric: local.numeric
 			}), local.class);
 		}
 	}, rest));
 }
 //#endregion
-export { Heading, Text, headingElement, headingVariants, textElement, textVariants };
+export { Heading, Text, headingElement, headingVariants, textDefaultTone, textElement, textVariants };
 
 //# sourceMappingURL=typography.js.map

package/dist/components/ui/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","names":["Polymorphic","PolymorphicProps","ComponentProps","splitProps","ValidComponent","cva","VariantProps","cn","headingVariants","variants","size","display","title","page","section","card","subsection","leading","rung","none","numeric","true","tone","inherit","foreground","muted","defaultVariants","headingElement","const","HeadingVariantProps","HeadingSize","HeadingProps","T","class","Heading","props","local","rest","as","_$createComponent","_$mergeProps","textVariants","variant","body","label","strong","caption","micro","code","textElement","TextVariantProps","TextVariant","TextProps","Text","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/ui/typography/typography.tsx"],"sourcesContent":["import { Polymorphic, type PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { type ComponentProps, splitProps, type ValidComponent } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Typography.\n *\n * The type ladder in `theme.css` has eight rungs, each with its own leading. These\n * two components are where a rung is paired with its weight and tracking, so a call\n * site names a *role* — a page title, a section heading, a caption — and never\n * re-decides `text-xl font-semibold tracking-tight` for itself. Twenty call sites\n * that each choose a size and a weight drift; twenty that name a role cannot.\n *\n * **Size is visual; the element is the document outline.** They are separate\n * decisions and the API keeps them separate. Each size has a conventional default\n * element (`display`, `title` and `page` render an `h1`, `section` an `h2`, `card`\n * an `h3`, `subsection` an `h4`) so the common case needs no prop, but the default\n * is a convenience, not a coupling: a card-sized title that is the first heading\n * in a settings section is an `h2`, so it says `as=\"h2\"`. Never pick a `size` to get\n * a heading level, and never pick an element to get a size.\n *\n * Headings are 600, and weights stop at 600 — on a dark surface a bold word blooms.\n * Leading comes from the rung; `leading=\"none\"` is for a title whose surrounding\n * stack already sets the rhythm (a card or dialog header), and is the only other\n * option.\n */\n// cva only returns a closure. A heading-only consumer must discard Text's recipe.\nexport const headingVariants = /* @__PURE__ */ cva('font-semibold', {\n  variants: {\n    size: {\n      /** 30px. An app-level headline — a first-run or empty-app screen. Once per app. */\n      display: 'text-3xl tracking-tight',\n      /** 24px. A landing title or a headline figure larger than a stat's. */\n      title: 'text-2xl tracking-tight',\n      /** 20px. The title of a page (`PageHeaderTitle`). */\n      page: 'text-xl tracking-tight',\n      /** 18px. A section heading inside a page (`PageSection`). */\n      section: 'text-lg tracking-tight',\n      /** 16px. A card, dialog, drawer or settings-section title. */\n      card: 'text-base tracking-tight',\n      /** 14px. A heading inside a compact surface: a sheet, a chart, a column. */\n      subsection: 'text-sm',\n    },\n    leading: {\n      /** The rung's own line-height from `theme.css`. */\n      rung: '',\n      /** Line-height 1, for a title whose container's gap sets the rhythm. */\n      none: 'leading-none',\n    },\n    /** Tabular figures, so a row of numbers can be compared without digits shifting. */\n    numeric: {\n      true: 'tabular-nums',\n    },\n    tone: {\n      /** Inherit the surrounding colour — right on every surface by construction. */\n      inherit: '',\n      foreground: 'text-foreground',\n      muted: 'text-muted-foreground',\n    },\n  },\n  defaultVariants: {\n    size: 'section',\n    leading: 'rung',\n    tone: 'inherit',\n  },\n})\n\n/**\n * The conventional element for each heading size. Exported so a test (and a\n * reader) can see the whole mapping in one place; pass `as` to depart from it.\n */\nexport const headingElement = {\n  display: 'h1',\n  title: 'h1',\n  page: 'h1',\n  section: 'h2',\n  card: 'h3',\n  subsection: 'h4',\n} as const\n\ntype HeadingVariantProps = VariantProps<typeof headingVariants>\ntype HeadingSize = keyof typeof headingElement\n\nexport type HeadingProps<T extends ValidComponent = 'h2'> = PolymorphicProps<\n  T,\n  HeadingVariantProps & {\n    class?: string\n  }\n>\n\nexport function Heading<T extends ValidComponent = 'h2'>(props: HeadingProps<T>) {\n  const [local, rest] = splitProps(props as HeadingProps & { as?: ValidComponent }, [\n    'as',\n    'size',\n    'leading',\n    'numeric',\n    'tone',\n    'class',\n  ])\n\n  return (\n    <Polymorphic\n      as={local.as ?? headingElement[(local.size ?? 'section') as HeadingSize]}\n      data-slot=\"heading\"\n      class={cn(\n        headingVariants({\n          size: local.size,\n          leading: local.leading,\n          numeric: local.numeric,\n          tone: local.tone,\n        }),\n        local.class\n      )}\n      {...(rest as ComponentProps<'h2'>)}\n    />\n  )\n}\n\n/**\n * Text.\n *\n * Everything that is not a heading. Body and strong copy use the content font\n * axis; labels, captions and microcopy inherit the UI face. Code uses its own\n * family and size axis for anything a user compares character by character.\n *\n * `tone` is a separate axis from `variant` because \"secondary\" is a colour\n * decision, not a size: a muted caption and a muted body line are both common.\n * The default inherits, so text on a filled surface picks up that surface's\n * foreground without the caller restating it.\n *\n * Defaults: `body` renders a `p`, `code` a `code`, every other variant a `span`.\n */\nexport const textVariants = /* @__PURE__ */ cva('', {\n  variants: {\n    variant: {\n      /** 14px / 400. Body copy and descriptions. */\n      body: 'font-content text-content',\n      /** 14px / 500. Labels, control text, list-row titles. */\n      label: 'text-sm font-medium',\n      /** 14px / 600. Emphasis inside body copy. */\n      strong: 'font-content text-content font-semibold',\n      /** 12px / 400. Metadata, secondary rows, units. */\n      caption: 'text-xs',\n      /** 11px / 500. The floor: keyboard keys, the status bar. */\n      micro: 'text-2xs font-medium',\n      /** 12px mono. Ids, paths, hashes, inline code. */\n      code: 'font-code text-code',\n    },\n    tone: {\n      inherit: '',\n      foreground: 'text-foreground',\n      muted: 'text-muted-foreground',\n    },\n    numeric: {\n      true: 'tabular-nums',\n    },\n  },\n  defaultVariants: {\n    variant: 'body',\n    tone: 'inherit',\n  },\n})\n\nexport const textElement = {\n  body: 'p',\n  label: 'span',\n  strong: 'span',\n  caption: 'span',\n  micro: 'span',\n  code: 'code',\n} as const\n\ntype TextVariantProps = VariantProps<typeof textVariants>\ntype TextVariant = keyof typeof textElement\n\nexport type TextProps<T extends ValidComponent = 'p'> = PolymorphicProps<\n  T,\n  TextVariantProps & {\n    class?: string\n  }\n>\n\nexport function Text<T extends ValidComponent = 'p'>(props: TextProps<T>) {\n  const [local, rest] = splitProps(props as TextProps & { as?: ValidComponent }, [\n    'as',\n    'variant',\n    'tone',\n    'numeric',\n    'class',\n  ])\n\n  return (\n    <Polymorphic\n      as={local.as ?? textElement[(local.variant ?? 'body') as TextVariant]}\n      data-slot=\"text\"\n      class={cn(\n        textVariants({ variant: local.variant, tone: local.tone, numeric: local.numeric }),\n        local.class\n      )}\n      {...(rest as ComponentProps<'p'>)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAaQ,kBAAkCH,oBAAI,iBAAiB;CAClEI,UAAU;EACRC,MAAM;;GAEJC,SAAS;;GAETC,OAAO;;GAEPC,MAAM;;GAENC,SAAS;;GAETC,MAAM;;GAENC,YAAY;EACd;EACAC,SAAS;;GAEPC,MAAM;;GAENC,MAAM;EACR;;EAEAC,SAAS,EACPC,MAAM,eACR;EACAC,MAAM;;GAEJC,SAAS;GACTC,YAAY;GACZC,OAAO;EACT;CACF;CACAC,iBAAiB;EACfhB,MAAM;EACNO,SAAS;EACTK,MAAM;CACR;AACF,CAAC;;;;;AAMD,IAAaK,iBAAiB;CAC5BhB,SAAS;CACTC,OAAO;CACPC,MAAM;CACNC,SAAS;CACTC,MAAM;CACNC,YAAY;AACd;AAYA,SAAgBkB,QAAyCC,OAAwB;CAC/E,MAAM,CAACC,OAAOC,QAAQlC,WAAWgC,OAAiD;EAChF;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAI,gBACGvC,aAAWwC,WAAA;EAAA,IACVF,KAAE;GAAA,OAAEF,MAAME,MAAMX,eAAgBS,MAAM1B,QAAQ;EAA0B;EAAA,aAAA;EAAA,KAAA,WAAA;GAAA,OAEjEH,GACLC,gBAAgB;IACdE,MAAM0B,MAAM1B;IACZO,SAASmB,MAAMnB;IACfG,SAASgB,MAAMhB;IACfE,MAAMc,MAAMd;GACd,CAAC,GACDc,MAAMH,KACR;EAAC;CAAA,GACII,IAA4B,CAAA;AAGvC;;;;;;;;;;;;;;;AAgBA,IAAaI,eAA+BpC,oBAAI,IAAI;CAClDI,UAAU;EACRiC,SAAS;;GAEPC,MAAM;;GAENC,OAAO;;GAEPC,QAAQ;;GAERC,SAAS;;GAETC,OAAO;;GAEPC,MAAM;EACR;EACA1B,MAAM;GACJC,SAAS;GACTC,YAAY;GACZC,OAAO;EACT;EACAL,SAAS,EACPC,MAAM,eACR;CACF;CACAK,iBAAiB;EACfgB,SAAS;EACTpB,MAAM;CACR;AACF,CAAC;AAED,IAAa2B,cAAc;CACzBN,MAAM;CACNC,OAAO;CACPC,QAAQ;CACRC,SAAS;CACTC,OAAO;CACPC,MAAM;AACR;AAYA,SAAgBK,KAAqClB,OAAqB;CACxE,MAAM,CAACC,OAAOC,QAAQlC,WAAWgC,OAA8C;EAC7E;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAI,gBACGvC,aAAWwC,WAAA;EAAA,IACVF,KAAE;GAAA,OAAEF,MAAME,MAAMW,YAAab,MAAMM,WAAW;EAAuB;EAAA,aAAA;EAAA,KAAA,WAAA;GAAA,OAE9DnC,GACLkC,aAAa;IAAEC,SAASN,MAAMM;IAASpB,MAAMc,MAAMd;IAAMF,SAASgB,MAAMhB;GAAQ,CAAC,GACjFgB,MAAMH,KACR;EAAC;CAAA,GACII,IAA2B,CAAA;AAGtC"}
+{"version":3,"file":"typography.js","names":["Polymorphic","PolymorphicProps","ComponentProps","splitProps","ValidComponent","cva","VariantProps","cn","headingVariants","variants","size","display","title","page","section","card","subsection","leading","rung","none","numeric","true","tone","inherit","foreground","muted","defaultVariants","headingElement","const","HeadingVariantProps","HeadingSize","HeadingProps","T","class","Heading","props","local","rest","as","_$createComponent","_$mergeProps","textVariants","variant","body","label","strong","caption","micro","overline","code","textElement","textDefaultTone","TextVariant","undefined","TextVariantProps","TextProps","Text","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/ui/typography/typography.tsx"],"sourcesContent":["import { Polymorphic, type PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { type ComponentProps, splitProps, type ValidComponent } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Typography.\n *\n * The type ladder in `theme.css` has eight rungs, each with its own leading. These\n * two components are where a rung is paired with its weight and tracking, so a call\n * site names a *role* — a page title, a section heading, a caption — and never\n * re-decides `text-xl font-semibold tracking-tight` for itself. Twenty call sites\n * that each choose a size and a weight drift; twenty that name a role cannot.\n *\n * **Size is visual; the element is the document outline.** They are separate\n * decisions and the API keeps them separate. Each size has a conventional default\n * element (`display`, `title` and `page` render an `h1`, `section` an `h2`, `card`\n * an `h3`, `subsection` an `h4`) so the common case needs no prop, but the default\n * is a convenience, not a coupling: a card-sized title that is the first heading\n * in a settings section is an `h2`, so it says `as=\"h2\"`. Never pick a `size` to get\n * a heading level, and never pick an element to get a size.\n *\n * Headings are 600, and weights stop at 600 — on a dark surface a bold word blooms.\n * Leading comes from the rung; `leading=\"none\"` is for a title whose surrounding\n * stack already sets the rhythm (a card or dialog header), and is the only other\n * option.\n */\n// cva only returns a closure. A heading-only consumer must discard Text's recipe.\nexport const headingVariants = /* @__PURE__ */ cva('font-semibold', {\n  variants: {\n    size: {\n      /** 30px. An app-level headline — a first-run or empty-app screen. Once per app. */\n      display: 'text-3xl tracking-tight',\n      /** 24px. A landing title or a headline figure larger than a stat's. */\n      title: 'text-2xl tracking-tight',\n      /** 20px. The title of a page (`PageHeaderTitle`). */\n      page: 'text-xl tracking-tight',\n      /** 18px. A section heading inside a page (`PageSection`). */\n      section: 'text-lg tracking-tight',\n      /** 16px. A card, dialog, drawer or settings-section title. */\n      card: 'text-base tracking-tight',\n      /** 14px. A heading inside a compact surface: a sheet, a chart, a column. */\n      subsection: 'text-sm',\n    },\n    leading: {\n      /** The rung's own line-height from `theme.css`. */\n      rung: '',\n      /** Line-height 1, for a title whose container's gap sets the rhythm. */\n      none: 'leading-none',\n    },\n    /** Tabular figures, so a row of numbers can be compared without digits shifting. */\n    numeric: {\n      true: 'tabular-nums',\n    },\n    tone: {\n      /** Inherit the surrounding colour — right on every surface by construction. */\n      inherit: '',\n      foreground: 'text-foreground',\n      muted: 'text-muted-foreground',\n    },\n  },\n  defaultVariants: {\n    size: 'section',\n    leading: 'rung',\n    tone: 'inherit',\n  },\n})\n\n/**\n * The conventional element for each heading size. Exported so a test (and a\n * reader) can see the whole mapping in one place; pass `as` to depart from it.\n */\nexport const headingElement = {\n  display: 'h1',\n  title: 'h1',\n  page: 'h1',\n  section: 'h2',\n  card: 'h3',\n  subsection: 'h4',\n} as const\n\ntype HeadingVariantProps = VariantProps<typeof headingVariants>\ntype HeadingSize = keyof typeof headingElement\n\nexport type HeadingProps<T extends ValidComponent = 'h2'> = PolymorphicProps<\n  T,\n  HeadingVariantProps & {\n    class?: string\n  }\n>\n\nexport function Heading<T extends ValidComponent = 'h2'>(props: HeadingProps<T>) {\n  const [local, rest] = splitProps(props as HeadingProps & { as?: ValidComponent }, [\n    'as',\n    'size',\n    'leading',\n    'numeric',\n    'tone',\n    'class',\n  ])\n\n  return (\n    <Polymorphic\n      as={local.as ?? headingElement[(local.size ?? 'section') as HeadingSize]}\n      data-slot=\"heading\"\n      class={cn(\n        headingVariants({\n          size: local.size,\n          leading: local.leading,\n          numeric: local.numeric,\n          tone: local.tone,\n        }),\n        local.class\n      )}\n      {...(rest as ComponentProps<'h2'>)}\n    />\n  )\n}\n\n/**\n * Text.\n *\n * Everything that is not a heading. Body and strong copy use the content font\n * axis; labels, captions and microcopy inherit the UI face. Code uses its own\n * family and size axis for anything a user compares character by character.\n *\n * `tone` is a separate axis from `variant` because \"secondary\" is a colour\n * decision, not a size: a muted caption and a muted body line are both common.\n * The default inherits, so text on a filled surface picks up that surface's\n * foreground without the caller restating it.\n *\n * Defaults: `body` renders a `p`, `code` a `code`, every other variant a `span`.\n *\n * `overline` is the small uppercase label above a group — a list group's\n * heading, a settings navigation group, an eyebrow over a page title. It is the\n * one variant whose tone defaults to `muted` rather than inheriting, because an\n * overline in the body foreground competes with the heading it introduces. Pass\n * `tone` to override. It labels a group; it is not a heading, so it renders a\n * `span` and stays out of the document outline.\n */\nexport const textVariants = /* @__PURE__ */ cva('', {\n  variants: {\n    variant: {\n      /** 14px / 400. Body copy and descriptions. */\n      body: 'font-content text-content',\n      /** 14px / 500. Labels, control text, list-row titles. */\n      label: 'text-sm font-medium',\n      /** 14px / 600. Emphasis inside body copy. */\n      strong: 'font-content text-content font-semibold',\n      /** 12px / 400. Metadata, secondary rows, units. */\n      caption: 'text-xs',\n      /** 11px / 500. The floor: keyboard keys, the status bar. */\n      micro: 'text-2xs font-medium',\n      /** 11px / 500, uppercase and tracked. A group label or eyebrow; muted by default. */\n      overline: 'text-2xs font-medium tracking-wide uppercase',\n      /** 12px mono. Ids, paths, hashes, inline code. */\n      code: 'font-code text-code',\n    },\n    tone: {\n      inherit: '',\n      foreground: 'text-foreground',\n      muted: 'text-muted-foreground',\n    },\n    numeric: {\n      true: 'tabular-nums',\n    },\n  },\n  defaultVariants: {\n    variant: 'body',\n    tone: 'inherit',\n  },\n})\n\nexport const textElement = {\n  body: 'p',\n  label: 'span',\n  strong: 'span',\n  caption: 'span',\n  micro: 'span',\n  overline: 'span',\n  code: 'code',\n} as const\n\n/** The tone a variant takes when the caller names none: muted for `overline`, else inherit. */\nexport function textDefaultTone(variant: TextVariant | null | undefined) {\n  return variant === 'overline' ? 'muted' : undefined\n}\n\ntype TextVariantProps = VariantProps<typeof textVariants>\ntype TextVariant = keyof typeof textElement\n\nexport type TextProps<T extends ValidComponent = 'p'> = PolymorphicProps<\n  T,\n  TextVariantProps & {\n    class?: string\n  }\n>\n\nexport function Text<T extends ValidComponent = 'p'>(props: TextProps<T>) {\n  const [local, rest] = splitProps(props as TextProps & { as?: ValidComponent }, [\n    'as',\n    'variant',\n    'tone',\n    'numeric',\n    'class',\n  ])\n\n  return (\n    <Polymorphic\n      as={local.as ?? textElement[(local.variant ?? 'body') as TextVariant]}\n      data-slot=\"text\"\n      class={cn(\n        textVariants({\n          variant: local.variant,\n          tone: local.tone ?? textDefaultTone(local.variant),\n          numeric: local.numeric,\n        }),\n        local.class\n      )}\n      {...(rest as ComponentProps<'p'>)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAaQ,kBAAkCH,oBAAI,iBAAiB;CAClEI,UAAU;EACRC,MAAM;;GAEJC,SAAS;;GAETC,OAAO;;GAEPC,MAAM;;GAENC,SAAS;;GAETC,MAAM;;GAENC,YAAY;EACd;EACAC,SAAS;;GAEPC,MAAM;;GAENC,MAAM;EACR;;EAEAC,SAAS,EACPC,MAAM,eACR;EACAC,MAAM;;GAEJC,SAAS;GACTC,YAAY;GACZC,OAAO;EACT;CACF;CACAC,iBAAiB;EACfhB,MAAM;EACNO,SAAS;EACTK,MAAM;CACR;AACF,CAAC;;;;;AAMD,IAAaK,iBAAiB;CAC5BhB,SAAS;CACTC,OAAO;CACPC,MAAM;CACNC,SAAS;CACTC,MAAM;CACNC,YAAY;AACd;AAYA,SAAgBkB,QAAyCC,OAAwB;CAC/E,MAAM,CAACC,OAAOC,QAAQlC,WAAWgC,OAAiD;EAChF;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAI,gBACGvC,aAAWwC,WAAA;EAAA,IACVF,KAAE;GAAA,OAAEF,MAAME,MAAMX,eAAgBS,MAAM1B,QAAQ;EAA0B;EAAA,aAAA;EAAA,KAAA,WAAA;GAAA,OAEjEH,GACLC,gBAAgB;IACdE,MAAM0B,MAAM1B;IACZO,SAASmB,MAAMnB;IACfG,SAASgB,MAAMhB;IACfE,MAAMc,MAAMd;GACd,CAAC,GACDc,MAAMH,KACR;EAAC;CAAA,GACII,IAA4B,CAAA;AAGvC;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAaI,eAA+BpC,oBAAI,IAAI;CAClDI,UAAU;EACRiC,SAAS;;GAEPC,MAAM;;GAENC,OAAO;;GAEPC,QAAQ;;GAERC,SAAS;;GAETC,OAAO;;GAEPC,UAAU;;GAEVC,MAAM;EACR;EACA3B,MAAM;GACJC,SAAS;GACTC,YAAY;GACZC,OAAO;EACT;EACAL,SAAS,EACPC,MAAM,eACR;CACF;CACAK,iBAAiB;EACfgB,SAAS;EACTpB,MAAM;CACR;AACF,CAAC;AAED,IAAa4B,cAAc;CACzBP,MAAM;CACNC,OAAO;CACPC,QAAQ;CACRC,SAAS;CACTC,OAAO;CACPC,UAAU;CACVC,MAAM;AACR;;AAGA,SAAgBE,gBAAgBT,SAAyC;CACvE,OAAOA,YAAY,aAAa,UAAUW,KAAAA;AAC5C;AAYA,SAAgBG,KAAqCrB,OAAqB;CACxE,MAAM,CAACC,OAAOC,QAAQlC,WAAWgC,OAA8C;EAC7E;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAI,gBACGvC,aAAWwC,WAAA;EAAA,IACVF,KAAE;GAAA,OAAEF,MAAME,MAAMY,YAAad,MAAMM,WAAW;EAAuB;EAAA,aAAA;EAAA,KAAA,WAAA;GAAA,OAE9DnC,GACLkC,aAAa;IACXC,SAASN,MAAMM;IACfpB,MAAMc,MAAMd,QAAQ6B,gBAAgBf,MAAMM,OAAO;IACjDtB,SAASgB,MAAMhB;GACjB,CAAC,GACDgB,MAAMH,KACR;EAAC;CAAA,GACII,IAA2B,CAAA;AAGtC"}