@adea-ai/ui 0.116.0 → 0.118.0

package/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/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/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/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/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/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/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/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);