@adea-ai/ui 0.117.0 → 0.118.0

package/dist/r/src/components/ui/tabs/tabs.tsx

@@ -62,6 +62,7 @@ export function Tabs(props: ComponentProps<typeof KobalteTabs>) {
   return (
     <TabsIdContext.Provider value={tabs}>
       <KobalteTabs
+        data-slot="tabs"
         id={id()}
         class={cn(
           'flex min-h-0 min-w-0 flex-col gap-2 data-[orientation=vertical]:flex-row',
@@ -75,6 +76,18 @@ export function Tabs(props: ComponentProps<typeof KobalteTabs>) {
 
 export type TabsListProps = ComponentProps<typeof KobalteTabs.List> & {
   appearance?: 'underline' | 'segmented'
+  /**
+   * Span the container, with the triggers at the start. For a row of tabs that
+   * heads a pane: the underline's rule then runs the pane's full width, the
+   * way the pane's other header rules do, instead of stopping at the last tab.
+   */
+  fill?: boolean
+  /**
+   * Scroll sideways when the triggers outgrow the row, with no visible
+   * scrollbar, instead of overflowing it. Implies `fill`. The underline's rule
+   * is drawn inside the scroller so the selected mark still sits on it.
+   */
+  scrollable?: boolean
 }
 
 /**
@@ -82,17 +95,31 @@ export type TabsListProps = ComponentProps<typeof KobalteTabs.List> & {
  * on. A vertical list has no baseline — its triggers stack — so the rule is
  * dropped there; otherwise it draws as a stray line under the last trigger,
  * spanning only the list's width (the SettingsLayout rail showed exactly that).
+ *
+ * A scrolling list cannot draw that rule as its border: a scroller clips at its
+ * padding edge, and the selected trigger's mark overlaps the border by a pixel
+ * (`-mb-px`), so the mark would be cut off and the list would scroll vertically
+ * by that pixel. It reserves the pixel as padding instead and paints the rule
+ * there with an inset shadow, which lands exactly where the border was.
  */
 export function TabsList(props: TabsListProps) {
-  const [local, rest] = splitProps(props, ['class', 'appearance'])
+  const [local, rest] = splitProps(props, ['class', 'appearance', 'fill', 'scrollable'])
+  const underline = () => local.appearance !== 'segmented'
 
   return (
     <KobalteTabs.List
+      data-slot="tabs-list"
       class={cn(
-        'inline-flex w-fit shrink-0 items-center justify-center',
-        local.appearance === 'segmented'
+        'shrink-0 items-center',
+        local.fill || local.scrollable
+          ? 'flex w-full justify-start'
+          : 'inline-flex w-fit justify-center',
+        local.scrollable && 'no-scrollbar overflow-x-auto overflow-y-hidden',
+        !underline()
           ? 'gap-0.5 rounded-lg bg-surface-hover p-0.5'
-          : 'gap-1 rounded-none border-b border-border data-[orientation=vertical]:border-b-0',
+          : local.scrollable
+            ? 'gap-1 rounded-none pb-px shadow-[inset_0_-1px_0_var(--border)] data-[orientation=vertical]:pb-0 data-[orientation=vertical]:shadow-none'
+            : 'gap-1 rounded-none border-b border-border data-[orientation=vertical]:border-b-0',
         'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',
         local.class
       )}
@@ -133,6 +160,7 @@ export function TabsTrigger(props: TabsTriggerProps) {
 
   return (
     <KobalteTabs.Trigger
+      data-slot="tabs-trigger"
       id={triggerId()}
       class={cn(
         'inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium',
@@ -158,6 +186,7 @@ export function TabsContent(props: ComponentProps<typeof KobalteTabs.Content>) {
   const tabs = useTabsId()
   return (
     <KobalteTabs.Content
+      data-slot="tabs-content"
       aria-labelledby={
         local['aria-labelledby'] ??
         tabs.triggerIds().get(rest.value) ??

package/dist/r/src/components/ui/toggle/toggle.tsx

@@ -58,6 +58,7 @@ export function Toggle(props: ToggleProps) {
 
   return (
     <ToggleButton
+      data-slot="toggle"
       class={cn(toggleVariants({ variant: local.variant, size: local.size }), local.class)}
       {...rest}
     />

package/dist/r/src/components/ui/toggle-group/toggle-group.tsx

@@ -38,6 +38,7 @@ export function ToggleGroup(props: ToggleGroupProps) {
 
   return (
     <KobalteToggleGroup
+      data-slot="toggle-group"
       multiple={local.multiple ?? false}
       class={cn(
         'flex w-fit flex-row items-center',
@@ -68,6 +69,7 @@ export function ToggleGroupItem(props: ToggleGroupItemProps) {
 
   return (
     <KobalteToggleGroup.Item
+      data-slot="toggle-group-item"
       class={cn(toggleVariants({ variant: local.variant, size: local.size }), local.class)}
       onKeyDown={(event) => {
         invokeEventHandler(local.onKeyDown, event)

package/dist/r/src/components/ui/typography/typography.tsx

@@ -130,6 +130,13 @@ export function Heading<T extends ValidComponent = 'h2'>(props: HeadingProps<T>)
  * foreground without the caller restating it.
  *
  * Defaults: `body` renders a `p`, `code` a `code`, every other variant a `span`.
+ *
+ * `overline` is the small uppercase label above a group — a list group's
+ * heading, a settings navigation group, an eyebrow over a page title. It is the
+ * one variant whose tone defaults to `muted` rather than inheriting, because an
+ * overline in the body foreground competes with the heading it introduces. Pass
+ * `tone` to override. It labels a group; it is not a heading, so it renders a
+ * `span` and stays out of the document outline.
  */
 export const textVariants = /* @__PURE__ */ cva('', {
   variants: {
@@ -144,6 +151,8 @@ export const textVariants = /* @__PURE__ */ cva('', {
       caption: 'text-xs',
       /** 11px / 500. The floor: keyboard keys, the status bar. */
       micro: 'text-2xs font-medium',
+      /** 11px / 500, uppercase and tracked. A group label or eyebrow; muted by default. */
+      overline: 'text-2xs font-medium tracking-wide uppercase',
       /** 12px mono. Ids, paths, hashes, inline code. */
       code: 'font-code text-code',
     },
@@ -168,9 +177,15 @@ export const textElement = {
   strong: 'span',
   caption: 'span',
   micro: 'span',
+  overline: 'span',
   code: 'code',
 } as const
 
+/** The tone a variant takes when the caller names none: muted for `overline`, else inherit. */
+export function textDefaultTone(variant: TextVariant | null | undefined) {
+  return variant === 'overline' ? 'muted' : undefined
+}
+
 type TextVariantProps = VariantProps<typeof textVariants>
 type TextVariant = keyof typeof textElement
 
@@ -195,7 +210,11 @@ export function Text<T extends ValidComponent = 'p'>(props: TextProps<T>) {
       as={local.as ?? textElement[(local.variant ?? 'body') as TextVariant]}
       data-slot="text"
       class={cn(
-        textVariants({ variant: local.variant, tone: local.tone, numeric: local.numeric }),
+        textVariants({
+          variant: local.variant,
+          tone: local.tone ?? textDefaultTone(local.variant),
+          numeric: local.numeric,
+        }),
         local.class
       )}
       {...(rest as ComponentProps<'p'>)}

package/dist/r/src/lib/cn-tables.generated.ts

@@ -91,7 +91,7 @@ const nodeVlist = (() => {
     for (let i = 0; i < A.length; i++) out[A[i]!] = V[i]!
     return out
 })()
-const SETS = "container |break-after- all auto avoid avoid-page column left page right|break-before- all auto avoid avoid-page column left page right|break-inside-a uto void void-column void-page|box-decoration- clone slice|box- border content| contents flow-root hidden table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group| not-sr-only sr-only|float- end left none right start|clear- both end left none right start|isolat e ion-auto|overflow- auto clip hidden scroll visible|overflow-x- auto clip hidden scroll visible|overflow-y- auto clip hidden scroll visible|overscroll- auto contain none|overscroll-x- auto contain none|overscroll-y- auto contain none| absolute fixed relative static sticky| collapse invisible visible|justify- around baseline between center center-safe end end-safe evenly normal start stretch|justify-items- center center-safe end end-safe normal start stretch|justify-self- auto center center-safe end end-safe start stretch|items- baseline baseline-last center center-safe end end-safe start stretch|self- auto baseline baseline-last center center-safe end end-safe start stretch|place-content- around baseline between center center-safe end end-safe evenly start stretch|place-items- baseline center center-safe end end-safe start stretch|place-self- auto center center-safe end end-safe start stretch| antialiased subpixel-antialiased| italic not-italic|normal-nums |ordinal |slashed-zero | lining-nums oldstyle-nums| proportional-nums tabular-nums| diagonal-fractions stacked-fractions| no-underline overline| capitalize lowercase normal-case uppercase|truncate |whitespace- break-spaces normal nowrap pre pre-line pre-wrap|break- all keep normal words|wrap- anywhere break-word normal|hyphens- auto manual none|mix-blend- color color-burn color-dodge darken difference exclusion hard-light hue lighten luminosity multiply normal overlay plus-darker plus-lighter saturation screen soft-light|table- auto fixed|caption- bottom top|backface- hidden visible|appearance- auto none|scheme- dark light light-dark normal only-dark only-light|field-sizing- content fixed|pointer-events- auto none|resize  -none -x -y|snap- align-none center end start|snap- always normal|snap- both none x y|snap- mandatory proximity|touch- auto manipulation none|touch-pan- left right x|touch-pan- down up y|touch-pinch-zoom |select- all auto none text|forced-color-adjust- auto none| normal size| baseline bottom middle sub super text-bottom text-top top| bounce none ping pulse spin| auto square video| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs fr max min px|none | auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs full px| fixed local scroll|clip- border content padding text|origin- border content padding| bottom bottom-left bottom-right center left left-bottom left-top right right-bottom right-top top top-left top-right| no-repeat repeat repeat-round repeat-space repeat-x repeat-y| auto contain cover| gradient-to-b gradient-to-bl gradient-to-br gradient-to-l gradient-to-r gradient-to-t gradient-to-tl gradient-to-tr none|blend- color color-burn color-dodge darken difference exclusion hard-light hue lighten luminosity multiply normal overlay saturation screen soft-light|to- b bl br l r t tl tr| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh fit full lh lvh max min px screen svh| dashed dotted double hidden none solid| collapse separate| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs px|auto |full | content none strict| inline-size size|layout |paint |style | around baseline between center center-safe end end-safe evenly normal start stretch| alias all-scroll auto cell col-resize context-menu copy crosshair default e-resize ew-resize grab grabbing help move n-resize ne-resize nesw-resize no-drop none not-allowed ns-resize nw-resize nwse-resize pointer progress row-resize s-resize se-resize sw-resize text vertical-text w-resize wait zoom-in zoom-out| dashed dotted double solid wavy| auto from-font|reverse |initial | in in-out initial linear out| col col-reverse row row-reverse| nowrap wrap wrap-reverse| auto initial none| black bold extrabold extralight light medium normal semibold thin| condensed expanded extra-condensed extra-expanded normal semi-condensed semi-expanded ultra-condensed ultra-expanded|flow- col col-dense dense row row-dense| none subgrid| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lh lvh lvw max min px rail-item row-lg row-md row-sm screen statusbar svh svw topbar| block flex grid table| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvw fit full lvw max min px screen svw| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs loose none normal px relaxed snug tight|through |item | inside outside| decimal disc none| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs px| clip-border clip-content clip-fill clip-padding clip-stroke clip-view no-clip| add exclude intersect subtract| alpha luminance match|origin- border content fill padding stroke view|type- alpha luminance| circle ellipse| closest-corner closest-side farthest-corner farthest-side|at- bottom bottom-left bottom-right center left left-bottom left-top right right-bottom right-top top top-left top-right| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh fit full lh lvh max min none px screen svh| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lh lvh lvw max min none px rail-item row-lg row-md row-sm screen statusbar svh svw topbar| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvw fit full lvw max min none px screen svw| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min none prose px rail rail-expanded sidebar sidebar-compact svh svw| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min none px rail rail-expanded screen sidebar sidebar-compact svh svw| contain cover fill none scale-down| first last none| distant dramatic midrange near none normal|inset | full none|3d | auto smooth|gutter- auto both stable| auto none thin| inner none| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min px rail-item svh svw|base | center end justify left right start| clip ellipsis| balance nowrap pretty wrap| normal tight tighter wide wider widest| cpu gpu none| 3d flat| all colors none opacity shadow transform| discrete normal| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs full px| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min px rail rail-expanded screen sidebar sidebar-compact svh svw| auto contents scroll transform".split('|').map((s) => {
+const SETS = "container |break-after- all auto avoid avoid-page column left page right|break-before- all auto avoid avoid-page column left page right|break-inside-a uto void void-column void-page|box-decoration- clone slice|box- border content| contents flow-root hidden table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group| not-sr-only sr-only|float- end left none right start|clear- both end left none right start|isolat e ion-auto|overflow- auto clip hidden scroll visible|overflow-x- auto clip hidden scroll visible|overflow-y- auto clip hidden scroll visible|overscroll- auto contain none|overscroll-x- auto contain none|overscroll-y- auto contain none| absolute fixed relative static sticky| collapse invisible visible|justify- around baseline between center center-safe end end-safe evenly normal start stretch|justify-items- center center-safe end end-safe normal start stretch|justify-self- auto center center-safe end end-safe start stretch|items- baseline baseline-last center center-safe end end-safe start stretch|self- auto baseline baseline-last center center-safe end end-safe start stretch|place-content- around baseline between center center-safe end end-safe evenly start stretch|place-items- baseline center center-safe end end-safe start stretch|place-self- auto center center-safe end end-safe start stretch| antialiased subpixel-antialiased| italic not-italic|normal-nums |ordinal |slashed-zero | lining-nums oldstyle-nums| proportional-nums tabular-nums| diagonal-fractions stacked-fractions| no-underline overline| capitalize lowercase normal-case uppercase|truncate |whitespace- break-spaces normal nowrap pre pre-line pre-wrap|break- all keep normal words|wrap- anywhere break-word normal|hyphens- auto manual none|mix-blend- color color-burn color-dodge darken difference exclusion hard-light hue lighten luminosity multiply normal overlay plus-darker plus-lighter saturation screen soft-light|table- auto fixed|caption- bottom top|backface- hidden visible|appearance- auto none|scheme- dark light light-dark normal only-dark only-light|field-sizing- content fixed|pointer-events- auto none|resize  -none -x -y|snap- align-none center end start|snap- always normal|snap- both none x y|snap- mandatory proximity|touch- auto manipulation none|touch-pan- left right x|touch-pan- down up y|touch-pinch-zoom |select- all auto none text|forced-color-adjust- auto none| normal size| baseline bottom middle sub super text-bottom text-top top| bounce none ping pulse spin| auto square video| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs fr max min px|none | auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs full px| fixed local scroll|clip- border content padding text|origin- border content padding| bottom bottom-left bottom-right center left left-bottom left-top right right-bottom right-top top top-left top-right| no-repeat repeat repeat-round repeat-space repeat-x repeat-y| auto contain cover| gradient-to-b gradient-to-bl gradient-to-br gradient-to-l gradient-to-r gradient-to-t gradient-to-tl gradient-to-tr none|blend- color color-burn color-dodge darken difference exclusion hard-light hue lighten luminosity multiply normal overlay saturation screen soft-light|to- b bl br l r t tl tr| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh fit full lh lvh max min px screen svh| dashed dotted double hidden none solid| collapse separate| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs px|auto |full | content none strict| inline-size size|layout |paint |style | around baseline between center center-safe end end-safe evenly normal start stretch| alias all-scroll auto cell col-resize context-menu copy crosshair default e-resize ew-resize grab grabbing help move n-resize ne-resize nesw-resize no-drop none not-allowed ns-resize nw-resize nwse-resize pointer progress row-resize s-resize se-resize sw-resize text vertical-text w-resize wait zoom-in zoom-out| dashed dotted double solid wavy| auto from-font|reverse |initial | in in-out initial linear out| col col-reverse row row-reverse| nowrap wrap wrap-reverse| auto initial none| black bold extrabold extralight light medium normal semibold thin| condensed expanded extra-condensed extra-expanded normal semi-condensed semi-expanded ultra-condensed ultra-expanded|flow- col col-dense dense row row-dense| none subgrid| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lh lvh lvw max min px rail-item row-lg row-md row-sm screen statusbar svh svw topbar| block flex grid table| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvw fit full lvw max min px screen svw| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs loose none normal px relaxed snug tight|through |item | inside outside| decimal disc none| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs px| clip-border clip-content clip-fill clip-padding clip-stroke clip-view no-clip| add exclude intersect subtract| alpha luminance match|origin- border content fill padding stroke view|type- alpha luminance| circle ellipse| closest-corner closest-side farthest-corner farthest-side|at- bottom bottom-left bottom-right center left left-bottom left-top right right-bottom right-top top top-left top-right| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh fit full lh lvh max min none px screen svh| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lh lvh lvw max min none px rail-item row-lg row-md row-sm screen statusbar svh svw topbar| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvw fit full lvw max min none px screen svw| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min none panel prose px rail rail-expanded sidebar sidebar-compact svh svw| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min none panel px rail rail-expanded screen sidebar sidebar-compact svh svw| contain cover fill none scale-down| first last none| distant dramatic midrange near none normal|inset | full none|3d | auto smooth|gutter- auto both stable| auto none thin| inner none| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min px rail-item svh svw|base | center end justify left right start| clip ellipsis| balance nowrap pretty wrap| normal tight tighter wide wider widest| cpu gpu none| 3d flat| all colors none opacity shadow transform| discrete normal| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs full px| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min panel px rail rail-expanded screen sidebar sidebar-compact svh svw| auto contents scroll transform".split('|').map((s) => {
     const tails = s.split(' ')
     const prefix = tails.shift()!
     for (let i = 0; i < tails.length; i++) {
@@ -102,11 +102,11 @@ const SETS = "container |break-after- all auto avoid avoid-page column left page
 const AA = DZ("0000000000000000000000000000000000000000000000000000000000000262242:6@200000006:240B428:4422400002046044222426220026642642462026224222824220022400000000\\00N222422242222222224062242222222422226264222422222222222222442804222422222222222222222222220<4<0204260002444020204224422")
 const AG = DZ("ɠ222222222222222222222222222222222222222222222222222222222222˕4222226>ʶ22ʷʺʷ2ʸʷ42ʴ2ʓ22>621422ɶ222ɹɼɷɺɷɺ22ɱ42222ɨ2ɧ26622ɘɓ244ƸƵ222]d24242ǖǓƚÄȫ2263ȨȥȨ2222222ǣ222222222222222222ǂƽ2ƾƵ2222222422222ƜƑ22222222222222222222144Ŧţ22Ţş222222222222222222222ĸ2ı68ĦģĦɡŰ4Ġ«®ĝ822ĔđĔ2ē2222622")
 const AS = DZ("02222222222222222222222222222222222222222222222222222222222222222202022222222222EH2200IL021042222Y\\222IL0cf2e10j2222U00X202[^2y0000120|{~‚22…ˆ‡:22|22222222222G000q†OVI00000}š2›>40000ŒB00000I¨©000¬00000000000000021M®­00°“000000000000000000000–222›HGHa1º222¿2À2222ÉÌ000­°2±")
-const litAnchor = new Int32Array(1635)
-const litGroup = new Int32Array(1635)
-const litPool = new Int32Array(1635)
+const litAnchor = new Int32Array(1638)
+const litGroup = new Int32Array(1638)
+const litPool = new Int32Array(1638)
 let poolText = ''
-const poolOffsets = new Int32Array(1072)
+const poolOffsets = new Int32Array(1074)
 {
     const tailRef = new Map()
     let nextRef = 0

package/dist/r/src/lib/tokens.ts

@@ -379,11 +379,11 @@ export const radiusTokens: TokenDefinition[] = [
     description:
       '10px — cards and panels. Also the knob: move this one value to re-round the whole system.',
   },
-  { name: 'radius-sm', kind: 'dimension', description: '6px — badges, keyboard keys, menu items.' },
+  { name: 'radius-sm', kind: 'dimension', description: '6px — keyboard keys, menu items.' },
   {
     name: 'radius-md',
     kind: 'dimension',
-    description: '8px — every control: buttons, inputs, selects.',
+    description: '8px — every control: buttons, inputs, selects; and badges.',
   },
   { name: 'radius-xl', kind: 'dimension', description: '14px — dialogs, menus, sheets.' },
   { name: 'radius-2xl', kind: 'dimension', description: '18px — full-window surfaces and media.' },
@@ -597,6 +597,11 @@ export const densityTokens: TokenDefinition[] = [
     kind: 'dimension',
     description: '48px — the collapsed secondary column.',
   },
+  {
+    name: 'panel-width',
+    kind: 'dimension',
+    description: '390px — a side pane beside the work, and the same pane as a sheet.',
+  },
   { name: 'topbar-height', kind: 'dimension', description: '48px — the window title row.' },
   { name: 'statusbar-height', kind: 'dimension', description: '28px — the bottom readout strip.' },
   {

package/dist/r/src/styles/base.css

@@ -712,11 +712,14 @@
     background: transparent;
   }
 
+  /* The code role, as the `font-code` utility reads it: an appearance setting
+     that picks a code face sets `--font-code`, and bare `code`/`pre` follow it
+     instead of staying on the theme's mono face. */
   code,
   kbd,
   pre,
   samp {
-    font-family: var(--font-mono);
+    font-family: var(--font-code, var(--font-mono));
     font-feature-settings: 'liga' 0;
   }
 }

package/dist/r/src/styles/theme.css

@@ -591,6 +591,9 @@
   --rail-item-height: 2.25rem;
   --sidebar-width: 16rem; /* 256px */
   --sidebar-width-compact: 3rem;
+  /* A side pane's width — a source list or a context panel beside the work, and
+     the same pane when a narrow window moves it into a sheet. */
+  --panel-width: 24.375rem; /* 390px */
   --topbar-height: 3rem;
   --statusbar-height: 1.75rem;
   /* A tip wraps before it can overflow the window carrying it: the 16rem
@@ -850,6 +853,7 @@
   --width-rail-expanded: var(--rail-width-expanded);
   --width-sidebar: var(--sidebar-width);
   --width-sidebar-compact: var(--sidebar-width-compact);
+  --width-panel: var(--panel-width);
 
   --z-docked: var(--z-docked);
   --z-sticky: var(--z-sticky);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.117.0",
+  "version": "0.118.0",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/registry.json

@@ -2136,6 +2136,7 @@
       ],
       "registryDependencies": [
         "@adea-ai/ui/tooltip",
+        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [

package/src/components/composites/action-button/action-button.tsx

@@ -115,6 +115,9 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
 
   const buttonProps = () => ({
     ...rest,
+    // The inner Button would otherwise announce itself as a plain `button`; a
+    // caller's own slot still wins.
+    'data-slot': (rest as { 'data-slot'?: string })['data-slot'] ?? 'action-button',
     variant: local.variant,
     size: local.size,
     touchTarget: local.touchTarget,

package/src/components/composites/list-row/list-row-control.tsx

@@ -54,6 +54,7 @@ export function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowC
   return (
     <Polymorphic
       as={rowAs()}
+      data-slot="list-row"
       type={rowAs() === 'button' ? (local.type ?? 'button') : local.type}
       tabIndex={local.tabIndex ?? (rowAs() === 'button' || rowAs() === 'a' ? 0 : undefined)}
       aria-current={local.selected ? 'true' : undefined}

package/src/components/composites/list-row/list-row.tsx

@@ -2,6 +2,7 @@ import type { PolymorphicProps } from '@kobalte/core/polymorphic'
 import type { ComponentProps, ValidComponent } from 'solid-js'
 import { createSignal, createUniqueId, Show, splitProps } from 'solid-js'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'
+import { Text } from '../../ui/typography'
 import { cn } from '#lib/utils'
 import { ListRowControl, type ListRowControlProps } from './list-row-control'
 
@@ -106,9 +107,9 @@ export function ListGroup(
     <div data-slot="list-group" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>
       <Show when={local.label}>
         <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">
+          <Text variant="overline" class="min-w-0 flex-1 truncate">
             {local.label}
-          </span>
+          </Text>
           <Show when={local.action}>
             <span class="shrink-0 opacity-0 transition-opacity ease-out group-hover/list-header:opacity-100 focus-within:opacity-100">
               {local.action}

package/src/components/composites/settings/settings-navigation.tsx

@@ -3,6 +3,7 @@ import { createEffect, createUniqueId, onCleanup, splitProps } from 'solid-js'
 import { cn } from '#lib/utils'
 import { sidebarNavItemClass, sidebarNavItemStateClass } from '../../layout/sidebar-nav/sidebar-nav'
 import { TabsList, TabsTrigger, type TabsListProps } from '../../ui/tabs'
+import { Text } from '../../ui/typography'
 
 /** One host-owned destination in a settings tab list. Values must be unique. */
 export type SettingsNavigationItem = {
@@ -128,12 +129,15 @@ export function SettingsNavigation(props: SettingsNavigationProps) {
             <span id={groupId} class="sr-only">
               {group.label}
             </span>
-            <span
+            {/* The overline role on the sidebar's own muted foreground. */}
+            <Text
+              variant="overline"
+              tone="inherit"
               aria-hidden="true"
-              class="px-2 py-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase"
+              class="px-2 py-1.5 text-sidebar-muted-foreground"
             >
               {group.label}
-            </span>
+            </Text>
             {group.items.map((item) => (
               <TabsTrigger
                 data-slot="settings-navigation-trigger"

package/src/components/composites/settings/settings.tsx

@@ -11,8 +11,9 @@ import { Heading } from '../../ui/typography'
  * 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/src/components/ui/alert/alert.tsx

@@ -105,4 +105,21 @@ export function AlertDescription(props: ComponentProps<'div'>) {
   )
 }
 
+/**
+ * The alert's own actions — a Retry, an Open settings, a Cancel — on a row
+ * under the text, aligned with the title rather than the glyph. Buttons here
+ * are `size="xs" variant="outline"` by convention, so an alert's action reads
+ * as part of the message rather than as the page's primary action.
+ */
+export function AlertAction(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="alert-action"
+      class={cn('col-start-2 mt-1 flex flex-wrap items-center gap-2', local.class)}
+      {...rest}
+    />
+  )
+}
+
 export { alertVariants }

package/src/components/ui/alert/index.ts

@@ -1 +1,8 @@
-export { Alert, AlertDescription, AlertTitle, alertVariants, type AlertProps } from './alert'
+export {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+  alertVariants,
+  type AlertProps,
+} from './alert'

package/src/components/ui/badge/badge.tsx

@@ -63,6 +63,7 @@ export function Badge<T extends ValidComponent = 'span'>(props: BadgeProps<T>) {
   return (
     <Polymorphic
       as="span"
+      data-slot="badge"
       class={cn(badgeVariants({ variant: local.variant, size: local.size }), local.class)}
       {...(rest as ComponentProps<'span'>)}
     />

package/src/components/ui/breadcrumb/breadcrumb.tsx

@@ -61,14 +61,7 @@ export function BreadcrumbLink(props: BreadcrumbLinkProps) {
   return (
     <Show
       when={!local.current}
-      fallback={
-        <span
-          data-slot="breadcrumb-page"
-          aria-current="page"
-          class={cn('font-medium text-foreground', local.class)}
-          {...(rest as ComponentProps<'span'>)}
-        />
-      }
+      fallback={<BreadcrumbPage class={local.class} {...(rest as ComponentProps<'span'>)} />}
     >
       <a
         data-slot="breadcrumb-link"
@@ -83,6 +76,23 @@ export function BreadcrumbLink(props: BreadcrumbLinkProps) {
   )
 }
 
+/**
+ * The current page: the last crumb, as text rather than a link to itself, and
+ * marked `aria-current="page"`. The same element `BreadcrumbLink current`
+ * renders, for a trail whose last crumb is never a link.
+ */
+export function BreadcrumbPage(props: ComponentProps<'span'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      aria-current="page"
+      class={cn('font-medium text-foreground', local.class)}
+      {...rest}
+    />
+  )
+}
+
 export function BreadcrumbSeparator(props: ComponentProps<'li'>) {
   const [local, rest] = splitProps(props, ['class', 'children'])
 

package/src/components/ui/breadcrumb/index.ts

@@ -4,6 +4,7 @@ export {
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
+  BreadcrumbPage,
   BreadcrumbSeparator,
   type BreadcrumbLinkProps,
 } from './breadcrumb'

package/src/components/ui/button/button.tsx

@@ -93,6 +93,7 @@ export function Button<T extends ValidComponent = 'button'>(props: ButtonProps<T
     <Polymorphic
       as="button"
       type="button"
+      data-slot="button"
       class={cn(
         buttonVariants({
           variant: local.variant,

package/src/components/ui/card/card.tsx

@@ -1,5 +1,6 @@
-import type { ComponentProps, JSX } from 'solid-js'
+import type { ComponentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
+import { cva, type VariantProps } from '#lib/variants'
 import { cn } from '#lib/utils'
 import { headingVariants } from '../typography'
 
@@ -15,18 +16,36 @@ import { headingVariants } from '../typography'
  * The parts are separate components rather than a template because a card's
  * header, content and footer have different padding on purpose: the header and
  * footer are tight, the content breathes.
+ *
+ * `size` is the card's padding rung, so a caller never sets `p-*` or `gap-*` on
+ * a card to make it denser. `sm` tightens the card and its header, content and
+ * footer together (the parts' inline padding follows the card, so they stay
+ * aligned with each other); `flush` removes the block padding and gap for a
+ * card whose body is a list of rows or a scroll area that runs edge to edge.
  */
-export function Card(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+export const cardVariants = cva(
+  'bg-card text-card-foreground flex flex-col rounded-xl border border-border shadow-xs',
+  {
+    variants: {
+      size: {
+        /** 16px block padding and gap; the parts carry 16px inline padding. */
+        default: 'gap-4 py-4',
+        /** 12px everywhere: a dense settings or status card. */
+        sm: 'gap-3 py-3 *:data-[slot=card-content]:px-3 *:data-[slot=card-footer]:px-3 *:data-[slot=card-header]:px-3',
+        /** No block padding or gap: the card hosts a row list or a scroller. */
+        flush: 'gap-0 py-0',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  }
+)
+
+export type CardProps = ComponentProps<'div'> & VariantProps<typeof cardVariants>
+
+export function Card(props: CardProps) {
+  const [local, rest] = splitProps(props, ['class', 'size'])
   return (
-    <div
-      data-slot="card"
-      class={cn(
-        'bg-card text-card-foreground flex flex-col gap-4 rounded-xl border border-border py-4 shadow-xs',
-        local.class
-      )}
-      {...rest}
-    />
+    <div data-slot="card" class={cn(cardVariants({ size: local.size }), local.class)} {...rest} />
   )
 }
 
@@ -79,5 +98,3 @@ export function CardFooter(props: ComponentProps<'div'>) {
   const [local, rest] = splitProps(props, ['class'])
   return <div data-slot="card-footer" class={cn('flex items-center px-4', local.class)} {...rest} />
 }
-
-export type CardProps = ComponentProps<'div'> & JSX.HTMLAttributes<HTMLDivElement>

package/src/components/ui/card/index.ts

@@ -1,5 +1,6 @@
 export {
   Card,
+  cardVariants,
   CardAction,
   CardContent,
   CardDescription,

package/src/components/ui/checkbox/checkbox.tsx

@@ -64,6 +64,7 @@ export function Checkbox(props: CheckboxProps) {
 
   return (
     <KobalteCheckbox
+      data-slot="checkbox"
       id={field ? undefined : local.id}
       title={local.title}
       class={cn('group/checkbox flex items-start gap-2.5', local.class)}

package/src/components/ui/dialog/dialog.tsx

@@ -271,10 +271,33 @@ export type DialogContentProps = ComponentProps<typeof KobalteDialogContent> & {
   closeButton?: JSX.Element | false
   /** Use a 1rem inset as the positioner bounds for tall, viewport-filling surfaces. */
   positioner?: 'default' | 'inset'
+  /**
+   * The panel's maximum width. `md` (32rem) is the default and right for a
+   * confirmation or a short form; `sm` (28rem) for a single question; `lg`
+   * (42rem) for a picker or a form with two columns; `xl` (48rem) for a
+   * multi-step flow that needs a table or a preview beside its fields.
+   */
+  size?: DialogContentSize
 }
 
+/** The dialog width ladder, so a caller picks a rung instead of a `max-w-*`. */
+export const dialogContentSizes = {
+  sm: 'max-w-md',
+  md: 'max-w-lg',
+  lg: 'max-w-2xl',
+  xl: 'max-w-3xl',
+} as const
+
+export type DialogContentSize = keyof typeof dialogContentSizes
+
 export function DialogContent(props: DialogContentProps) {
-  const [local, rest] = splitProps(props, ['class', 'children', 'closeButton', 'positioner'])
+  const [local, rest] = splitProps(props, [
+    'class',
+    'children',
+    'closeButton',
+    'positioner',
+    'size',
+  ])
 
   return (
     <KobalteDialog.Portal>
@@ -284,7 +307,8 @@ export function DialogContent(props: DialogContentProps) {
           class={cn(
             dialogSurface,
             overlayMotion,
-            'relative grid w-full max-w-lg gap-4 p-5',
+            'relative grid w-full gap-4 p-5',
+            dialogContentSizes[local.size ?? 'md'],
             local.class
           )}
           {...rest}

package/src/components/ui/dialog/index.ts

@@ -11,4 +11,5 @@ export {
   DialogTitle,
   DialogTrigger,
   type DialogContentProps,
+  type DialogContentSize,
 } from './dialog'