@adea-ai/ui 0.116.0 → 0.118.0

package/dist/components/composites/action-button/action-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-button.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/action-button/action-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,GAAG,EACR,KAAK,cAAc,EACpB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAI1D;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,cAAc,GAAG,QAAQ,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IACpF,8FAA8F;IAC9F,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iGAAiG;IACjG,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjD;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA+CD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,QAAQ,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,eA0G5F"}
+{"version":3,"file":"action-button.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/action-button/action-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,GAAG,EACR,KAAK,cAAc,EACpB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAI1D;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,cAAc,GAAG,QAAQ,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IACpF,8FAA8F;IAC9F,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iGAAiG;IACjG,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjD;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA+CD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,QAAQ,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,eA6G5F"}

package/dist/components/composites/action-button/action-button.js

@@ -61,6 +61,7 @@ function ActionButton(props) {
 	const PolymorphicButtonTarget = ButtonTarget;
 	const buttonProps = () => ({
 		...rest,
+		"data-slot": rest["data-slot"] ?? "action-button",
 		variant: local.variant,
 		size: local.size,
 		touchTarget: local.touchTarget,

package/dist/components/composites/action-button/action-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-button.js","names":["Show","createSignal","splitProps","ComponentProps","JSX","ValidComponent","Button","ButtonProps","Spinner","Tooltip","TooltipContent","TooltipTrigger","ActionButtonProps","T","tooltip","tooltipSide","tooltipIcon","Element","busy","busyLabel","invokeHandler","handler","event","Event","Array","isArray","callback","data","chainedHandler","before","guardedClick","disabled","onActivate","MouseEvent","preventDefault","stopImmediatePropagation","ButtonTargetProps","Omit","actionAs","ButtonTarget","props","local","rest","PolymorphicButton","targetProps","_$createComponent","_$mergeProps","as","ActionButton","busyStatus","tooltipOpen","setTooltipOpen","tooltipSuppression","setTooltipSuppression","onClickCapture","buttonProps","PolymorphicButtonTarget","variant","size","touchTarget","class","filter","Boolean","join","tabIndex","undefined","role","href","onClick","detail","onPointerLeave","onBlur","Record","contents","when","children","label","_$memo","fallback","placement","open","onOpenChange","icon","_el$","_tmpl$","_$insert","_$createComponent","PolymorphicButton","_$mergeProps","_$memo"],"sources":["../../../../src/components/composites/action-button/action-button.tsx"],"sourcesContent":["import {\n  Show,\n  createSignal,\n  splitProps,\n  type ComponentProps,\n  type JSX,\n  type ValidComponent,\n} from 'solid-js'\nimport { Button, type ButtonProps } from '../../ui/button'\nimport { Spinner } from '../../ui/spinner'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'\n\n/**\n * ActionButton.\n *\n * A Button with optional explanatory tooltip and busy feedback. Use it for a\n * simple action that needs these states; actions with product-specific rules\n * should compose Button directly.\n *\n * The tooltip trigger renders the polymorphic Button itself. A disabled native\n * control cannot receive pointer or keyboard events. When a tooltip is set,\n * disabled actions therefore use focusable `aria-disabled` semantics and guard\n * activation; without a tooltip, native buttons retain native disabling.\n * Custom polymorphic components must forward aria, event, and href props for\n * these guarantees to apply.\n */\nexport type ActionButtonProps<T extends ValidComponent = 'button'> = ButtonProps<T> & {\n  /** A short explanation, also shown on keyboard focus. The Button still needs its own name. */\n  tooltip?: string\n  /** Placement of the explanation; icon actions live in bars, so it defaults below the control. */\n  tooltipSide?: 'top' | 'right' | 'bottom' | 'left'\n  /**\n   * A leading icon repeated inside the explanation, forwarded to the shared\n   * tooltip's `icon` slot so a bar of icon actions gets the icon+label tip\n   * without hand-composing Button and Tooltip. Decorative by contract: the tip\n   * is never the accessible name, so the icon must not carry meaning the label\n   * lacks. Size it by leaving the svg bare; the slot fixes it to control size.\n   */\n  tooltipIcon?: JSX.Element\n  /** Disables the action and announces the busy label through a polite status region. */\n  busy?: boolean\n  /** The activity announced while busy. The Button's accessible name stays unchanged. */\n  busyLabel?: string\n}\n\nfunction invokeHandler(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    const callback = handler as (event: Event) => void\n    callback(event)\n  }\n}\n\nfunction chainedHandler(handler: unknown, before: (event: Event) => void) {\n  return (event: Event) => {\n    before(event)\n    invokeHandler(handler, event)\n  }\n}\n\nfunction guardedClick(\n  handler: unknown,\n  disabled: () => boolean,\n  onActivate: (event: MouseEvent) => void = () => {}\n) {\n  return (event: MouseEvent) => {\n    if (disabled()) {\n      event.preventDefault()\n      event.stopImmediatePropagation()\n      return\n    }\n\n    onActivate(event)\n    invokeHandler(handler, event)\n  }\n}\n\ntype ButtonTargetProps<T extends ValidComponent = 'button'> = Omit<ButtonProps<T>, 'as'> & {\n  actionAs?: T\n}\n\n/** Adapter keeps TooltipTrigger's `as` separate from Button's polymorphic `as`. */\nfunction ButtonTarget<T extends ValidComponent = 'button'>(props: ButtonTargetProps<T>) {\n  const [local, rest] = splitProps(props as ButtonTargetProps, ['actionAs'])\n  const PolymorphicButton = Button as (targetProps: ButtonProps<T>) => JSX.Element\n  return <PolymorphicButton as={(local.actionAs ?? 'button') as T} {...(rest as ButtonProps<T>)} />\n}\n\nexport function ActionButton<T extends ValidComponent = 'button'>(props: ActionButtonProps<T>) {\n  const [local, rest] = splitProps(props as ActionButtonProps, [\n    'as',\n    'variant',\n    'size',\n    'touchTarget',\n    'class',\n    'children',\n    'disabled',\n    'aria-busy',\n    'tooltip',\n    'tooltipSide',\n    'tooltipIcon',\n    'busy',\n    'busyLabel',\n  ])\n  const busy = () => local.busy ?? false\n  const disabled = () => busy() || !!local.disabled\n  const busyStatus = () => local.busyLabel ?? 'Working'\n  const [tooltipOpen, setTooltipOpen] = createSignal(false)\n  const [tooltipSuppression, setTooltipSuppression] = createSignal<'pointer' | 'focus' | null>(null)\n  const onClickCapture = (rest as { onClickCapture?: unknown }).onClickCapture\n  const PolymorphicButton = Button as (buttonProps: ButtonProps<T>) => JSX.Element\n  const PolymorphicButtonTarget = ButtonTarget as (targetProps: ButtonTargetProps<T>) => JSX.Element\n\n  const buttonProps = () => ({\n    ...rest,\n    variant: local.variant,\n    size: local.size,\n    touchTarget: local.touchTarget,\n    class: [local.class, local.tooltip && disabled() && 'aria-disabled:pointer-events-auto']\n      .filter(Boolean)\n      .join(' '),\n    disabled: disabled() && !local.tooltip,\n    'aria-disabled': disabled() ? true : rest['aria-disabled'],\n    // Make tooltip-bearing native controls explicit tab stops in WebKit configurations that\n    // otherwise skip implicit button stops. A caller's tabIndex remains authoritative.\n    tabIndex:\n      rest.tabIndex ??\n      (local.as === 'a' && disabled() ? (local.tooltip ? 0 : -1) : local.tooltip ? 0 : undefined),\n    role: local.as === 'a' && disabled() ? 'link' : rest.role,\n    href: local.as === 'a' && disabled() ? undefined : (rest as { href?: string }).href,\n    'aria-busy': busy() || local['aria-busy'],\n    onClick: guardedClick(rest.onClick, disabled, (event) => {\n      if (!local.tooltip) return\n      setTooltipSuppression(event.detail > 0 ? 'pointer' : 'focus')\n      setTooltipOpen(false)\n    }),\n    onPointerLeave: chainedHandler(rest.onPointerLeave, () => {\n      if (tooltipSuppression() === 'pointer') setTooltipSuppression(null)\n    }),\n    onBlur: chainedHandler(rest.onBlur, () => {\n      if (tooltipSuppression() === 'focus') setTooltipSuppression(null)\n    }),\n    onClickCapture: onClickCapture ? guardedClick(onClickCapture, disabled) : undefined,\n    'on:click': guardedClick((rest as Record<string, unknown>)['on:click'], disabled),\n    'oncapture:click': guardedClick((rest as Record<string, unknown>)['oncapture:click'], disabled),\n  })\n\n  const contents = () => (\n    <>\n      <Show when={busy()}>\n        <Spinner size=\"sm\" label={false} aria-hidden=\"true\" data-icon=\"inline-start\" />\n      </Show>\n      {local.children}\n    </>\n  )\n\n  return (\n    <>\n      <Show\n        when={local.tooltip}\n        fallback={\n          <PolymorphicButton\n            as={(local.as ?? 'button') as T}\n            {...(buttonProps() as unknown as ButtonProps<T>)}\n          >\n            {contents()}\n          </PolymorphicButton>\n        }\n      >\n        <Tooltip\n          placement={local.tooltipSide ?? 'bottom'}\n          open={tooltipOpen()}\n          onOpenChange={(open) => {\n            if (open && tooltipSuppression()) return\n            setTooltipOpen(open)\n          }}\n        >\n          <TooltipTrigger\n            as={PolymorphicButtonTarget}\n            {...(buttonProps() as unknown as ComponentProps<typeof PolymorphicButtonTarget>)}\n            actionAs={(local.as ?? 'button') as T}\n          >\n            {contents()}\n          </TooltipTrigger>\n          <TooltipContent icon={local.tooltipIcon}>{local.tooltip}</TooltipContent>\n        </Tooltip>\n      </Show>\n      <Show when={busy()}>\n        <span role=\"status\" aria-live=\"polite\" class=\"visually-hidden\">\n          {busyStatus()}\n        </span>\n      </Show>\n    </>\n  )\n}\n"],"mappings":";;;;;;;AA6CA,SAASoB,cAAcC,SAAkBC,OAAc;CACrD,IAAIE,MAAMC,QAAQJ,OAAO,GAAG;EAC1B,MAAM,CAACK,UAAUC,QAAQN;EACzBK,SAASC,MAAML,KAAK;CACtB,OAAO,IAAI,OAAOD,YAAY,YAE5BK,QAASJ,KAAK;AAElB;AAEA,SAASM,eAAeP,SAAkBQ,QAAgC;CACxE,QAAQP,UAAiB;EACvBO,OAAOP,KAAK;EACZF,cAAcC,SAASC,KAAK;CAC9B;AACF;AAEA,SAASQ,aACPT,SACAU,UACAC,mBAAgD,CAAC,GACjD;CACA,QAAQV,UAAsB;EAC5B,IAAIS,SAAS,GAAG;GACdT,MAAMY,eAAe;GACrBZ,MAAMa,yBAAyB;GAC/B;EACF;EAEAH,WAAWV,KAAK;EAChBF,cAAcC,SAASC,KAAK;CAC9B;AACF;;AAOA,SAASiB,aAAkDC,OAA6B;CACtF,MAAM,CAACC,OAAOC,QAAQxC,WAAWsC,OAA4B,CAAC,UAAU,CAAC;CAEzE,OAAAK,gBAAQF,QAAiBG,WAAA,EAAA,IAACC,KAAE;EAAA,OAAGN,MAAMH,YAAY;CAAc,EAAA,GAAOI,IAAsB,CAAA;AAC9F;AAEA,SAAgBM,aAAkDR,OAA6B;CAC7F,MAAM,CAACC,OAAOC,QAAQxC,WAAWsC,OAA4B;EAC3D;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAW,CACZ;CACD,MAAMtB,aAAauB,MAAMvB,QAAQ;CACjC,MAAMa,iBAAiBb,KAAK,KAAK,CAAC,CAACuB,MAAMV;CACzC,MAAMkB,mBAAmBR,MAAMtB,aAAa;CAC5C,MAAM,CAAC+B,aAAaC,kBAAkBlD,aAAa,KAAK;CACxD,MAAM,CAACmD,oBAAoBC,yBAAyBpD,aAAyC,IAAI;CACjG,MAAMqD,iBAAkBZ,KAAsCY;CAC9D,MAAMX,oBAAoBrC;CAC1B,MAAMkD,0BAA0BjB;CAEhC,MAAMgB,qBAAqB;EACzB,GAAGb;EACHe,SAAShB,MAAMgB;EACfC,MAAMjB,MAAMiB;EACZC,aAAalB,MAAMkB;EACnBC,OAAO,CAACnB,MAAMmB,OAAOnB,MAAM3B,WAAWiB,SAAS,KAAK,mCAAmC,CAAC,CACrF8B,OAAOC,OAAO,CAAC,CACfC,KAAK,GAAG;EACXhC,UAAUA,SAAS,KAAK,CAACU,MAAM3B;EAC/B,iBAAiBiB,SAAS,IAAI,OAAOW,KAAK;EAG1CsB,UACEtB,KAAKsB,aACJvB,MAAMM,OAAO,OAAOhB,SAAS,IAAKU,MAAM3B,UAAU,IAAI,KAAM2B,MAAM3B,UAAU,IAAImD,KAAAA;EACnFC,MAAMzB,MAAMM,OAAO,OAAOhB,SAAS,IAAI,SAASW,KAAKwB;EACrDC,MAAM1B,MAAMM,OAAO,OAAOhB,SAAS,IAAIkC,KAAAA,IAAavB,KAA2ByB;EAC/E,aAAajD,KAAK,KAAKuB,MAAM;EAC7B2B,SAAStC,aAAaY,KAAK0B,SAASrC,WAAWT,UAAU;GACvD,IAAI,CAACmB,MAAM3B,SAAS;GACpBuC,sBAAsB/B,MAAM+C,SAAS,IAAI,YAAY,OAAO;GAC5DlB,eAAe,KAAK;EACtB,CAAC;EACDmB,gBAAgB1C,eAAec,KAAK4B,sBAAsB;GACxD,IAAIlB,mBAAmB,MAAM,WAAWC,sBAAsB,IAAI;EACpE,CAAC;EACDkB,QAAQ3C,eAAec,KAAK6B,cAAc;GACxC,IAAInB,mBAAmB,MAAM,SAASC,sBAAsB,IAAI;EAClE,CAAC;EACDC,gBAAgBA,iBAAiBxB,aAAawB,gBAAgBvB,QAAQ,IAAIkC,KAAAA;EAC1E,YAAYnC,aAAcY,KAAiC,aAAaX,QAAQ;EAChF,mBAAmBD,aAAcY,KAAiC,oBAAoBX,QAAQ;CAChG;CAEA,MAAM0C,iBAAW,CAAA5B,gBAEZ7C,MAAI;EAAA,IAAC0E,OAAI;GAAA,OAAExD,KAAK;EAAC;EAAA,IAAAyD,WAAA;GAAA,OAAA9B,gBACfrC,SAAO;IAACkD,MAAI;IAAMkB,OAAO;IAAK,eAAA;IAAA,aAAA;GAAA,CAAA;EAAA;CAAA,CAAA,GAAAC,WAEhCpC,MAAMkC,QAAQ,CAAA;CAInB,OAAA,CAAA9B,gBAEK7C,MAAI;EAAA,IACH0E,OAAI;GAAA,OAAEjC,MAAM3B;EAAO;EAAA,IACnBgE,WAAQ;GAAA,OAAAjC,gBACLF,mBAAiBG,WAAA,EAAA,IAChBC,KAAE;IAAA,OAAGN,MAAMM,MAAM;GAAc,EAAA,SAC1BQ,YAAY,GAA8B,EAAA,IAAAoB,WAAA;IAAA,OAE9CF,SAAS;GAAC,EAAA,CAAA,CAAA;EAAA;EAAA,IAAAE,WAAA;GAAA,OAAA9B,gBAIdpC,SAAO;IAAA,IACNsE,YAAS;KAAA,OAAEtC,MAAM1B,eAAe;IAAQ;IAAA,IACxCiE,OAAI;KAAA,OAAE9B,YAAY;IAAC;IACnB+B,eAAeD,SAAS;KACtB,IAAIA,QAAQ5B,mBAAmB,GAAG;KAClCD,eAAe6B,IAAI;IACrB;IAAC,IAAAL,WAAA;KAAA,OAAA,CAAA9B,gBAEAlC,gBAAcmC,WAAA,EACbC,IAAIS,wBAAuB,SACtBD,YAAY,GAA8D;MAAA,IAC/EjB,WAAQ;OAAA,OAAGG,MAAMM,MAAM;MAAc;MAAA,IAAA4B,WAAA;OAAA,OAEpCF,SAAS;MAAC;KAAA,CAAA,CAAA,GAAA5B,gBAEZnC,gBAAc;MAAA,IAACwE,OAAI;OAAA,OAAEzC,MAAMzB;MAAW;MAAA,IAAA2D,WAAA;OAAA,OAAGlC,MAAM3B;MAAO;KAAA,CAAA,CAAA;IAAA;GAAA,CAAA;EAAA;CAAA,CAAA,GAAA+B,gBAG1D7C,MAAI;EAAA,IAAC0E,OAAI;GAAA,OAAExD,KAAK;EAAC;EAAA,IAAAyD,WAAA;GAAA,IAAAQ,OAAAC,OAAA;GAAAC,OAAAF,MAEblC,UAAU;GAAA,OAAAkC;EAAA;CAAA,CAAA,CAAA;AAKrB"}
+{"version":3,"file":"action-button.js","names":["Show","createSignal","splitProps","ComponentProps","JSX","ValidComponent","Button","ButtonProps","Spinner","Tooltip","TooltipContent","TooltipTrigger","ActionButtonProps","T","tooltip","tooltipSide","tooltipIcon","Element","busy","busyLabel","invokeHandler","handler","event","Event","Array","isArray","callback","data","chainedHandler","before","guardedClick","disabled","onActivate","MouseEvent","preventDefault","stopImmediatePropagation","ButtonTargetProps","Omit","actionAs","ButtonTarget","props","local","rest","PolymorphicButton","targetProps","_$createComponent","_$mergeProps","as","ActionButton","busyStatus","tooltipOpen","setTooltipOpen","tooltipSuppression","setTooltipSuppression","onClickCapture","buttonProps","PolymorphicButtonTarget","variant","size","touchTarget","class","filter","Boolean","join","tabIndex","undefined","role","href","onClick","detail","onPointerLeave","onBlur","Record","contents","when","children","label","_$memo","fallback","placement","open","onOpenChange","icon","_el$","_tmpl$","_$insert","_$createComponent","PolymorphicButton","_$mergeProps","_$memo"],"sources":["../../../../src/components/composites/action-button/action-button.tsx"],"sourcesContent":["import {\n  Show,\n  createSignal,\n  splitProps,\n  type ComponentProps,\n  type JSX,\n  type ValidComponent,\n} from 'solid-js'\nimport { Button, type ButtonProps } from '../../ui/button'\nimport { Spinner } from '../../ui/spinner'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'\n\n/**\n * ActionButton.\n *\n * A Button with optional explanatory tooltip and busy feedback. Use it for a\n * simple action that needs these states; actions with product-specific rules\n * should compose Button directly.\n *\n * The tooltip trigger renders the polymorphic Button itself. A disabled native\n * control cannot receive pointer or keyboard events. When a tooltip is set,\n * disabled actions therefore use focusable `aria-disabled` semantics and guard\n * activation; without a tooltip, native buttons retain native disabling.\n * Custom polymorphic components must forward aria, event, and href props for\n * these guarantees to apply.\n */\nexport type ActionButtonProps<T extends ValidComponent = 'button'> = ButtonProps<T> & {\n  /** A short explanation, also shown on keyboard focus. The Button still needs its own name. */\n  tooltip?: string\n  /** Placement of the explanation; icon actions live in bars, so it defaults below the control. */\n  tooltipSide?: 'top' | 'right' | 'bottom' | 'left'\n  /**\n   * A leading icon repeated inside the explanation, forwarded to the shared\n   * tooltip's `icon` slot so a bar of icon actions gets the icon+label tip\n   * without hand-composing Button and Tooltip. Decorative by contract: the tip\n   * is never the accessible name, so the icon must not carry meaning the label\n   * lacks. Size it by leaving the svg bare; the slot fixes it to control size.\n   */\n  tooltipIcon?: JSX.Element\n  /** Disables the action and announces the busy label through a polite status region. */\n  busy?: boolean\n  /** The activity announced while busy. The Button's accessible name stays unchanged. */\n  busyLabel?: string\n}\n\nfunction invokeHandler(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    const callback = handler as (event: Event) => void\n    callback(event)\n  }\n}\n\nfunction chainedHandler(handler: unknown, before: (event: Event) => void) {\n  return (event: Event) => {\n    before(event)\n    invokeHandler(handler, event)\n  }\n}\n\nfunction guardedClick(\n  handler: unknown,\n  disabled: () => boolean,\n  onActivate: (event: MouseEvent) => void = () => {}\n) {\n  return (event: MouseEvent) => {\n    if (disabled()) {\n      event.preventDefault()\n      event.stopImmediatePropagation()\n      return\n    }\n\n    onActivate(event)\n    invokeHandler(handler, event)\n  }\n}\n\ntype ButtonTargetProps<T extends ValidComponent = 'button'> = Omit<ButtonProps<T>, 'as'> & {\n  actionAs?: T\n}\n\n/** Adapter keeps TooltipTrigger's `as` separate from Button's polymorphic `as`. */\nfunction ButtonTarget<T extends ValidComponent = 'button'>(props: ButtonTargetProps<T>) {\n  const [local, rest] = splitProps(props as ButtonTargetProps, ['actionAs'])\n  const PolymorphicButton = Button as (targetProps: ButtonProps<T>) => JSX.Element\n  return <PolymorphicButton as={(local.actionAs ?? 'button') as T} {...(rest as ButtonProps<T>)} />\n}\n\nexport function ActionButton<T extends ValidComponent = 'button'>(props: ActionButtonProps<T>) {\n  const [local, rest] = splitProps(props as ActionButtonProps, [\n    'as',\n    'variant',\n    'size',\n    'touchTarget',\n    'class',\n    'children',\n    'disabled',\n    'aria-busy',\n    'tooltip',\n    'tooltipSide',\n    'tooltipIcon',\n    'busy',\n    'busyLabel',\n  ])\n  const busy = () => local.busy ?? false\n  const disabled = () => busy() || !!local.disabled\n  const busyStatus = () => local.busyLabel ?? 'Working'\n  const [tooltipOpen, setTooltipOpen] = createSignal(false)\n  const [tooltipSuppression, setTooltipSuppression] = createSignal<'pointer' | 'focus' | null>(null)\n  const onClickCapture = (rest as { onClickCapture?: unknown }).onClickCapture\n  const PolymorphicButton = Button as (buttonProps: ButtonProps<T>) => JSX.Element\n  const PolymorphicButtonTarget = ButtonTarget as (targetProps: ButtonTargetProps<T>) => JSX.Element\n\n  const buttonProps = () => ({\n    ...rest,\n    // The inner Button would otherwise announce itself as a plain `button`; a\n    // caller's own slot still wins.\n    'data-slot': (rest as { 'data-slot'?: string })['data-slot'] ?? 'action-button',\n    variant: local.variant,\n    size: local.size,\n    touchTarget: local.touchTarget,\n    class: [local.class, local.tooltip && disabled() && 'aria-disabled:pointer-events-auto']\n      .filter(Boolean)\n      .join(' '),\n    disabled: disabled() && !local.tooltip,\n    'aria-disabled': disabled() ? true : rest['aria-disabled'],\n    // Make tooltip-bearing native controls explicit tab stops in WebKit configurations that\n    // otherwise skip implicit button stops. A caller's tabIndex remains authoritative.\n    tabIndex:\n      rest.tabIndex ??\n      (local.as === 'a' && disabled() ? (local.tooltip ? 0 : -1) : local.tooltip ? 0 : undefined),\n    role: local.as === 'a' && disabled() ? 'link' : rest.role,\n    href: local.as === 'a' && disabled() ? undefined : (rest as { href?: string }).href,\n    'aria-busy': busy() || local['aria-busy'],\n    onClick: guardedClick(rest.onClick, disabled, (event) => {\n      if (!local.tooltip) return\n      setTooltipSuppression(event.detail > 0 ? 'pointer' : 'focus')\n      setTooltipOpen(false)\n    }),\n    onPointerLeave: chainedHandler(rest.onPointerLeave, () => {\n      if (tooltipSuppression() === 'pointer') setTooltipSuppression(null)\n    }),\n    onBlur: chainedHandler(rest.onBlur, () => {\n      if (tooltipSuppression() === 'focus') setTooltipSuppression(null)\n    }),\n    onClickCapture: onClickCapture ? guardedClick(onClickCapture, disabled) : undefined,\n    'on:click': guardedClick((rest as Record<string, unknown>)['on:click'], disabled),\n    'oncapture:click': guardedClick((rest as Record<string, unknown>)['oncapture:click'], disabled),\n  })\n\n  const contents = () => (\n    <>\n      <Show when={busy()}>\n        <Spinner size=\"sm\" label={false} aria-hidden=\"true\" data-icon=\"inline-start\" />\n      </Show>\n      {local.children}\n    </>\n  )\n\n  return (\n    <>\n      <Show\n        when={local.tooltip}\n        fallback={\n          <PolymorphicButton\n            as={(local.as ?? 'button') as T}\n            {...(buttonProps() as unknown as ButtonProps<T>)}\n          >\n            {contents()}\n          </PolymorphicButton>\n        }\n      >\n        <Tooltip\n          placement={local.tooltipSide ?? 'bottom'}\n          open={tooltipOpen()}\n          onOpenChange={(open) => {\n            if (open && tooltipSuppression()) return\n            setTooltipOpen(open)\n          }}\n        >\n          <TooltipTrigger\n            as={PolymorphicButtonTarget}\n            {...(buttonProps() as unknown as ComponentProps<typeof PolymorphicButtonTarget>)}\n            actionAs={(local.as ?? 'button') as T}\n          >\n            {contents()}\n          </TooltipTrigger>\n          <TooltipContent icon={local.tooltipIcon}>{local.tooltip}</TooltipContent>\n        </Tooltip>\n      </Show>\n      <Show when={busy()}>\n        <span role=\"status\" aria-live=\"polite\" class=\"visually-hidden\">\n          {busyStatus()}\n        </span>\n      </Show>\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/components/composites/list-row/list-row-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-row-control.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/list-row/list-row-control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAInE,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IAAI,gBAAgB,CAClF,CAAC,EACD;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oDAAoD;IACpD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gEAAgE;IAChE,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,CACF,CAAA;AAMD,2EAA2E;AAC3E,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,eA+E7F"}
+{"version":3,"file":"list-row-control.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/list-row/list-row-control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAInE,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IAAI,gBAAgB,CAClF,CAAC,EACD;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oDAAoD;IACpD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gEAAgE;IAChE,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,CACF,CAAA;AAMD,2EAA2E;AAC3E,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,eAgF7F"}

package/dist/components/composites/list-row/list-row-control.js

@@ -28,6 +28,7 @@ function ListRowControl(props) {
 		get as() {
 			return rowAs();
 		},
+		"data-slot": "list-row",
 		get type() {
 			return memo(() => rowAs() === "button")() ? local.type ?? "button" : local.type;
 		},

package/dist/components/composites/list-row/list-row-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-row-control.js","names":["PolymorphicProps","Polymorphic","ComponentProps","JSX","ValidComponent","Show","splitProps","cn","ListRowControlProps","T","class","selected","dense","leading","Element","trailing","description","stackTrailing","type","ListRowControlBaseProps","as","ListRowControl","props","local","rest","hasClickHandler","Boolean","onClick","rowAs","_$createComponent","_$mergeProps","_$memo","tabIndex","undefined","aria-current","data-selected","data-description","data-stack-trailing","children","when","_el$","_tmpl$","_$insert","_el$2","_tmpl$4","_el$3","firstChild","_el$4","_el$5","_tmpl$2","_$effect","_$className","_el$6","_tmpl$3","_$createComponent","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/composites/list-row/list-row-control.tsx"],"sourcesContent":["import type { PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { Polymorphic } from '@kobalte/core/polymorphic'\nimport type { ComponentProps, JSX, ValidComponent } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\nexport type ListRowControlProps<T extends ValidComponent = 'div'> = PolymorphicProps<\n  T,\n  {\n    class?: string\n    /** Marks the row as current. Sets `aria-current` for a link row. */\n    selected?: boolean\n    /** Draw the row at the compact height. */\n    dense?: boolean\n    /** Leading slot: an avatar, an icon, a checkbox. */\n    leading?: JSX.Element\n    /** Trailing slot: a count, a menu trigger, a timestamp. */\n    trailing?: JSX.Element\n    /** A second line that wraps and grows the row to fit its content. */\n    description?: string\n    /**\n     * Whether a described row may drop its trailing slot onto its own line when\n     * the row gets narrow (the default). Pass `false` for a short, truncating\n     * label whose single action must stay beside it.\n     */\n    stackTrailing?: boolean\n    /** Native button type; defaults to `button` for button rows. */\n    type?: ComponentProps<'button'>['type']\n  }\n>\n\ntype ListRowControlBaseProps<T extends ValidComponent = 'div'> = ListRowControlProps<T> & {\n  as?: T\n}\n\n/** A tree-shakeable ListRow renderer without optional tooltip behavior. */\nexport function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowControlProps<T>) {\n  const [local, rest] = splitProps(props as ListRowControlBaseProps, [\n    'as',\n    'class',\n    'selected',\n    'dense',\n    'leading',\n    'trailing',\n    'description',\n    'stackTrailing',\n    'type',\n    'tabIndex',\n    'children',\n  ])\n  const hasClickHandler = () => Boolean(rest.onClick || rest['on:click'])\n  const rowAs = () => (local.as ?? (hasClickHandler() ? 'button' : 'div')) as T\n\n  return (\n    <Polymorphic\n      as={rowAs()}\n      type={rowAs() === 'button' ? (local.type ?? 'button') : local.type}\n      tabIndex={local.tabIndex ?? (rowAs() === 'button' || rowAs() === 'a' ? 0 : undefined)}\n      aria-current={local.selected ? 'true' : undefined}\n      data-selected={local.selected ? '' : undefined}\n      data-description={local.description ? '' : undefined}\n      data-stack-trailing={local.stackTrailing === false ? 'never' : undefined}\n      class={cn(\n        'group/row list-row-description flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm',\n        'transition-colors ease-out outline-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        {\n          'h-row-sm': local.dense && !local.description,\n          'h-row-md': !local.dense && !local.description,\n        },\n        {\n          'bg-primary-subtle text-foreground': local.selected,\n          'hover:bg-surface-hover': !local.selected,\n        },\n        local.class\n      )}\n      {...(rest as ComponentProps<'div'>)}\n    >\n      <Show when={local.leading}>\n        <span\n          data-slot=\"list-row-leading\"\n          class=\"flex shrink-0 items-center justify-center [&_svg]:size-4\"\n        >\n          {local.leading}\n        </span>\n      </Show>\n      <div data-slot=\"list-row-content\" class=\"flex min-w-0 flex-1 items-center gap-2.5\">\n        <span data-slot=\"list-row-label\" class=\"flex min-w-0 flex-1 flex-col\">\n          <span class=\"truncate\">{local.children}</span>\n          <Show when={local.description}>\n            <span\n              data-slot=\"list-row-description\"\n              class={cn(\n                'text-xs break-words',\n                local.selected ? 'text-foreground' : 'text-muted-foreground'\n              )}\n            >\n              {local.description}\n            </span>\n          </Show>\n        </span>\n        <Show when={local.trailing}>\n          <span\n            data-slot=\"list-row-trailing\"\n            class={cn(\n              'ms-auto flex shrink-0 items-center gap-1',\n              local.selected ? 'text-foreground' : 'text-muted-foreground'\n            )}\n          >\n            {local.trailing}\n          </span>\n        </Show>\n      </div>\n    </Polymorphic>\n  )\n}\n"],"mappings":";;;;;;;;;;AAoCA,SAAgBqB,eAAiDC,OAA+B;CAC9F,MAAM,CAACC,OAAOC,QAAQlB,WAAWgB,OAAkC;EACjE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CACD,MAAMG,wBAAwBC,QAAQF,KAAKG,WAAWH,KAAK,WAAW;CACtE,MAAMI,cAAeL,MAAMH,OAAOK,gBAAgB,IAAI,WAAW;CAEjE,OAAAI,gBACG5B,aAAW6B,WAAA;EAAA,IACVV,KAAE;GAAA,OAAEQ,MAAM;EAAC;EAAA,IACXV,OAAI;GAAA,OAAEa,WAAAH,MAAM,MAAM,QAAQ,CAAA,CAAA,IAAIL,MAAML,QAAQ,WAAYK,MAAML;EAAI;EAAA,IAClEc,WAAQ;GAAA,OAAET,MAAMS,aAAaJ,MAAM,MAAM,YAAYA,MAAM,MAAM,MAAM,IAAIK,KAAAA;EAAU;EAAA,KAAA,kBAAA;GAAA,OACvEV,MAAMZ,WAAW,SAASsB,KAAAA;EAAS;EAAA,KAAA,mBAAA;GAAA,OAClCV,MAAMZ,WAAW,KAAKsB,KAAAA;EAAS;EAAA,KAAA,sBAAA;GAAA,OAC5BV,MAAMP,cAAc,KAAKiB,KAAAA;EAAS;EAAA,KAAA,yBAAA;GAAA,OAC/BV,MAAMN,kBAAkB,QAAQ,UAAUgB,KAAAA;EAAS;EAAA,KAAA,WAAA;GAAA,OACjE1B,GACL,4FACA,2CACA,oFACA;IACE,YAAYgB,MAAMX,SAAS,CAACW,MAAMP;IAClC,YAAY,CAACO,MAAMX,SAAS,CAACW,MAAMP;GACrC,GACA;IACE,qCAAqCO,MAAMZ;IAC3C,0BAA0B,CAACY,MAAMZ;GACnC,GACAY,MAAMb,KACR;EAAC;CAAA,GACIc,MAA6B,EAAA,IAAAc,WAAA;EAAA,OAAA,CAAAT,gBAEjCxB,MAAI;GAAA,IAACkC,OAAI;IAAA,OAAEhB,MAAMV;GAAO;GAAA,IAAAyB,WAAA;IAAA,IAAAE,OAAAC,OAAA;IAAAC,OAAAF,YAKpBjB,MAAMV,OAAO;IAAA,OAAA2B;GAAA;EAAA,CAAA,UAAA;GAAA,IAAAG,QAAAC,QAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC;GAAAJ,OAAAK,aAKUxB,MAAMe,QAAQ;GAAAI,OAAAG,OAAAhB,gBACrCxB,MAAI;IAAA,IAACkC,OAAI;KAAA,OAAEhB,MAAMP;IAAW;IAAA,IAAAsB,WAAA;KAAA,IAAAU,QAAAC,QAAA;KAAAP,OAAAM,aAQxBzB,MAAMP,WAAW;KAAAkC,aAAAC,UAAAH,OALXzC,GACL,uBACAgB,MAAMZ,WAAW,oBAAoB,uBACvC,CAAC,CAAA;KAAA,OAAAqC;IAAA;GAAA,CAAA,GAAA,IAAA;GAAAN,OAAAC,OAAAd,gBAMNxB,MAAI;IAAA,IAACkC,OAAI;KAAA,OAAEhB,MAAMR;IAAQ;IAAA,IAAAuB,WAAA;KAAA,IAAAc,QAAAC,QAAA;KAAAX,OAAAU,aAQrB7B,MAAMR,QAAQ;KAAAmC,aAAAC,UAAAC,OALR7C,GACL,4CACAgB,MAAMZ,WAAW,oBAAoB,uBACvC,CAAC,CAAA;KAAA,OAAAyC;IAAA;GAAA,CAAA,GAAA,IAAA;GAAA,OAAAT;EAAA,EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAQb"}
+{"version":3,"file":"list-row-control.js","names":["PolymorphicProps","Polymorphic","ComponentProps","JSX","ValidComponent","Show","splitProps","cn","ListRowControlProps","T","class","selected","dense","leading","Element","trailing","description","stackTrailing","type","ListRowControlBaseProps","as","ListRowControl","props","local","rest","hasClickHandler","Boolean","onClick","rowAs","_$createComponent","_$mergeProps","_$memo","tabIndex","undefined","aria-current","data-selected","data-description","data-stack-trailing","children","when","_el$","_tmpl$","_$insert","_el$2","_tmpl$4","_el$3","firstChild","_el$4","_el$5","_tmpl$2","_$effect","_$className","_el$6","_tmpl$3","_$createComponent","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/composites/list-row/list-row-control.tsx"],"sourcesContent":["import type { PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { Polymorphic } from '@kobalte/core/polymorphic'\nimport type { ComponentProps, JSX, ValidComponent } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\nexport type ListRowControlProps<T extends ValidComponent = 'div'> = PolymorphicProps<\n  T,\n  {\n    class?: string\n    /** Marks the row as current. Sets `aria-current` for a link row. */\n    selected?: boolean\n    /** Draw the row at the compact height. */\n    dense?: boolean\n    /** Leading slot: an avatar, an icon, a checkbox. */\n    leading?: JSX.Element\n    /** Trailing slot: a count, a menu trigger, a timestamp. */\n    trailing?: JSX.Element\n    /** A second line that wraps and grows the row to fit its content. */\n    description?: string\n    /**\n     * Whether a described row may drop its trailing slot onto its own line when\n     * the row gets narrow (the default). Pass `false` for a short, truncating\n     * label whose single action must stay beside it.\n     */\n    stackTrailing?: boolean\n    /** Native button type; defaults to `button` for button rows. */\n    type?: ComponentProps<'button'>['type']\n  }\n>\n\ntype ListRowControlBaseProps<T extends ValidComponent = 'div'> = ListRowControlProps<T> & {\n  as?: T\n}\n\n/** A tree-shakeable ListRow renderer without optional tooltip behavior. */\nexport function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowControlProps<T>) {\n  const [local, rest] = splitProps(props as ListRowControlBaseProps, [\n    'as',\n    'class',\n    'selected',\n    'dense',\n    'leading',\n    'trailing',\n    'description',\n    'stackTrailing',\n    'type',\n    'tabIndex',\n    'children',\n  ])\n  const hasClickHandler = () => Boolean(rest.onClick || rest['on:click'])\n  const rowAs = () => (local.as ?? (hasClickHandler() ? 'button' : 'div')) as T\n\n  return (\n    <Polymorphic\n      as={rowAs()}\n      data-slot=\"list-row\"\n      type={rowAs() === 'button' ? (local.type ?? 'button') : local.type}\n      tabIndex={local.tabIndex ?? (rowAs() === 'button' || rowAs() === 'a' ? 0 : undefined)}\n      aria-current={local.selected ? 'true' : undefined}\n      data-selected={local.selected ? '' : undefined}\n      data-description={local.description ? '' : undefined}\n      data-stack-trailing={local.stackTrailing === false ? 'never' : undefined}\n      class={cn(\n        'group/row list-row-description flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm',\n        'transition-colors ease-out outline-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        {\n          'h-row-sm': local.dense && !local.description,\n          'h-row-md': !local.dense && !local.description,\n        },\n        {\n          'bg-primary-subtle text-foreground': local.selected,\n          'hover:bg-surface-hover': !local.selected,\n        },\n        local.class\n      )}\n      {...(rest as ComponentProps<'div'>)}\n    >\n      <Show when={local.leading}>\n        <span\n          data-slot=\"list-row-leading\"\n          class=\"flex shrink-0 items-center justify-center [&_svg]:size-4\"\n        >\n          {local.leading}\n        </span>\n      </Show>\n      <div data-slot=\"list-row-content\" class=\"flex min-w-0 flex-1 items-center gap-2.5\">\n        <span data-slot=\"list-row-label\" class=\"flex min-w-0 flex-1 flex-col\">\n          <span class=\"truncate\">{local.children}</span>\n          <Show when={local.description}>\n            <span\n              data-slot=\"list-row-description\"\n              class={cn(\n                'text-xs break-words',\n                local.selected ? 'text-foreground' : 'text-muted-foreground'\n              )}\n            >\n              {local.description}\n            </span>\n          </Show>\n        </span>\n        <Show when={local.trailing}>\n          <span\n            data-slot=\"list-row-trailing\"\n            class={cn(\n              'ms-auto flex shrink-0 items-center gap-1',\n              local.selected ? 'text-foreground' : 'text-muted-foreground'\n            )}\n          >\n            {local.trailing}\n          </span>\n        </Show>\n      </div>\n    </Polymorphic>\n  )\n}\n"],"mappings":";;;;;;;;;;AAoCA,SAAgBqB,eAAiDC,OAA+B;CAC9F,MAAM,CAACC,OAAOC,QAAQlB,WAAWgB,OAAkC;EACjE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CACD,MAAMG,wBAAwBC,QAAQF,KAAKG,WAAWH,KAAK,WAAW;CACtE,MAAMI,cAAeL,MAAMH,OAAOK,gBAAgB,IAAI,WAAW;CAEjE,OAAAI,gBACG5B,aAAW6B,WAAA;EAAA,IACVV,KAAE;GAAA,OAAEQ,MAAM;EAAC;EAAA,aAAA;EAAA,IAEXV,OAAI;GAAA,OAAEa,WAAAH,MAAM,MAAM,QAAQ,CAAA,CAAA,IAAIL,MAAML,QAAQ,WAAYK,MAAML;EAAI;EAAA,IAClEc,WAAQ;GAAA,OAAET,MAAMS,aAAaJ,MAAM,MAAM,YAAYA,MAAM,MAAM,MAAM,IAAIK,KAAAA;EAAU;EAAA,KAAA,kBAAA;GAAA,OACvEV,MAAMZ,WAAW,SAASsB,KAAAA;EAAS;EAAA,KAAA,mBAAA;GAAA,OAClCV,MAAMZ,WAAW,KAAKsB,KAAAA;EAAS;EAAA,KAAA,sBAAA;GAAA,OAC5BV,MAAMP,cAAc,KAAKiB,KAAAA;EAAS;EAAA,KAAA,yBAAA;GAAA,OAC/BV,MAAMN,kBAAkB,QAAQ,UAAUgB,KAAAA;EAAS;EAAA,KAAA,WAAA;GAAA,OACjE1B,GACL,4FACA,2CACA,oFACA;IACE,YAAYgB,MAAMX,SAAS,CAACW,MAAMP;IAClC,YAAY,CAACO,MAAMX,SAAS,CAACW,MAAMP;GACrC,GACA;IACE,qCAAqCO,MAAMZ;IAC3C,0BAA0B,CAACY,MAAMZ;GACnC,GACAY,MAAMb,KACR;EAAC;CAAA,GACIc,MAA6B,EAAA,IAAAc,WAAA;EAAA,OAAA,CAAAT,gBAEjCxB,MAAI;GAAA,IAACkC,OAAI;IAAA,OAAEhB,MAAMV;GAAO;GAAA,IAAAyB,WAAA;IAAA,IAAAE,OAAAC,OAAA;IAAAC,OAAAF,YAKpBjB,MAAMV,OAAO;IAAA,OAAA2B;GAAA;EAAA,CAAA,UAAA;GAAA,IAAAG,QAAAC,QAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC;GAAAJ,OAAAK,aAKUxB,MAAMe,QAAQ;GAAAI,OAAAG,OAAAhB,gBACrCxB,MAAI;IAAA,IAACkC,OAAI;KAAA,OAAEhB,MAAMP;IAAW;IAAA,IAAAsB,WAAA;KAAA,IAAAU,QAAAC,QAAA;KAAAP,OAAAM,aAQxBzB,MAAMP,WAAW;KAAAkC,aAAAC,UAAAH,OALXzC,GACL,uBACAgB,MAAMZ,WAAW,oBAAoB,uBACvC,CAAC,CAAA;KAAA,OAAAqC;IAAA;GAAA,CAAA,GAAA,IAAA;GAAAN,OAAAC,OAAAd,gBAMNxB,MAAI;IAAA,IAACkC,OAAI;KAAA,OAAEhB,MAAMR;IAAQ;IAAA,IAAAuB,WAAA;KAAA,IAAAc,QAAAC,QAAA;KAAAX,OAAAU,aAQrB7B,MAAMR,QAAQ;KAAAmC,aAAAC,UAAAC,OALR7C,GACL,4CACAgB,MAAMZ,WAAW,oBAAoB,uBACvC,CAAC,CAAA;KAAA,OAAAyC;IAAA;GAAA,CAAA,GAAA,IAAA;GAAA,OAAAT;EAAA,EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAQb"}

package/dist/components/composites/list-row/list-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-row.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/list-row/list-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9D,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAE7E,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IAAI,gBAAgB,CAC3E,CAAC,EACD,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACvB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gEAAgE;IAChE,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;IACvC,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CACF,CAAA;AAuCD;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,kCAgC/E;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,UAAU,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,kCAoB3F"}
+{"version":3,"file":"list-row.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/list-row/list-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9D,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAE7E,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IAAI,gBAAgB,CAC3E,CAAC,EACD,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACvB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gEAAgE;IAChE,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;IACvC,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CACF,CAAA;AAuCD;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,kCAgC/E;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,UAAU,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,kCAoB3F"}

package/dist/components/composites/list-row/list-row.js

@@ -1,11 +1,12 @@
 import { cn } from "../../../lib/utils.js";
+import { Text } from "../../ui/typography/typography.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip/tooltip.js";
 import { ListRowControl } from "./list-row-control.js";
 import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
 import { Show, createSignal, createUniqueId, splitProps } from "solid-js";
 //#region src/components/composites/list-row/list-row.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<span class="shrink-0 opacity-0 transition-opacity ease-out group-hover/list-header:opacity-100 focus-within:opacity-100">`);
-var _tmpl$2 = /*#__PURE__*/ template(`<div class="group/list-header flex items-center gap-1 px-2 py-1"><span class="min-w-0 flex-1 truncate text-2xs font-medium tracking-wide text-muted-foreground uppercase">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div class="group/list-header flex items-center gap-1 px-2 py-1">`);
 var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=list-group><div class="flex flex-col gap-0.5">`);
 /** Adapts TooltipTrigger's polymorphic target to ListRow's semantic element. */
 function ListRowTooltipTarget(props) {
@@ -105,7 +106,7 @@ function ListGroup(props) {
 		"children"
 	]);
 	return (() => {
-		var _el$ = _tmpl$3(), _el$5 = _el$.firstChild;
+		var _el$ = _tmpl$3(), _el$4 = _el$.firstChild;
 		spread(_el$, mergeProps({ get ["class"]() {
 			return cn("flex flex-col gap-0.5", local.class);
 		} }, rest), false, true);
@@ -114,22 +115,28 @@ function ListGroup(props) {
 				return local.label;
 			},
 			get children() {
-				var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
-				insert(_el$3, () => local.label);
+				var _el$2 = _tmpl$2();
+				insert(_el$2, createComponent(Text, {
+					variant: "overline",
+					"class": "min-w-0 flex-1 truncate",
+					get children() {
+						return local.label;
+					}
+				}), null);
 				insert(_el$2, createComponent(Show, {
 					get when() {
 						return local.action;
 					},
 					get children() {
-						var _el$4 = _tmpl$();
-						insert(_el$4, () => local.action);
-						return _el$4;
+						var _el$3 = _tmpl$();
+						insert(_el$3, () => local.action);
+						return _el$3;
 					}
 				}), null);
 				return _el$2;
 			}
-		}), _el$5);
-		insert(_el$5, () => local.children);
+		}), _el$4);
+		insert(_el$4, () => local.children);
 		return _el$;
 	})();
 }

package/dist/components/composites/list-row/list-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-row.js","names":["PolymorphicProps","ComponentProps","ValidComponent","createSignal","createUniqueId","Show","splitProps","Tooltip","TooltipContent","TooltipTrigger","cn","ListRowControl","ListRowControlProps","ListRowProps","T","tooltip","type","ListRowTooltipTargetProps","Omit","rowAs","externalDescribedBy","tooltipId","tooltipOpen","ListRowTooltipTarget","props","local","rest","describedBy","ids","undefined","flatMap","value","split","filter","Boolean","Set","join","_$createComponent","_$mergeProps","as","aria-describedby","ListRow","setTooltipOpen","hasClickHandler","onClick","rowType","rowProps","when","fallback","children","open","onOpenChange","id","ListGroup","label","action","JSX","Element","_el$","_tmpl$3","_el$5","firstChild","_$spread","class","_$insert","_el$2","_tmpl$2","_el$3","_el$4","_tmpl$","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/composites/list-row/list-row.tsx"],"sourcesContent":["import type { PolymorphicProps } from '@kobalte/core/polymorphic'\nimport type { ComponentProps, ValidComponent } from 'solid-js'\nimport { createSignal, createUniqueId, Show, splitProps } from 'solid-js'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'\nimport { cn } from '#lib/utils'\nimport { ListRowControl, type ListRowControlProps } from './list-row-control'\n\nexport type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<\n  T,\n  ListRowControlProps<T> & {\n    /** A short explanation shown on pointer hover and keyboard focus. */\n    tooltip?: string\n    /** Native button type; defaults to `button` for button rows. */\n    type?: ComponentProps<'button'>['type']\n    /** Additional accessible description preserved on plain and rich rows. */\n    'aria-describedby'?: string\n  }\n>\n\ntype ListRowTooltipTargetProps<T extends ValidComponent = 'div'> = Omit<ListRowProps<T>, 'as'> & {\n  rowAs?: T\n  externalDescribedBy?: string\n  tooltipId?: string\n  tooltipOpen?: () => boolean\n}\n\n/** Adapts TooltipTrigger's polymorphic target to ListRow's semantic element. */\nfunction ListRowTooltipTarget<T extends ValidComponent = 'div'>(\n  props: ListRowTooltipTargetProps<T>\n) {\n  const [local, rest] = splitProps(props as ListRowTooltipTargetProps, [\n    'rowAs',\n    'externalDescribedBy',\n    'tooltipId',\n    'tooltipOpen',\n  ])\n  const describedBy = () => {\n    const ids = [\n      rest['aria-describedby'],\n      local.externalDescribedBy,\n      local.tooltipOpen?.() ? local.tooltipId : undefined,\n    ]\n      .flatMap((value) => value?.split(/\\s+/) ?? [])\n      .filter(Boolean)\n    return [...new Set(ids)].join(' ') || undefined\n  }\n\n  return (\n    <ListRowControl\n      as={local.rowAs}\n      {...(rest as unknown as ListRowControlProps<T>)}\n      aria-describedby={describedBy()}\n    />\n  )\n}\n\n/**\n * Rich row composition with optional hover and keyboard tooltip behavior.\n * Import ListRowControl when the tooltip API is not needed and the consumer\n * wants the plain renderer to tree-shake independently.\n */\nexport function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>) {\n  const [local, rest] = splitProps(props as ListRowProps<T>, ['as', 'tooltip', 'aria-describedby'])\n  const [tooltipOpen, setTooltipOpen] = createSignal(false)\n  const tooltipId = `list-row-tooltip-${createUniqueId()}`\n  const hasClickHandler = () => Boolean(rest.onClick || rest['on:click'])\n  const rowAs = () => (local.as ?? (hasClickHandler() ? 'button' : 'div')) as T\n  const rowType = () => (rowAs() === 'button' ? (rest.type ?? 'button') : rest.type)\n  const rowProps = () =>\n    ({\n      ...rest,\n      type: rowType(),\n      'aria-describedby': local['aria-describedby'],\n    }) as unknown as ListRowControlProps<T>\n\n  return (\n    <Show when={local.tooltip} fallback={<ListRowControl as={rowAs()} {...rowProps()} />}>\n      <Tooltip open={tooltipOpen()} onOpenChange={setTooltipOpen}>\n        <TooltipTrigger\n          as={ListRowTooltipTarget}\n          rowAs={rowAs()}\n          type={rowType()}\n          externalDescribedBy={local['aria-describedby']}\n          tooltipId={tooltipId}\n          tooltipOpen={tooltipOpen}\n          {...(rest as ListRowTooltipTargetProps<T>)}\n        >\n          {rest.children}\n        </TooltipTrigger>\n        <TooltipContent id={tooltipId}>{local.tooltip}</TooltipContent>\n      </Tooltip>\n    </Show>\n  )\n}\n\n/**\n * A group of rows with an optional heading and a scrolling body. The heading is\n * a plain label rather than a control: grouping is for reading, and a disclosure\n * on a list of five rows costs more attention than it saves.\n */\nexport function ListGroup(\n  props: ComponentProps<'div'> & { label?: string; action?: import('solid-js').JSX.Element }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'action', 'children'])\n  return (\n    <div data-slot=\"list-group\" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>\n      <Show when={local.label}>\n        <div class=\"group/list-header flex items-center gap-1 px-2 py-1\">\n          <span class=\"min-w-0 flex-1 truncate text-2xs font-medium tracking-wide text-muted-foreground uppercase\">\n            {local.label}\n          </span>\n          <Show when={local.action}>\n            <span class=\"shrink-0 opacity-0 transition-opacity ease-out group-hover/list-header:opacity-100 focus-within:opacity-100\">\n              {local.action}\n            </span>\n          </Show>\n        </div>\n      </Show>\n      <div class=\"flex flex-col gap-0.5\">{local.children}</div>\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"list-row.js","names":["PolymorphicProps","ComponentProps","ValidComponent","createSignal","createUniqueId","Show","splitProps","Tooltip","TooltipContent","TooltipTrigger","Text","cn","ListRowControl","ListRowControlProps","ListRowProps","T","tooltip","type","ListRowTooltipTargetProps","Omit","rowAs","externalDescribedBy","tooltipId","tooltipOpen","ListRowTooltipTarget","props","local","rest","describedBy","ids","undefined","flatMap","value","split","filter","Boolean","Set","join","_$createComponent","_$mergeProps","as","aria-describedby","ListRow","setTooltipOpen","hasClickHandler","onClick","rowType","rowProps","when","fallback","children","open","onOpenChange","id","ListGroup","label","action","JSX","Element","_el$","_tmpl$3","_el$4","firstChild","_$spread","class","_$insert","_el$2","_tmpl$2","variant","_el$3","_tmpl$","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/composites/list-row/list-row.tsx"],"sourcesContent":["import type { PolymorphicProps } from '@kobalte/core/polymorphic'\nimport type { ComponentProps, ValidComponent } from 'solid-js'\nimport { createSignal, createUniqueId, Show, splitProps } from 'solid-js'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'\nimport { Text } from '../../ui/typography'\nimport { cn } from '#lib/utils'\nimport { ListRowControl, type ListRowControlProps } from './list-row-control'\n\nexport type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<\n  T,\n  ListRowControlProps<T> & {\n    /** A short explanation shown on pointer hover and keyboard focus. */\n    tooltip?: string\n    /** Native button type; defaults to `button` for button rows. */\n    type?: ComponentProps<'button'>['type']\n    /** Additional accessible description preserved on plain and rich rows. */\n    'aria-describedby'?: string\n  }\n>\n\ntype ListRowTooltipTargetProps<T extends ValidComponent = 'div'> = Omit<ListRowProps<T>, 'as'> & {\n  rowAs?: T\n  externalDescribedBy?: string\n  tooltipId?: string\n  tooltipOpen?: () => boolean\n}\n\n/** Adapts TooltipTrigger's polymorphic target to ListRow's semantic element. */\nfunction ListRowTooltipTarget<T extends ValidComponent = 'div'>(\n  props: ListRowTooltipTargetProps<T>\n) {\n  const [local, rest] = splitProps(props as ListRowTooltipTargetProps, [\n    'rowAs',\n    'externalDescribedBy',\n    'tooltipId',\n    'tooltipOpen',\n  ])\n  const describedBy = () => {\n    const ids = [\n      rest['aria-describedby'],\n      local.externalDescribedBy,\n      local.tooltipOpen?.() ? local.tooltipId : undefined,\n    ]\n      .flatMap((value) => value?.split(/\\s+/) ?? [])\n      .filter(Boolean)\n    return [...new Set(ids)].join(' ') || undefined\n  }\n\n  return (\n    <ListRowControl\n      as={local.rowAs}\n      {...(rest as unknown as ListRowControlProps<T>)}\n      aria-describedby={describedBy()}\n    />\n  )\n}\n\n/**\n * Rich row composition with optional hover and keyboard tooltip behavior.\n * Import ListRowControl when the tooltip API is not needed and the consumer\n * wants the plain renderer to tree-shake independently.\n */\nexport function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>) {\n  const [local, rest] = splitProps(props as ListRowProps<T>, ['as', 'tooltip', 'aria-describedby'])\n  const [tooltipOpen, setTooltipOpen] = createSignal(false)\n  const tooltipId = `list-row-tooltip-${createUniqueId()}`\n  const hasClickHandler = () => Boolean(rest.onClick || rest['on:click'])\n  const rowAs = () => (local.as ?? (hasClickHandler() ? 'button' : 'div')) as T\n  const rowType = () => (rowAs() === 'button' ? (rest.type ?? 'button') : rest.type)\n  const rowProps = () =>\n    ({\n      ...rest,\n      type: rowType(),\n      'aria-describedby': local['aria-describedby'],\n    }) as unknown as ListRowControlProps<T>\n\n  return (\n    <Show when={local.tooltip} fallback={<ListRowControl as={rowAs()} {...rowProps()} />}>\n      <Tooltip open={tooltipOpen()} onOpenChange={setTooltipOpen}>\n        <TooltipTrigger\n          as={ListRowTooltipTarget}\n          rowAs={rowAs()}\n          type={rowType()}\n          externalDescribedBy={local['aria-describedby']}\n          tooltipId={tooltipId}\n          tooltipOpen={tooltipOpen}\n          {...(rest as ListRowTooltipTargetProps<T>)}\n        >\n          {rest.children}\n        </TooltipTrigger>\n        <TooltipContent id={tooltipId}>{local.tooltip}</TooltipContent>\n      </Tooltip>\n    </Show>\n  )\n}\n\n/**\n * A group of rows with an optional heading and a scrolling body. The heading is\n * a plain label rather than a control: grouping is for reading, and a disclosure\n * on a list of five rows costs more attention than it saves.\n */\nexport function ListGroup(\n  props: ComponentProps<'div'> & { label?: string; action?: import('solid-js').JSX.Element }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'action', 'children'])\n  return (\n    <div data-slot=\"list-group\" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>\n      <Show when={local.label}>\n        <div class=\"group/list-header flex items-center gap-1 px-2 py-1\">\n          <Text variant=\"overline\" class=\"min-w-0 flex-1 truncate\">\n            {local.label}\n          </Text>\n          <Show when={local.action}>\n            <span class=\"shrink-0 opacity-0 transition-opacity ease-out group-hover/list-header:opacity-100 focus-within:opacity-100\">\n              {local.action}\n            </span>\n          </Show>\n        </div>\n      </Show>\n      <div class=\"flex flex-col gap-0.5\">{local.children}</div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/composites/settings/settings-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-navigation.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/settings/settings-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInC,OAAO,EAAyB,KAAK,aAAa,EAAE,MAAM,eAAe,CAAA;AAEzE,gFAAgF;AAChF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,kEAAkE;AAClE,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,SAAS,sBAAsB,EAAE,CAAA;CACzC,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,aAAa,EACb,YAAY,GAAG,UAAU,GAAG,aAAa,CAC1C,GAAG;IACF,6EAA6E;IAC7E,MAAM,EAAE,SAAS,uBAAuB,EAAE,CAAA;IAC1C,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAA;IACb,uEAAuE;IACvE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC;iGAC6F;IAC7F,cAAc,CAAC,EACX,OAAO,GACP,CAAC,CACC,OAAO,EAAE,iBAAiB,GAAG,SAAS,KACnC,IAAI,CAAC,CAAA,CAAC,8EAA8E;IAC7F,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AA0CD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eAqFhE"}
+{"version":3,"file":"settings-navigation.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/settings/settings-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInC,OAAO,EAAyB,KAAK,aAAa,EAAE,MAAM,eAAe,CAAA;AAGzE,gFAAgF;AAChF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,kEAAkE;AAClE,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,SAAS,sBAAsB,EAAE,CAAA;CACzC,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,aAAa,EACb,YAAY,GAAG,UAAU,GAAG,aAAa,CAC1C,GAAG;IACF,6EAA6E;IAC7E,MAAM,EAAE,SAAS,uBAAuB,EAAE,CAAA;IAC1C,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAA;IACb,uEAAuE;IACvE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC;iGAC6F;IAC7F,cAAc,CAAC,EACX,OAAO,GACP,CAAC,CACC,OAAO,EAAE,iBAAiB,GAAG,SAAS,KACnC,IAAI,CAAC,CAAA,CAAC,8EAA8E;IAC7F,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AA0CD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eAwFhE"}

package/dist/components/composites/settings/settings-navigation.js

@@ -1,10 +1,11 @@
 import { cn } from "../../../lib/utils.js";
+import { Text } from "../../ui/typography/typography.js";
 import { TabsList, TabsTrigger } from "../../ui/tabs/tabs.js";
 import { sidebarNavItemClass, sidebarNavItemStateClass } from "../../layout/sidebar-nav/sidebar-nav.js";
 import { createComponent, insert, memo, mergeProps, setAttribute, template } from "solid-js/web";
 import { createEffect, createUniqueId, onCleanup, splitProps } from "solid-js";
 //#region src/components/composites/settings/settings-navigation.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div role=none data-slot=settings-navigation-group class="flex min-w-0 flex-col gap-0.5"><span class=sr-only></span><span aria-hidden=true class="px-2 py-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase">`);
+var _tmpl$ = /*#__PURE__*/ template(`<div role=none data-slot=settings-navigation-group class="flex min-w-0 flex-col gap-0.5"><span class=sr-only>`);
 var _tmpl$2 = /*#__PURE__*/ template(`<span class="min-w-0 truncate">`);
 /**
 * SettingsNavigation.
@@ -79,10 +80,18 @@ function SettingsNavigation(props) {
 		return local.groups.map((group, groupIndex) => {
 			const groupId = `${groupIdPrefix}-group-${groupIndex}`;
 			return (() => {
-				var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+				var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
 				setAttribute(_el$2, "id", groupId);
 				insert(_el$2, () => group.label);
-				insert(_el$3, () => group.label);
+				insert(_el$, createComponent(Text, {
+					variant: "overline",
+					tone: "inherit",
+					"aria-hidden": "true",
+					"class": "px-2 py-1.5 text-sidebar-muted-foreground",
+					get children() {
+						return group.label;
+					}
+				}), null);
 				insert(_el$, () => group.items.map((item) => createComponent(TabsTrigger, {
 					"data-slot": "settings-navigation-trigger",
 					orientation: "vertical",
@@ -105,9 +114,9 @@ function SettingsNavigation(props) {
 					},
 					get children() {
 						return [memo(() => item.icon), (() => {
-							var _el$4 = _tmpl$2();
-							insert(_el$4, () => item.label);
-							return _el$4;
+							var _el$3 = _tmpl$2();
+							insert(_el$3, () => item.label);
+							return _el$3;
 						})()];
 					}
 				})), null);

package/dist/components/composites/settings/settings-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-navigation.js","names":["JSX","createEffect","createUniqueId","onCleanup","splitProps","cn","sidebarNavItemClass","sidebarNavItemStateClass","TabsList","TabsTrigger","TabsListProps","SettingsNavigationItem","value","label","icon","Element","disabled","SettingsNavigationGroup","items","SettingsNavigationProps","Omit","groups","onReselect","revealSelected","trigger","HTMLButtonElement","scrollContainerNearest","container","HTMLElement","row","style","window","getComputedStyle","box","getBoundingClientRect","rowBox","overflowX","left","scrollLeft","right","overflowY","top","scrollTop","bottom","revealNearest","parentElement","SettingsNavigation","props","local","rest","triggers","Map","groupIdPrefix","reveal","revealCurrent","get","addEventListener","removeEventListener","_$createComponent","_$mergeProps","aria-label","orientation","class","children","map","group","groupIndex","groupId","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$setAttribute","_$insert","item","ref","element","set","delete","onClick","idle","_$memo","_el$4","_tmpl$2","_$createComponent","_$mergeProps","_$memo"],"sources":["../../../../src/components/composites/settings/settings-navigation.tsx"],"sourcesContent":["import type { JSX } from 'solid-js'\nimport { createEffect, createUniqueId, onCleanup, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { sidebarNavItemClass, sidebarNavItemStateClass } from '../../layout/sidebar-nav/sidebar-nav'\nimport { TabsList, TabsTrigger, type TabsListProps } from '../../ui/tabs'\n\n/** One host-owned destination in a settings tab list. Values must be unique. */\nexport type SettingsNavigationItem = {\n  value: string\n  label: string\n  icon?: JSX.Element\n  disabled?: boolean\n}\n\n/** A visible, accessibly named group of settings destinations. */\nexport type SettingsNavigationGroup = {\n  label: string\n  items: readonly SettingsNavigationItem[]\n}\n\nexport type SettingsNavigationProps = Omit<\n  TabsListProps,\n  'appearance' | 'children' | 'orientation'\n> & {\n  /** Groups are presentation only; the host owns the tab values and panels. */\n  groups: readonly SettingsNavigationGroup[]\n  /** The same controlled value supplied to the enclosing `Tabs`. */\n  value: string\n  /** Called when the already-selected destination is activated again. */\n  onReselect?: (value: string) => void\n  /** Reveal the selected row on value changes and window resizes. Defaults to nearest scrolling\n   * of the ancestors that expose a scroll affordance; hidden-overflow ancestors never move. */\n  revealSelected?:\n    | boolean\n    | ((\n        trigger: HTMLButtonElement | undefined\n      ) => void) /** Every tab list needs a label independent of its visible group headings. */\n  'aria-label': string\n}\n\n/**\n * SettingsNavigation.\n *\n * A grouped vertical tab list for sibling settings panels. It composes the\n * shared Tabs behaviour with the shared sidebar row recipe; the host supplies\n * the controlled value, panel content, icons and any persistence or routing.\n * Use ordinary tabs for a short, ungrouped row of view choices.\n *\n * Kobalte owns roving focus, arrow keys, selection and tab/panel ARIA. This\n * component adds no URL, storage or host-specific state. Set\n * `revealSelected={false}` when the surrounding layout does not use an internal\n * scrolling viewport.\n */\n/**\n * Reveal by scrolling only the ancestors that expose a scroll affordance\n * (`auto` or `scroll`), by the exact nearest-edge delta. `scrollIntoView` also\n * pans `overflow: hidden` ancestors, which are programmatically scrollable but\n * give the user no way back, so one over-pan left earlier rows permanently\n * clipped outside the viewport with no scroll to recover them (#182).\n */\nfunction scrollContainerNearest(container: HTMLElement, row: HTMLElement): void {\n  const style = window.getComputedStyle(container)\n  const box = container.getBoundingClientRect()\n  const rowBox = row.getBoundingClientRect()\n  if (style.overflowX === 'auto' || style.overflowX === 'scroll') {\n    if (rowBox.left < box.left) container.scrollLeft += rowBox.left - box.left\n    else if (rowBox.right > box.right) container.scrollLeft += rowBox.right - box.right\n  }\n  if (style.overflowY === 'auto' || style.overflowY === 'scroll') {\n    if (rowBox.top < box.top) container.scrollTop += rowBox.top - box.top\n    else if (rowBox.bottom > box.bottom) container.scrollTop += rowBox.bottom - box.bottom\n  }\n}\n\nfunction revealNearest(row: HTMLElement): void {\n  for (let container = row.parentElement; container; container = container.parentElement) {\n    scrollContainerNearest(container, row)\n  }\n}\n\nexport function SettingsNavigation(props: SettingsNavigationProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'aria-label',\n    'groups',\n    'value',\n    'onReselect',\n    'revealSelected',\n  ])\n  const triggers = new Map<string, HTMLButtonElement>()\n  const groupIdPrefix = `settings-navigation-${createUniqueId()}`\n\n  createEffect(() => {\n    const value = local.value\n    const reveal = local.revealSelected\n    if (reveal === false) return\n\n    const revealCurrent = () => {\n      const trigger = triggers.get(value)\n      if (typeof reveal === 'function') reveal(trigger)\n      else if (trigger) revealNearest(trigger)\n    }\n\n    revealCurrent()\n    window.addEventListener('resize', revealCurrent)\n    onCleanup(() => window.removeEventListener('resize', revealCurrent))\n  })\n\n  return (\n    <TabsList\n      data-slot=\"settings-navigation\"\n      aria-label={local['aria-label']}\n      orientation=\"vertical\"\n      class={cn(\n        'flex max-h-full min-h-0 min-w-0 shrink-0 flex-col items-stretch justify-start gap-2 overflow-x-hidden overflow-y-auto px-2 py-2',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.groups.map((group, groupIndex) => {\n        const groupId = `${groupIdPrefix}-group-${groupIndex}`\n        return (\n          <div\n            role=\"none\"\n            data-slot=\"settings-navigation-group\"\n            class=\"flex min-w-0 flex-col gap-0.5\"\n          >\n            <span id={groupId} class=\"sr-only\">\n              {group.label}\n            </span>\n            <span\n              aria-hidden=\"true\"\n              class=\"px-2 py-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase\"\n            >\n              {group.label}\n            </span>\n            {group.items.map((item) => (\n              <TabsTrigger\n                data-slot=\"settings-navigation-trigger\"\n                orientation=\"vertical\"\n                aria-describedby={groupId}\n                value={item.value}\n                disabled={item.disabled}\n                ref={(element: HTMLButtonElement | undefined) => {\n                  if (element) triggers.set(item.value, element)\n                  else triggers.delete(item.value)\n                }}\n                onClick={() => {\n                  if (local.value === item.value) local.onReselect?.(item.value)\n                }}\n                class={cn(\n                  sidebarNavItemClass,\n                  sidebarNavItemStateClass.idle,\n                  'h-row-lg w-full justify-start border-0 px-3 py-2 text-left data-[selected]:bg-primary-subtle data-[selected]:text-foreground'\n                )}\n              >\n                {item.icon}\n                <span class=\"min-w-0 truncate\">{item.label}</span>\n              </TabsTrigger>\n            ))}\n          </div>\n        )\n      })}\n    </TabsList>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"settings-navigation.js","names":["JSX","createEffect","createUniqueId","onCleanup","splitProps","cn","sidebarNavItemClass","sidebarNavItemStateClass","TabsList","TabsTrigger","TabsListProps","Text","SettingsNavigationItem","value","label","icon","Element","disabled","SettingsNavigationGroup","items","SettingsNavigationProps","Omit","groups","onReselect","revealSelected","trigger","HTMLButtonElement","scrollContainerNearest","container","HTMLElement","row","style","window","getComputedStyle","box","getBoundingClientRect","rowBox","overflowX","left","scrollLeft","right","overflowY","top","scrollTop","bottom","revealNearest","parentElement","SettingsNavigation","props","local","rest","triggers","Map","groupIdPrefix","reveal","revealCurrent","get","addEventListener","removeEventListener","_$createComponent","_$mergeProps","aria-label","orientation","class","children","map","group","groupIndex","groupId","_el$","_tmpl$","_el$2","firstChild","_$setAttribute","_$insert","variant","tone","item","ref","element","set","delete","onClick","idle","_$memo","_el$3","_tmpl$2","_$createComponent","_$mergeProps","_$memo"],"sources":["../../../../src/components/composites/settings/settings-navigation.tsx"],"sourcesContent":["import type { JSX } from 'solid-js'\nimport { createEffect, createUniqueId, onCleanup, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { sidebarNavItemClass, sidebarNavItemStateClass } from '../../layout/sidebar-nav/sidebar-nav'\nimport { TabsList, TabsTrigger, type TabsListProps } from '../../ui/tabs'\nimport { Text } from '../../ui/typography'\n\n/** One host-owned destination in a settings tab list. Values must be unique. */\nexport type SettingsNavigationItem = {\n  value: string\n  label: string\n  icon?: JSX.Element\n  disabled?: boolean\n}\n\n/** A visible, accessibly named group of settings destinations. */\nexport type SettingsNavigationGroup = {\n  label: string\n  items: readonly SettingsNavigationItem[]\n}\n\nexport type SettingsNavigationProps = Omit<\n  TabsListProps,\n  'appearance' | 'children' | 'orientation'\n> & {\n  /** Groups are presentation only; the host owns the tab values and panels. */\n  groups: readonly SettingsNavigationGroup[]\n  /** The same controlled value supplied to the enclosing `Tabs`. */\n  value: string\n  /** Called when the already-selected destination is activated again. */\n  onReselect?: (value: string) => void\n  /** Reveal the selected row on value changes and window resizes. Defaults to nearest scrolling\n   * of the ancestors that expose a scroll affordance; hidden-overflow ancestors never move. */\n  revealSelected?:\n    | boolean\n    | ((\n        trigger: HTMLButtonElement | undefined\n      ) => void) /** Every tab list needs a label independent of its visible group headings. */\n  'aria-label': string\n}\n\n/**\n * SettingsNavigation.\n *\n * A grouped vertical tab list for sibling settings panels. It composes the\n * shared Tabs behaviour with the shared sidebar row recipe; the host supplies\n * the controlled value, panel content, icons and any persistence or routing.\n * Use ordinary tabs for a short, ungrouped row of view choices.\n *\n * Kobalte owns roving focus, arrow keys, selection and tab/panel ARIA. This\n * component adds no URL, storage or host-specific state. Set\n * `revealSelected={false}` when the surrounding layout does not use an internal\n * scrolling viewport.\n */\n/**\n * Reveal by scrolling only the ancestors that expose a scroll affordance\n * (`auto` or `scroll`), by the exact nearest-edge delta. `scrollIntoView` also\n * pans `overflow: hidden` ancestors, which are programmatically scrollable but\n * give the user no way back, so one over-pan left earlier rows permanently\n * clipped outside the viewport with no scroll to recover them (#182).\n */\nfunction scrollContainerNearest(container: HTMLElement, row: HTMLElement): void {\n  const style = window.getComputedStyle(container)\n  const box = container.getBoundingClientRect()\n  const rowBox = row.getBoundingClientRect()\n  if (style.overflowX === 'auto' || style.overflowX === 'scroll') {\n    if (rowBox.left < box.left) container.scrollLeft += rowBox.left - box.left\n    else if (rowBox.right > box.right) container.scrollLeft += rowBox.right - box.right\n  }\n  if (style.overflowY === 'auto' || style.overflowY === 'scroll') {\n    if (rowBox.top < box.top) container.scrollTop += rowBox.top - box.top\n    else if (rowBox.bottom > box.bottom) container.scrollTop += rowBox.bottom - box.bottom\n  }\n}\n\nfunction revealNearest(row: HTMLElement): void {\n  for (let container = row.parentElement; container; container = container.parentElement) {\n    scrollContainerNearest(container, row)\n  }\n}\n\nexport function SettingsNavigation(props: SettingsNavigationProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'aria-label',\n    'groups',\n    'value',\n    'onReselect',\n    'revealSelected',\n  ])\n  const triggers = new Map<string, HTMLButtonElement>()\n  const groupIdPrefix = `settings-navigation-${createUniqueId()}`\n\n  createEffect(() => {\n    const value = local.value\n    const reveal = local.revealSelected\n    if (reveal === false) return\n\n    const revealCurrent = () => {\n      const trigger = triggers.get(value)\n      if (typeof reveal === 'function') reveal(trigger)\n      else if (trigger) revealNearest(trigger)\n    }\n\n    revealCurrent()\n    window.addEventListener('resize', revealCurrent)\n    onCleanup(() => window.removeEventListener('resize', revealCurrent))\n  })\n\n  return (\n    <TabsList\n      data-slot=\"settings-navigation\"\n      aria-label={local['aria-label']}\n      orientation=\"vertical\"\n      class={cn(\n        'flex max-h-full min-h-0 min-w-0 shrink-0 flex-col items-stretch justify-start gap-2 overflow-x-hidden overflow-y-auto px-2 py-2',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.groups.map((group, groupIndex) => {\n        const groupId = `${groupIdPrefix}-group-${groupIndex}`\n        return (\n          <div\n            role=\"none\"\n            data-slot=\"settings-navigation-group\"\n            class=\"flex min-w-0 flex-col gap-0.5\"\n          >\n            <span id={groupId} class=\"sr-only\">\n              {group.label}\n            </span>\n            {/* The overline role on the sidebar's own muted foreground. */}\n            <Text\n              variant=\"overline\"\n              tone=\"inherit\"\n              aria-hidden=\"true\"\n              class=\"px-2 py-1.5 text-sidebar-muted-foreground\"\n            >\n              {group.label}\n            </Text>\n            {group.items.map((item) => (\n              <TabsTrigger\n                data-slot=\"settings-navigation-trigger\"\n                orientation=\"vertical\"\n                aria-describedby={groupId}\n                value={item.value}\n                disabled={item.disabled}\n                ref={(element: HTMLButtonElement | undefined) => {\n                  if (element) triggers.set(item.value, element)\n                  else triggers.delete(item.value)\n                }}\n                onClick={() => {\n                  if (local.value === item.value) local.onReselect?.(item.value)\n                }}\n                class={cn(\n                  sidebarNavItemClass,\n                  sidebarNavItemStateClass.idle,\n                  'h-row-lg w-full justify-start border-0 px-3 py-2 text-left data-[selected]:bg-primary-subtle data-[selected]:text-foreground'\n                )}\n              >\n                {item.icon}\n                <span class=\"min-w-0 truncate\">{item.label}</span>\n              </TabsTrigger>\n            ))}\n          </div>\n        )\n      })}\n    </TabsList>\n  )\n}\n"],"mappings":"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"}

package/dist/components/composites/settings/settings.d.ts

@@ -6,8 +6,9 @@ import type { ComponentProps, JSX } from 'solid-js';
  * one where drift is most visible: label sizes, control widths and description
  * placement all wander unless something fixes them.
  *
- * The row is a two-column layout at a fixed label width, so controls line up
- * down the page regardless of how long the labels are. `SettingsRow` also
+ * The row puts the label and description at the start and the control at the
+ * end (stacked on a narrow window), so controls line up down the page's end
+ * edge regardless of how long the labels are. `SettingsRow` also
  * exposes its label and description through the shared form-field context to
  * the first control inside it. `SettingsField` is the visual stacked layout;
  * use `FormField` when the control needs label, help, or validation wiring.

package/dist/components/composites/settings/settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/settings/settings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAMnD;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kEAAkE;IAClE,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,wFAAwF;IACxF,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAChC,eA0CF;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,4DAA4D;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,eAsDF;AAED,0EAA0E;AAC1E,wBAAgB,aAAa,CAC3B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,eAiBzF;AAED,2EAA2E;AAC3E,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eASxD"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/settings/settings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAMnD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kEAAkE;IAClE,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,wFAAwF;IACxF,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAChC,eA0CF;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,4DAA4D;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,eAsDF;AAED,0EAA0E;AAC1E,wBAAgB,aAAa,CAC3B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,eAiBzF;AAED,2EAA2E;AAC3E,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eASxD"}

package/dist/components/composites/settings/settings.js

@@ -17,8 +17,9 @@ var _tmpl$6 = /*#__PURE__*/ template(`<div data-slot=settings-page>`);
 * one where drift is most visible: label sizes, control widths and description
 * placement all wander unless something fixes them.
 *
-* The row is a two-column layout at a fixed label width, so controls line up
-* down the page regardless of how long the labels are. `SettingsRow` also
+* The row puts the label and description at the start and the control at the
+* end (stacked on a narrow window), so controls line up down the page's end
+* edge regardless of how long the labels are. `SettingsRow` also
 * exposes its label and description through the shared form-field context to
 * the first control inside it. `SettingsField` is the visual stacked layout;
 * use `FormField` when the control needs label, help, or validation wiring.

package/dist/components/composites/settings/settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings.js","names":["ComponentProps","JSX","createUniqueId","Show","splitProps","createFormFieldContext","FormFieldContext","cn","Heading","SettingsSection","props","title","description","action","Element","bodyLayout","local","rest","_el$","_tmpl$3","_el$2","firstChild","_el$3","_el$6","nextSibling","_$spread","_$mergeProps","class","_$insert","_$createComponent","as","size","children","when","_el$4","_tmpl$","_el$5","_tmpl$2","_$effect","_$className","SettingsRow","label","orientation","bare","rowId","labelId","descriptionId","field","defaultControlId","hint","error","undefined","group","Provider","value","_el$7","_tmpl$4","_el$8","_el$9","_el$1","_$setAttribute","_el$0","SettingsField","htmlFor","_el$10","_tmpl$5","_el$11","_el$12","_el$14","_el$13","SettingsPage","_el$15","_tmpl$6","_$mergeProps","_$createComponent","_$className","_$setAttribute"],"sources":["../../../../src/components/composites/settings/settings.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { createUniqueId, Show, splitProps } from 'solid-js'\nimport { createFormFieldContext, FormFieldContext } from '#lib/form-field'\nimport { cn } from '#lib/utils'\nimport { Heading } from '../../ui/typography'\n\n/**\n * SettingsSection and SettingsRow.\n *\n * A settings page is the most repetitive surface in any application, and the\n * one where drift is most visible: label sizes, control widths and description\n * placement all wander unless something fixes them.\n *\n * The row is a two-column layout at a fixed label width, so controls line up\n * down the page regardless of how long the labels are. `SettingsRow` also\n * exposes its label and description through the shared form-field context to\n * the first control inside it. `SettingsField` is the visual stacked layout;\n * use `FormField` when the control needs label, help, or validation wiring.\n */\nexport function SettingsSection(\n  props: ComponentProps<'section'> & {\n    title: string\n    description?: string\n    /** A control for the section as a whole, e.g. a master toggle. */\n    action?: JSX.Element\n    /** Use a spaced content stack for fields, alerts, and cards instead of divided rows. */\n    bodyLayout?: 'rows' | 'content'\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'title',\n    'description',\n    'action',\n    'bodyLayout',\n    'children',\n  ])\n\n  return (\n    <section\n      data-slot=\"settings-section\"\n      class={cn('flex flex-col gap-4 px-5 py-5', local.class)}\n      {...rest}\n    >\n      <div class=\"flex items-start justify-between gap-4\">\n        <div class=\"flex min-w-0 flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            {local.title}\n          </Heading>\n          <Show when={local.description}>\n            <p class=\"max-w-prose text-sm text-muted-foreground text-pretty\">{local.description}</p>\n          </Show>\n        </div>\n        <Show when={local.action}>\n          <div class=\"flex shrink-0 items-center gap-2\">{local.action}</div>\n        </Show>\n      </div>\n      <div\n        data-slot=\"settings-section-body\"\n        class={cn(\n          local.bodyLayout === 'content'\n            ? 'flex flex-col gap-4'\n            : 'divide-y divide-border rounded-xl border border-border'\n        )}\n      >\n        {local.children}\n      </div>\n    </section>\n  )\n}\n\n/**\n * One setting: a label and description on the leading side, a control on the\n * trailing side.\n *\n * The label and description are linked to a shared control through field\n * context. An explicit `aria-label` or `aria-labelledby` on the control keeps\n * precedence; otherwise the visible row label names it.\n */\nexport function SettingsRow(\n  props: ComponentProps<'div'> & {\n    label: string\n    description?: string\n    /** Render a vertical stack when the control needs the full width. */\n    orientation?: 'horizontal' | 'vertical'\n    /** Hide the divider this row would otherwise contribute. */\n    bare?: boolean\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'label',\n    'description',\n    'orientation',\n    'bare',\n    'children',\n  ])\n  const rowId = createUniqueId()\n  const labelId = `${rowId}-label`\n  const descriptionId = `${rowId}-description`\n  const field = createFormFieldContext({\n    defaultControlId: rowId,\n    labelId,\n    descriptionId,\n    hint: () => local.description,\n    error: () => undefined,\n    group: () => false,\n  })\n\n  return (\n    <FormFieldContext.Provider value={field}>\n      <div\n        data-slot=\"settings-row\"\n        class={cn(\n          'flex gap-4 p-4',\n          local.orientation === 'vertical'\n            ? 'flex-col'\n            : 'flex-col sm:flex-row sm:items-center sm:justify-between',\n          local.class\n        )}\n        {...rest}\n      >\n        <div class=\"flex min-w-0 flex-col gap-0.5\">\n          <div id={labelId} data-slot=\"settings-row-label\" class=\"text-sm font-medium\">\n            {local.label}\n          </div>\n          <Show when={local.description}>\n            <p id={descriptionId} class=\"max-w-prose text-sm text-muted-foreground text-pretty\">\n              {local.description}\n            </p>\n          </Show>\n        </div>\n        <div\n          data-slot=\"settings-row-control\"\n          class={cn('shrink-0', local.orientation === 'vertical' && 'w-full')}\n        >\n          {local.children}\n        </div>\n      </div>\n    </FormFieldContext.Provider>\n  )\n}\n\n/** A stacked label-and-control pair, for a control too wide for a row. */\nexport function SettingsField(\n  props: ComponentProps<'div'> & { label: string; description?: string; htmlFor?: string }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'description', 'htmlFor', 'children'])\n\n  return (\n    <div data-slot=\"settings-field\" class={cn('flex flex-col gap-2 p-4', local.class)} {...rest}>\n      <div class=\"flex flex-col gap-0.5\">\n        <label for={local.htmlFor} class=\"text-sm font-medium\">\n          {local.label}\n        </label>\n        <Show when={local.description}>\n          <p class=\"max-w-prose text-sm text-muted-foreground text-pretty\">{local.description}</p>\n        </Show>\n      </div>\n      <div>{local.children}</div>\n    </div>\n  )\n}\n\n/** A settings page's scrolling body, with the header sticky at the top. */\nexport function SettingsPage(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"settings-page\"\n      class={cn('flex min-h-0 flex-1 flex-col overflow-y-auto', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,SAAgBS,gBACdC,OAQA;CACA,MAAM,CAACM,OAAOC,QAAQb,WAAWM,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CAED,cAAA;EAAA,IAAAQ,OAAAC,QAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAH,MAAAI;EAAAC,OAAAP,MAAAQ,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWnB,GAAG,iCAAiCS,MAAMW,KAAK;EAAC,EAAA,GACnDV,IAAI,GAAA,OAAA,IAAA;EAAAW,OAAAN,OAAAO,gBAIHrB,SAAO;GAACsB,IAAE;GAAMC,MAAI;GAAA,IAAAC,WAAA;IAAA,OAClBhB,MAAML;GAAK;EAAA,CAAA,GAAA,IAAA;EAAAiB,OAAAN,OAAAO,gBAEb1B,MAAI;GAAA,IAAC8B,OAAI;IAAA,OAAEjB,MAAMJ;GAAW;GAAA,IAAAoB,WAAA;IAAA,IAAAE,QAAAC,OAAA;IAAAP,OAAAM,aACuClB,MAAMJ,WAAW;IAAA,OAAAsB;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAN,OAAAR,OAAAS,gBAGtF1B,MAAI;GAAA,IAAC8B,OAAI;IAAA,OAAEjB,MAAMH;GAAM;GAAA,IAAAmB,WAAA;IAAA,IAAAI,QAAAC,QAAA;IAAAT,OAAAQ,aACyBpB,MAAMH,MAAM;IAAA,OAAAuB;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAR,OAAAL,aAW5DP,MAAMgB,QAAQ;EAAAM,aAAAC,UAAAhB,OANRhB,GACLS,MAAMD,eAAe,YACjB,wBACA,wDACN,CAAC,CAAA;EAAA,OAAAG;CAAA,EAAA,CAAA;AAMT;;;;;;;;;AAUA,SAAgBsB,YACd9B,OAQA;CACA,MAAM,CAACM,OAAOC,QAAQb,WAAWM,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CACD,MAAMkC,QAAQ1C,eAAe;CAC7B,MAAM2C,UAAU,GAAGD,MAAK;CACxB,MAAME,gBAAgB,GAAGF,MAAK;CAC9B,MAAMG,QAAQ1C,uBAAuB;EACnC2C,kBAAkBJ;EAClBC;EACAC;EACAG,YAAYjC,MAAMJ;EAClBsC,aAAaC,KAAAA;EACbC,aAAa;CACf,CAAC;CAED,OAAAvB,gBACGvB,iBAAiB+C,UAAQ;EAACC,OAAOP;EAAK,IAAAf,WAAA;GAAA,IAAAuB,QAAAC,QAAA,GAAAC,QAAAF,MAAAlC,YAAAqC,QAAAD,MAAApC,YAAAsC,QAAAF,MAAAjC;GAAAC,OAAA8B,OAAA7B,WAAA,EAAA,KAAA,WAAA;IAAA,OAG5BnB,GACL,kBACAS,MAAM0B,gBAAgB,aAClB,aACA,2DACJ1B,MAAMW,KACR;GAAC,EAAA,GACGV,IAAI,GAAA,OAAA,IAAA;GAAA2C,aAAAF,OAAA,MAGGb,OAAO;GAAAjB,OAAA8B,aACb1C,MAAMyB,KAAK;GAAAb,OAAA6B,OAAA5B,gBAEb1B,MAAI;IAAA,IAAC8B,OAAI;KAAA,OAAEjB,MAAMJ;IAAW;IAAA,IAAAoB,WAAA;KAAA,IAAA6B,QAAA1B,OAAA;KAAAyB,aAAAC,OAAA,MACpBf,aAAa;KAAAlB,OAAAiC,aACjB7C,MAAMJ,WAAW;KAAA,OAAAiD;IAAA;GAAA,CAAA,GAAA,IAAA;GAAAjC,OAAA+B,aAQrB3C,MAAMgB,QAAQ;GAAAM,aAAAC,UAAAoB,OAFRpD,GAAG,YAAYS,MAAM0B,gBAAgB,cAAc,QAAQ,CAAC,CAAA;GAAA,OAAAa;EAAA;CAAA,CAAA;AAO7E;;AAGA,SAAgBO,cACdpD,OACA;CACA,MAAM,CAACM,OAAOC,QAAQb,WAAWM,OAAO;EAAC;EAAS;EAAS;EAAe;EAAW;CAAU,CAAC;CAEhG,cAAA;EAAA,IAAAsD,SAAAC,QAAA,GAAAC,SAAAF,OAAA3C,YAAA8C,SAAAD,OAAA7C,YAAA+C,SAAAF,OAAA1C;EAAAC,OAAAuC,QAAAtC,WAAA,EAAA,KAAA,WAAA;GAAA,OACyCnB,GAAG,2BAA2BS,MAAMW,KAAK;EAAC,EAAA,GAAMV,IAAI,GAAA,OAAA,IAAA;EAAAW,OAAAuC,cAGpFnD,MAAMyB,KAAK;EAAAb,OAAAsC,QAAArC,gBAEb1B,MAAI;GAAA,IAAC8B,OAAI;IAAA,OAAEjB,MAAMJ;GAAW;GAAA,IAAAoB,WAAA;IAAA,IAAAqC,SAAAlC,OAAA;IAAAP,OAAAyC,cACuCrD,MAAMJ,WAAW;IAAA,OAAAyD;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAzC,OAAAwC,cAGjFpD,MAAMgB,QAAQ;EAAAM,aAAAsB,aAAAO,QAAA,OAPNnD,MAAM+C,OAAO,CAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAUjC;;AAGA,SAAgBM,aAAa5D,OAA8B;CACzD,MAAM,CAACM,OAAOC,QAAQb,WAAWM,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAA6D,SAAAC,QAAA;EAAA/C,OAAA8C,QAAA7C,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWnB,GAAG,gDAAgDS,MAAMW,KAAK;EAAC,EAAA,GAClEV,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAsD;CAAA,EAAA,CAAA;AAGd"}
+{"version":3,"file":"settings.js","names":["ComponentProps","JSX","createUniqueId","Show","splitProps","createFormFieldContext","FormFieldContext","cn","Heading","SettingsSection","props","title","description","action","Element","bodyLayout","local","rest","_el$","_tmpl$3","_el$2","firstChild","_el$3","_el$6","nextSibling","_$spread","_$mergeProps","class","_$insert","_$createComponent","as","size","children","when","_el$4","_tmpl$","_el$5","_tmpl$2","_$effect","_$className","SettingsRow","label","orientation","bare","rowId","labelId","descriptionId","field","defaultControlId","hint","error","undefined","group","Provider","value","_el$7","_tmpl$4","_el$8","_el$9","_el$1","_$setAttribute","_el$0","SettingsField","htmlFor","_el$10","_tmpl$5","_el$11","_el$12","_el$14","_el$13","SettingsPage","_el$15","_tmpl$6","_$mergeProps","_$createComponent","_$className","_$setAttribute"],"sources":["../../../../src/components/composites/settings/settings.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { createUniqueId, Show, splitProps } from 'solid-js'\nimport { createFormFieldContext, FormFieldContext } from '#lib/form-field'\nimport { cn } from '#lib/utils'\nimport { Heading } from '../../ui/typography'\n\n/**\n * SettingsSection and SettingsRow.\n *\n * A settings page is the most repetitive surface in any application, and the\n * one where drift is most visible: label sizes, control widths and description\n * placement all wander unless something fixes them.\n *\n * The row puts the label and description at the start and the control at the\n * end (stacked on a narrow window), so controls line up down the page's end\n * edge regardless of how long the labels are. `SettingsRow` also\n * exposes its label and description through the shared form-field context to\n * the first control inside it. `SettingsField` is the visual stacked layout;\n * use `FormField` when the control needs label, help, or validation wiring.\n */\nexport function SettingsSection(\n  props: ComponentProps<'section'> & {\n    title: string\n    description?: string\n    /** A control for the section as a whole, e.g. a master toggle. */\n    action?: JSX.Element\n    /** Use a spaced content stack for fields, alerts, and cards instead of divided rows. */\n    bodyLayout?: 'rows' | 'content'\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'title',\n    'description',\n    'action',\n    'bodyLayout',\n    'children',\n  ])\n\n  return (\n    <section\n      data-slot=\"settings-section\"\n      class={cn('flex flex-col gap-4 px-5 py-5', local.class)}\n      {...rest}\n    >\n      <div class=\"flex items-start justify-between gap-4\">\n        <div class=\"flex min-w-0 flex-col gap-0.5\">\n          <Heading as=\"h2\" size=\"card\">\n            {local.title}\n          </Heading>\n          <Show when={local.description}>\n            <p class=\"max-w-prose text-sm text-muted-foreground text-pretty\">{local.description}</p>\n          </Show>\n        </div>\n        <Show when={local.action}>\n          <div class=\"flex shrink-0 items-center gap-2\">{local.action}</div>\n        </Show>\n      </div>\n      <div\n        data-slot=\"settings-section-body\"\n        class={cn(\n          local.bodyLayout === 'content'\n            ? 'flex flex-col gap-4'\n            : 'divide-y divide-border rounded-xl border border-border'\n        )}\n      >\n        {local.children}\n      </div>\n    </section>\n  )\n}\n\n/**\n * One setting: a label and description on the leading side, a control on the\n * trailing side.\n *\n * The label and description are linked to a shared control through field\n * context. An explicit `aria-label` or `aria-labelledby` on the control keeps\n * precedence; otherwise the visible row label names it.\n */\nexport function SettingsRow(\n  props: ComponentProps<'div'> & {\n    label: string\n    description?: string\n    /** Render a vertical stack when the control needs the full width. */\n    orientation?: 'horizontal' | 'vertical'\n    /** Hide the divider this row would otherwise contribute. */\n    bare?: boolean\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'label',\n    'description',\n    'orientation',\n    'bare',\n    'children',\n  ])\n  const rowId = createUniqueId()\n  const labelId = `${rowId}-label`\n  const descriptionId = `${rowId}-description`\n  const field = createFormFieldContext({\n    defaultControlId: rowId,\n    labelId,\n    descriptionId,\n    hint: () => local.description,\n    error: () => undefined,\n    group: () => false,\n  })\n\n  return (\n    <FormFieldContext.Provider value={field}>\n      <div\n        data-slot=\"settings-row\"\n        class={cn(\n          'flex gap-4 p-4',\n          local.orientation === 'vertical'\n            ? 'flex-col'\n            : 'flex-col sm:flex-row sm:items-center sm:justify-between',\n          local.class\n        )}\n        {...rest}\n      >\n        <div class=\"flex min-w-0 flex-col gap-0.5\">\n          <div id={labelId} data-slot=\"settings-row-label\" class=\"text-sm font-medium\">\n            {local.label}\n          </div>\n          <Show when={local.description}>\n            <p id={descriptionId} class=\"max-w-prose text-sm text-muted-foreground text-pretty\">\n              {local.description}\n            </p>\n          </Show>\n        </div>\n        <div\n          data-slot=\"settings-row-control\"\n          class={cn('shrink-0', local.orientation === 'vertical' && 'w-full')}\n        >\n          {local.children}\n        </div>\n      </div>\n    </FormFieldContext.Provider>\n  )\n}\n\n/** A stacked label-and-control pair, for a control too wide for a row. */\nexport function SettingsField(\n  props: ComponentProps<'div'> & { label: string; description?: string; htmlFor?: string }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'description', 'htmlFor', 'children'])\n\n  return (\n    <div data-slot=\"settings-field\" class={cn('flex flex-col gap-2 p-4', local.class)} {...rest}>\n      <div class=\"flex flex-col gap-0.5\">\n        <label for={local.htmlFor} class=\"text-sm font-medium\">\n          {local.label}\n        </label>\n        <Show when={local.description}>\n          <p class=\"max-w-prose text-sm text-muted-foreground text-pretty\">{local.description}</p>\n        </Show>\n      </div>\n      <div>{local.children}</div>\n    </div>\n  )\n}\n\n/** A settings page's scrolling body, with the header sticky at the top. */\nexport function SettingsPage(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"settings-page\"\n      class={cn('flex min-h-0 flex-1 flex-col overflow-y-auto', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/components/conversation/transcript-composition.d.ts

@@ -53,6 +53,12 @@ export type TranscriptCompositionProps<T> = Omit<ComponentProps<'div'>, 'childre
     /** Optional controlled disclosure map keyed by `transcriptDisclosureKey`. */
     disclosure?: ReadonlyMap<string, boolean>;
     onDisclosureChange?: (key: string, expanded: boolean) => void;
+    /**
+     * Row rhythm. `compact` (default) packs rows 4px apart; `comfortable` spaces
+     * them 12px apart and stacks each row's rendered parts, for a chat stream
+     * whose rows are separate messages rather than one running log.
+     */
+    density?: 'compact' | 'comfortable';
 };
 /** Stable, transcript-scoped key for host-owned disclosure restoration. */
 export declare function transcriptDisclosureKey(resetKey: string | number | null | undefined, mode: TranscriptFoldMode, firstRowId: string): string;

package/dist/components/conversation/transcript-composition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transcript-composition.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/transcript-composition.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"transcript-composition.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/transcript-composition.tsx"],"names":[],"mappings":"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"}

package/dist/components/conversation/transcript-composition.js

@@ -2,14 +2,14 @@ import { cn } from "../../lib/utils.js";
 import { Button } from "../ui/button/button.js";
 import { applyTranscriptRunningState, createTranscriptGrouper } from "./transcript-grouping.js";
 import { planTranscriptFold } from "./transcript-folding.js";
-import { createComponent, effect, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { className, createComponent, effect, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
 import { ChevronDown } from "lucide-solid";
 import { For, Show, createComponent as createComponent$1, createMemo, createSignal, createUniqueId, splitProps } from "solid-js";
 //#region src/components/conversation/transcript-composition.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=transcript-row class="flex min-w-0 flex-col gap-1"><div data-slot=transcript-row-content>`);
+var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=transcript-row class="flex min-w-0 flex-col gap-1"><div data-slot=transcript-row-content class="group-data-[density=comfortable]/transcript:flex group-data-[density=comfortable]/transcript:flex-col">`);
 var _tmpl$2 = /*#__PURE__*/ template(`<span>`);
 var _tmpl$3 = /*#__PURE__*/ template(`<div class="flex justify-end">`);
-var _tmpl$4 = /*#__PURE__*/ template(`<div data-slot=transcript-composition><div data-slot=transcript-rows class="flex min-w-0 flex-col gap-1">`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div data-slot=transcript-composition><div data-slot=transcript-rows>`);
 var encodeId = (value) => encodeURIComponent(value);
 /** Stable, transcript-scoped key for host-owned disclosure restoration. */
 function transcriptDisclosureKey(resetKey, mode, firstRowId) {
@@ -240,6 +240,7 @@ function TranscriptComposition(props) {
 		"foldMode",
 		"foldState",
 		"onFoldStateChange",
+		"density",
 		"disclosure",
 		"onDisclosureChange"
 	]);
@@ -338,8 +339,11 @@ function TranscriptComposition(props) {
 			get ["data-fold-state"]() {
 				return foldState();
 			},
+			get ["data-density"]() {
+				return local.density ?? "compact";
+			},
 			get ["class"]() {
-				return cn("flex w-full min-w-0 flex-col gap-1", local.class);
+				return cn("group/transcript flex w-full min-w-0 flex-col gap-1", local.class);
 			}
 		}, rest), false, true);
 		insert(_el$4, createComponent(Show, {
@@ -386,6 +390,7 @@ function TranscriptComposition(props) {
 				onToggle: updateDisclosure
 			})
 		}));
+		effect(() => className(_el$6, cn("flex min-w-0 flex-col", local.density === "comfortable" ? "gap-3" : "gap-1")));
 		return _el$4;
 	})();
 }