@adea-ai/ui 0.110.1 → 0.112.0

package/dist/index.js

@@ -103,7 +103,6 @@ import { accentPresets, allTokens, colorTokens, densityTokens, designTokens, ele
 import { isThemeAccentId } from "./lib/theme-accents.js";
 import { appearancePreviewThemes, builtinThemes, contrastRatio, defaultDarkThemeId, defaultLightThemeId, resolveAccentPreset, themeAccentsFor, themeById, themeCssVariables, themeFamilies, themeRecordById, themeRecords, themesForAppearance, validateTheme, validateThemeRegistry, withAccent } from "./lib/themes.js";
 import { APPEARANCE_EDITOR_FONT_AXES, APPEARANCE_EDITOR_FONT_SIZE_MAX, APPEARANCE_EDITOR_FONT_SIZE_MIN, DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, applyAppearanceFontSettings, fontSettingsBootstrapScript, normalizeAppearanceEditorFontSettings, normalizeAppearanceEditorFontSize } from "./lib/appearance-font-settings.js";
-import { PalettePreview, ThemeMiniature, ThemeMiniatureSplit } from "./components/composites/appearance-editor/theme-preview.js";
 import { AppearanceFontSettingsGroup } from "./components/composites/appearance-editor/font-settings-group.js";
 import { ThemePicker, ThemePreview, ThemeSwatch } from "./components/theme/theme-picker.js";
 import { ThemeProvider, defaultThemeSelection, inlineScriptLiteral, resolvedDensity, themeScript, useTheme } from "./components/theme/theme-provider.js";
@@ -122,6 +121,7 @@ import { SettingsNavigation } from "./components/composites/settings/settings-na
 import { SettingsLayout } from "./components/composites/settings/settings-layout.js";
 import { SceneControls } from "./components/composites/scene-controls/scene-controls.js";
 import { PropertyList, PropertyRow, PropertyTerm, PropertyValue, Stat, StatGroup } from "./components/composites/stat/stat.js";
+import { PalettePreview, ThemeMiniature, ThemeMiniatureSplit } from "./components/composites/appearance-editor/theme-preview.js";
 import { AppearanceEditor, AppearanceEditorActions, AppearancePopover } from "./components/composites/appearance-editor/appearance-editor.js";
 import { formatBytes, formatReleaseDate, plainTextFromMarkdown } from "./lib/version-notes.js";
 import { UpdateDialog } from "./components/composites/update-dialog/update-dialog.js";

package/dist/lib/overlay.d.ts

@@ -9,8 +9,24 @@
  * library would inherit all three. Declaring the surface once is what makes
  * "an overlay looks like this" a fact rather than a convention.
  */
-/** The panel itself: fill, hairline edge, radius, elevation. */
+import { type VariantProps } from '#lib/variants';
+/** The panel itself: fill, hairline edge, radius, elevation. Menus, popovers
+ * and the command palette float on the elevated overlay rung (`--popover`). */
 export declare const overlaySurface = "bg-popover text-popover-foreground rounded-xl border border-border shadow-lg";
+/**
+ * The modal panel: the same hairline edge, radius and elevation, painted on the
+ * *neutral* theme surface instead of the elevated overlay rung.
+ *
+ * `--popover` is the catalogue's `surfaceElevated`, whose derivation amplifies
+ * the canvas hue's chroma on the elevated step. On the dark default's violet
+ * canvas that makes the dialog the most chromatic surface in the ladder —
+ * `oklch(0.2406 0.0088 300.91)`, red above green in sRGB — and on a full dialog
+ * panel that cast reads as a warm tint the canvas never has. shadcn's own
+ * convention already splits the two: a Dialog paints `bg-background`, menus and
+ * popovers paint `bg-popover`. The veil, the hairline and the elevation shadow
+ * carry the separation the lighter fill no longer provides.
+ */
+export declare const dialogSurface = "bg-background text-foreground rounded-xl border border-border shadow-lg";
 /**
  * Overlay titles have one fixed typography role. Keep this small recipe shared
  * without loading the configurable Heading component into every dialog.
@@ -53,6 +69,19 @@ export declare const destructiveMenuItem = "border-s-2 border-destructive ps-1.5
 export declare const menuLabel = "px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase";
 /** The rule between menu groups. */
 export declare const menuSeparator = "bg-border -mx-1 my-1 h-px";
+/**
+ * A leading colour swatch on a menu or select row: the sanctioned way to carry
+ * a card-tone colour into a list of options. The tones are the system's accent
+ * and status roles — the vocabulary a Badge already speaks — so the colour an
+ * option shows in a menu is the colour its badge carries on a card, and a
+ * caller never passes a raw colour into a list. The dot is `aria-hidden`; the
+ * label carries the meaning, so a tone is never the only signal.
+ */
+export declare const menuSwatchTone: (props?: ({
+    tone?: "destructive" | "success" | "warning" | "info" | "neutral" | "primary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The tones a menu row's swatch can take. */
+export type MenuSwatchTone = NonNullable<VariantProps<typeof menuSwatchTone>['tone']>;
 /** Padding shared by every menu-list surface. */
 export declare const menuContentPadding = "p-1";
 /**

package/dist/lib/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/lib/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,gEAAgE;AAChE,eAAO,MAAM,cAAc,iFACqD,CAAA;AAEhF;;;GAGG;AACH,eAAO,MAAM,YAAY,wDAAwD,CAAA;AAEjF,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,6DAA6D,CAAA;AAE3F,gDAAgD;AAChD,eAAO,MAAM,YAAY,yFAC+D,CAAA;AAExF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,+FACuE,CAAA;AAE9F;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,QAIf,CAAA;AAEX;qCACqC;AACrC,eAAO,MAAM,aAAa,QAGf,CAAA;AAEX,+DAA+D;AAC/D,eAAO,MAAM,YAAY,+BAA+B,CAAA;AAExD;;;GAGG;AACH,eAAO,MAAM,QAAQ,QAOV,CAAA;AAEX,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,kGACiE,CAAA;AAEjG,4CAA4C;AAC5C,eAAO,MAAM,SAAS,mFAC4D,CAAA;AAElF,oCAAoC;AACpC,eAAO,MAAM,aAAa,8BAA8B,CAAA;AAExD,iDAAiD;AACjD,eAAO,MAAM,kBAAkB,QAAQ,CAAA;AAEvC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa;;CAAuC,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/lib/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAEtD;+EAC+E;AAC/E,eAAO,MAAM,cAAc,iFACqD,CAAA;AAEhF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,4EACiD,CAAA;AAE3E;;;GAGG;AACH,eAAO,MAAM,YAAY,wDAAwD,CAAA;AAEjF,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,6DAA6D,CAAA;AAE3F,gDAAgD;AAChD,eAAO,MAAM,YAAY,yFAC+D,CAAA;AAExF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,+FACuE,CAAA;AAE9F;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,QAIf,CAAA;AAEX;qCACqC;AACrC,eAAO,MAAM,aAAa,QAGf,CAAA;AAEX,+DAA+D;AAC/D,eAAO,MAAM,YAAY,+BAA+B,CAAA;AAExD;;;GAGG;AACH,eAAO,MAAM,QAAQ,QAOV,CAAA;AAEX,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,kGACiE,CAAA;AAEjG,4CAA4C;AAC5C,eAAO,MAAM,SAAS,mFAC4D,CAAA;AAElF,oCAAoC;AACpC,eAAO,MAAM,aAAa,8BAA8B,CAAA;AAExD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;;8EAYzB,CAAA;AAEF,8CAA8C;AAC9C,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAErF,iDAAiD;AACjD,eAAO,MAAM,kBAAkB,QAAQ,CAAA;AAEvC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa;;CAAuC,CAAA"}

package/dist/lib/overlay.js

@@ -1,3 +1,4 @@
+import { cva } from "./variants.js";
 //#region src/lib/overlay.ts
 /**
 * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,
@@ -10,9 +11,24 @@
 * library would inherit all three. Declaring the surface once is what makes
 * "an overlay looks like this" a fact rather than a convention.
 */
-/** The panel itself: fill, hairline edge, radius, elevation. */
+/** The panel itself: fill, hairline edge, radius, elevation. Menus, popovers
+* and the command palette float on the elevated overlay rung (`--popover`). */
 var overlaySurface = "bg-popover text-popover-foreground rounded-xl border border-border shadow-lg";
 /**
+* The modal panel: the same hairline edge, radius and elevation, painted on the
+* *neutral* theme surface instead of the elevated overlay rung.
+*
+* `--popover` is the catalogue's `surfaceElevated`, whose derivation amplifies
+* the canvas hue's chroma on the elevated step. On the dark default's violet
+* canvas that makes the dialog the most chromatic surface in the ladder —
+* `oklch(0.2406 0.0088 300.91)`, red above green in sRGB — and on a full dialog
+* panel that cast reads as a warm tint the canvas never has. shadcn's own
+* convention already splits the two: a Dialog paints `bg-background`, menus and
+* popovers paint `bg-popover`. The veil, the hairline and the elevation shadow
+* carry the separation the lighter fill no longer provides.
+*/
+var dialogSurface = "bg-background text-foreground rounded-xl border border-border shadow-lg";
+/**
 * Overlay titles have one fixed typography role. Keep this small recipe shared
 * without loading the configurable Heading component into every dialog.
 */
@@ -66,6 +82,25 @@ var menuLabel = "px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreg
 /** The rule between menu groups. */
 var menuSeparator = "bg-border -mx-1 my-1 h-px";
 /**
+* A leading colour swatch on a menu or select row: the sanctioned way to carry
+* a card-tone colour into a list of options. The tones are the system's accent
+* and status roles — the vocabulary a Badge already speaks — so the colour an
+* option shows in a menu is the colour its badge carries on a card, and a
+* caller never passes a raw colour into a list. The dot is `aria-hidden`; the
+* label carries the meaning, so a tone is never the only signal.
+*/
+var menuSwatchTone = cva("size-2 shrink-0 rounded-full", {
+	variants: { tone: {
+		neutral: "bg-muted-foreground",
+		primary: "bg-primary",
+		success: "bg-success",
+		warning: "bg-warning",
+		destructive: "bg-destructive",
+		info: "bg-info"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+/**
 * Marks a floating layer — a menu, a listbox, a popover — as part of the top
 * layer.
 *
@@ -79,6 +114,6 @@ var menuSeparator = "bg-border -mx-1 my-1 h-px";
 */
 var topLayerProps = { "data-kb-top-layer": "" };
 //#endregion
-export { destructiveMenuItem, menuItem, menuLabel, menuSeparator, overlayMotion, overlayPositioner, overlayScrim, overlaySurface, overlayTitle, popoverArrow, popoverMotion, tooltipTip, topLayerProps };
+export { destructiveMenuItem, dialogSurface, menuItem, menuLabel, menuSeparator, menuSwatchTone, overlayMotion, overlayPositioner, overlayScrim, overlaySurface, overlayTitle, popoverArrow, popoverMotion, tooltipTip, topLayerProps };
 
 //# sourceMappingURL=overlay.js.map

package/dist/lib/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":[],"sources":["../../src/lib/overlay.ts"],"sourcesContent":["/**\n * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,\n * tooltips and the command palette.\n *\n * These live here rather than in each component because the overlay family is\n * where consistency is most visible and least likely to survive duplication.\n * A dialog, a sheet and a dropdown that disagree about their border, radius,\n * motion or shadow read as three different apps — and an app that adopts this\n * library would inherit all three. Declaring the surface once is what makes\n * \"an overlay looks like this\" a fact rather than a convention.\n */\n\n/** The panel itself: fill, hairline edge, radius, elevation. */\nexport const overlaySurface =\n  'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'\n\n/**\n * Overlay titles have one fixed typography role. Keep this small recipe shared\n * without loading the configurable Heading component into every dialog.\n */\nexport const overlayTitle = 'font-semibold text-base tracking-tight leading-none'\n\n/** The span of the portal wrapper that centres a dialog-like overlay. */\nexport const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'\n\n/** The dimming layer behind a modal overlay. */\nexport const overlayScrim =\n  'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'\n\n/**\n * The tip: the card-toned bubble an explanation shows in. The side rail draws\n * it flush to a collapsed row and every floating tooltip composes the same\n * fill, edge, and type, so a control never explains itself in two visual\n * languages.\n */\nexport const tooltipTip =\n  'bg-card text-card-foreground rounded-md border border-border text-sm font-medium shadow-lg'\n\n/**\n * Entrance and exit motion, expressed as data-state classes.\n *\n * `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its\n * popper positioning and let a menu slide in from the edge it is anchored to,\n * which is what makes a dropdown feel attached to its trigger rather than\n * dropped on the screen. Exit motion is shorter than entry, because a\n * dismissal should feel immediate while an arrival benefits from being seen.\n */\nexport const overlayMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n  'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n  'data-expanded:duration-200 data-closed:duration-150',\n].join(' ')\n\n/** Popover-style motion: no zoom, so a panel anchored to a control does not\n * appear to breathe away from it. */\nexport const popoverMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n  'data-expanded:duration-150 data-closed:duration-100',\n].join(' ')\n\n/** The popper arrow. Sized in the component; coloured here. */\nexport const popoverArrow = 'fill-popover stroke-border'\n\n/**\n * A menu row: the shared height, radius, hover fill and focus treatment for\n * every item inside a menu, listbox or command list.\n */\nexport const menuItem = [\n  'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',\n  'transition-colors ease-out',\n  'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n  '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n  '[&_svg:not([class*=text-])]:text-muted-foreground',\n].join(' ')\n\n/** A destructive action keeps readable text and marks its row with a status edge. */\nexport const destructiveMenuItem =\n  'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'\n\n/** The label above a group of menu rows. */\nexport const menuLabel =\n  'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'\n\n/** The rule between menu groups. */\nexport const menuSeparator = 'bg-border -mx-1 my-1 h-px'\n\n/** Padding shared by every menu-list surface. */\nexport const menuContentPadding = 'p-1'\n\n/**\n * Marks a floating layer — a menu, a listbox, a popover — as part of the top\n * layer.\n *\n * A modal dialog hides everything outside itself from assistive technology\n * (`aria-hidden` on its siblings) and keeps watching `<body>` for new nodes.\n * A menu or select opened from inside the dialog portals to `<body>`, so the\n * dialog hid it too: the list was on screen, focused, and invisible to a\n * screen reader, and an outside-click check could treat a click on it as a\n * click away from the dialog. Kobalte exempts nodes carrying this attribute\n * from both, so every floating layer carries it.\n */\nexport const topLayerProps = { 'data-kb-top-layer': '' } as const\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,iBACX;;;;;AAMF,IAAa,eAAe;;AAG5B,IAAa,oBAAoB;;AAGjC,IAAa,eACX;;;;;;;AAQF,IAAa,aACX;;;;;;;;;;AAWF,IAAa,gBAAgB;CAC3B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;AAIV,IAAa,gBAAgB,CAC3B,mGACA,qDACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,eAAe;;;;;AAM5B,IAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,sBACX;;AAGF,IAAa,YACX;;AAGF,IAAa,gBAAgB;;;;;;;;;;;;;AAiB7B,IAAa,gBAAgB,EAAE,qBAAqB,GAAG"}
+{"version":3,"file":"overlay.js","names":[],"sources":["../../src/lib/overlay.ts"],"sourcesContent":["/**\n * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,\n * tooltips and the command palette.\n *\n * These live here rather than in each component because the overlay family is\n * where consistency is most visible and least likely to survive duplication.\n * A dialog, a sheet and a dropdown that disagree about their border, radius,\n * motion or shadow read as three different apps — and an app that adopts this\n * library would inherit all three. Declaring the surface once is what makes\n * \"an overlay looks like this\" a fact rather than a convention.\n */\n\nimport { cva, type VariantProps } from '#lib/variants'\n\n/** The panel itself: fill, hairline edge, radius, elevation. Menus, popovers\n * and the command palette float on the elevated overlay rung (`--popover`). */\nexport const overlaySurface =\n  'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'\n\n/**\n * The modal panel: the same hairline edge, radius and elevation, painted on the\n * *neutral* theme surface instead of the elevated overlay rung.\n *\n * `--popover` is the catalogue's `surfaceElevated`, whose derivation amplifies\n * the canvas hue's chroma on the elevated step. On the dark default's violet\n * canvas that makes the dialog the most chromatic surface in the ladder —\n * `oklch(0.2406 0.0088 300.91)`, red above green in sRGB — and on a full dialog\n * panel that cast reads as a warm tint the canvas never has. shadcn's own\n * convention already splits the two: a Dialog paints `bg-background`, menus and\n * popovers paint `bg-popover`. The veil, the hairline and the elevation shadow\n * carry the separation the lighter fill no longer provides.\n */\nexport const dialogSurface =\n  'bg-background text-foreground rounded-xl border border-border shadow-lg'\n\n/**\n * Overlay titles have one fixed typography role. Keep this small recipe shared\n * without loading the configurable Heading component into every dialog.\n */\nexport const overlayTitle = 'font-semibold text-base tracking-tight leading-none'\n\n/** The span of the portal wrapper that centres a dialog-like overlay. */\nexport const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'\n\n/** The dimming layer behind a modal overlay. */\nexport const overlayScrim =\n  'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'\n\n/**\n * The tip: the card-toned bubble an explanation shows in. The side rail draws\n * it flush to a collapsed row and every floating tooltip composes the same\n * fill, edge, and type, so a control never explains itself in two visual\n * languages.\n */\nexport const tooltipTip =\n  'bg-card text-card-foreground rounded-md border border-border text-sm font-medium shadow-lg'\n\n/**\n * Entrance and exit motion, expressed as data-state classes.\n *\n * `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its\n * popper positioning and let a menu slide in from the edge it is anchored to,\n * which is what makes a dropdown feel attached to its trigger rather than\n * dropped on the screen. Exit motion is shorter than entry, because a\n * dismissal should feel immediate while an arrival benefits from being seen.\n */\nexport const overlayMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n  'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n  'data-expanded:duration-200 data-closed:duration-150',\n].join(' ')\n\n/** Popover-style motion: no zoom, so a panel anchored to a control does not\n * appear to breathe away from it. */\nexport const popoverMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n  'data-expanded:duration-150 data-closed:duration-100',\n].join(' ')\n\n/** The popper arrow. Sized in the component; coloured here. */\nexport const popoverArrow = 'fill-popover stroke-border'\n\n/**\n * A menu row: the shared height, radius, hover fill and focus treatment for\n * every item inside a menu, listbox or command list.\n */\nexport const menuItem = [\n  'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',\n  'transition-colors ease-out',\n  'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n  '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n  '[&_svg:not([class*=text-])]:text-muted-foreground',\n].join(' ')\n\n/** A destructive action keeps readable text and marks its row with a status edge. */\nexport const destructiveMenuItem =\n  'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'\n\n/** The label above a group of menu rows. */\nexport const menuLabel =\n  'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'\n\n/** The rule between menu groups. */\nexport const menuSeparator = 'bg-border -mx-1 my-1 h-px'\n\n/**\n * A leading colour swatch on a menu or select row: the sanctioned way to carry\n * a card-tone colour into a list of options. The tones are the system's accent\n * and status roles — the vocabulary a Badge already speaks — so the colour an\n * option shows in a menu is the colour its badge carries on a card, and a\n * caller never passes a raw colour into a list. The dot is `aria-hidden`; the\n * label carries the meaning, so a tone is never the only signal.\n */\nexport const menuSwatchTone = cva('size-2 shrink-0 rounded-full', {\n  variants: {\n    tone: {\n      neutral: 'bg-muted-foreground',\n      primary: 'bg-primary',\n      success: 'bg-success',\n      warning: 'bg-warning',\n      destructive: 'bg-destructive',\n      info: 'bg-info',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\n/** The tones a menu row's swatch can take. */\nexport type MenuSwatchTone = NonNullable<VariantProps<typeof menuSwatchTone>['tone']>\n\n/** Padding shared by every menu-list surface. */\nexport const menuContentPadding = 'p-1'\n\n/**\n * Marks a floating layer — a menu, a listbox, a popover — as part of the top\n * layer.\n *\n * A modal dialog hides everything outside itself from assistive technology\n * (`aria-hidden` on its siblings) and keeps watching `<body>` for new nodes.\n * A menu or select opened from inside the dialog portals to `<body>`, so the\n * dialog hid it too: the list was on screen, focused, and invisible to a\n * screen reader, and an outside-click check could treat a click on it as a\n * click away from the dialog. Kobalte exempts nodes carrying this attribute\n * from both, so every floating layer carries it.\n */\nexport const topLayerProps = { 'data-kb-top-layer': '' } as const\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAa,iBACX;;;;;;;;;;;;;;AAeF,IAAa,gBACX;;;;;AAMF,IAAa,eAAe;;AAG5B,IAAa,oBAAoB;;AAGjC,IAAa,eACX;;;;;;;AAQF,IAAa,aACX;;;;;;;;;;AAWF,IAAa,gBAAgB;CAC3B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;AAIV,IAAa,gBAAgB,CAC3B,mGACA,qDACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,eAAe;;;;;AAM5B,IAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,sBACX;;AAGF,IAAa,YACX;;AAGF,IAAa,gBAAgB;;;;;;;;;AAU7B,IAAa,iBAAiB,IAAI,gCAAgC;CAChE,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,SAAS;EACT,SAAS;EACT,aAAa;EACb,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;;;;;;;;;;;;;AAoBD,IAAa,gBAAgB,EAAE,qBAAqB,GAAG"}

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

@@ -29,6 +29,14 @@ export type ActionButtonProps<T extends ValidComponent = 'button'> = ButtonProps
   tooltip?: string
   /** Placement of the explanation; icon actions live in bars, so it defaults below the control. */
   tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
+  /**
+   * A leading icon repeated inside the explanation, forwarded to the shared
+   * tooltip's `icon` slot so a bar of icon actions gets the icon+label tip
+   * without hand-composing Button and Tooltip. Decorative by contract: the tip
+   * is never the accessible name, so the icon must not carry meaning the label
+   * lacks. Size it by leaving the svg bare; the slot fixes it to control size.
+   */
+  tooltipIcon?: JSX.Element
   /** Disables the action and announces the busy label through a polite status region. */
   busy?: boolean
   /** The activity announced while busy. The Button's accessible name stays unchanged. */
@@ -92,6 +100,7 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
     'aria-busy',
     'tooltip',
     'tooltipSide',
+    'tooltipIcon',
     'busy',
     'busyLabel',
   ])
@@ -175,7 +184,7 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
           >
             {contents()}
           </TooltipTrigger>
-          <TooltipContent>{local.tooltip}</TooltipContent>
+          <TooltipContent icon={local.tooltipIcon}>{local.tooltip}</TooltipContent>
         </Tooltip>
       </Show>
       <Show when={busy()}>

package/dist/r/src/components/composites/appearance-editor/accent-swatch-groups.tsx

@@ -22,11 +22,7 @@
  * SOFTWARE.
  */
 import { RadioGroup as Radio } from '@kobalte/core/radio-group'
-import { For, Show } from 'solid-js'
-import { cn } from '../../../lib/utils'
-
-export const PRIMARY_ACCENT_IDS = ['blue', 'green', 'amber', 'cyan', 'pink'] as const
-const primaryAccentIds: ReadonlySet<string> = new Set(PRIMARY_ACCENT_IDS)
+import { For } from 'solid-js'
 
 type AccentOption = Readonly<{
   id: string
@@ -37,104 +33,55 @@ type AccentOption = Readonly<{
 
 type AccentSwatchGroupsProps = {
   accentOptions: readonly AccentOption[]
-  themeAccentOptions: readonly AccentOption[]
+  /**
+   * Accepted for host compatibility and no longer rendered. The picker offers
+   * one theme-scoped group — the theme's own primary followed by the presets —
+   * instead of splitting additional presets and the theme pair's accent slots
+   * into labelled groups of their own. A stored theme-accent id still resolves
+   * (`resolveAccentPreset`) and is still described by the row; it is just no
+   * longer offered as a swatch, and a host can stop feeding this list.
+   */
+  themeAccentOptions?: readonly AccentOption[]
   resolvedAppearance: 'light' | 'dark'
   themeDefaultColor: string
 }
 
+/**
+ * The accent choices, as ONE group: the theme's own primary first, then every
+ * preset the host feeds, each painted with its value for the resolved
+ * appearance — which is what makes the group theme-scoped rather than a
+ * catalogue table. The custom-color entry is the host's (`AccentChoices`
+ * renders it beside this grid), because whether a free-form colour is accepted
+ * is the host's validation to own.
+ */
 export function AccentSwatchGroups(props: AccentSwatchGroupsProps) {
-  const primaryAccents = () =>
-    PRIMARY_ACCENT_IDS.flatMap((id) => {
-      const option = props.accentOptions.find((candidate) => candidate.id === id)
-      return option ? [option] : []
-    })
-  const additionalAccents = () =>
-    props.accentOptions.filter(
-      (option) => option.id !== 'theme' && !primaryAccentIds.has(option.id)
-    )
+  const presets = () => props.accentOptions.filter((option) => option.id !== 'theme')
 
   return (
-    <>
-      <div class="grid grid-cols-3 gap-2" data-primary-accent-grid>
-        <AccentSwatch
-          id="theme"
-          label="Theme default"
-          color={props.themeDefaultColor}
-          group="primary"
-        />
-        <For each={primaryAccents()}>
-          {(option) => (
-            <AccentSwatch
-              id={option.id}
-              label={option.label}
-              color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
-              group="primary"
-            />
-          )}
-        </For>
-      </div>
-      <Show when={additionalAccents().length > 0}>
-        <div class="flex flex-col gap-1">
-          <span class="text-xs font-medium text-muted-foreground">Additional colors</span>
-          <div class="flex flex-wrap gap-2">
-            <For each={additionalAccents()}>
-              {(option) => (
-                <AccentSwatch
-                  id={option.id}
-                  label={option.label}
-                  color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
-                  group="additional"
-                />
-              )}
-            </For>
-          </div>
-        </div>
-      </Show>
-      <Show when={props.themeAccentOptions.length > 0}>
-        <div class="flex flex-col gap-1">
-          <span class="text-xs font-medium text-muted-foreground">Theme accents</span>
-          <div class="grid grid-cols-3 gap-2">
-            <For each={props.themeAccentOptions}>
-              {(option) => (
-                <AccentSwatch
-                  id={option.id}
-                  label={'Theme ' + option.label.toLowerCase()}
-                  color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
-                  group="theme"
-                  dashed
-                />
-              )}
-            </For>
-          </div>
-        </div>
-      </Show>
-    </>
+    <div class="grid grid-cols-4 gap-2" data-accent-grid>
+      <AccentSwatch id="theme" label="Theme default" color={props.themeDefaultColor} />
+      <For each={presets()}>
+        {(option) => (
+          <AccentSwatch
+            id={option.id}
+            label={option.label}
+            color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
+          />
+        )}
+      </For>
+    </div>
   )
 }
 
-function AccentSwatch(props: {
-  id: string
-  label: string
-  color: string
-  group: 'primary' | 'additional' | 'theme'
-  dashed?: boolean
-}) {
+function AccentSwatch(props: { id: string; label: string; color: string }) {
   return (
     <Radio.Item
       value={props.id}
       data-accent-option={props.id}
-      data-primary-accent={props.group === 'primary' ? props.id : undefined}
-      data-additional-accent={props.group === 'additional' ? props.id : undefined}
-      data-theme-accent={props.group === 'theme' ? props.id : undefined}
       class="rounded-full focus-within:ring-3 focus-within:ring-ring/50"
     >
       <Radio.ItemInput />
-      <Radio.ItemLabel
-        class={cn(
-          'block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary',
-          { 'border-dashed data-[checked]:border-solid': props.dashed }
-        )}
-      >
+      <Radio.ItemLabel class="block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
         <span
           class="block size-full rounded-full"
           aria-hidden="true"

package/dist/r/src/components/composites/appearance-editor/appearance-choices.tsx

@@ -104,8 +104,6 @@ export function AccentChoices(props: AppearanceEditorProps) {
   // user will see it.
   const resolvedAppearance = () =>
     props.draft.mode === 'system' ? props.resolvedAppearance : props.draft.mode
-  // The accents the previewed theme pair carries, offered after the presets.
-  const themeAccents = () => props.themeAccentOptions ?? []
   const accentSelection = () => (isCustomAccent(props) ? 'custom' : props.draft.accent)
   return (
     <Radio
@@ -122,7 +120,6 @@ export function AccentChoices(props: AppearanceEditorProps) {
     >
       <AccentSwatchGroups
         accentOptions={props.accentOptions}
-        themeAccentOptions={themeAccents()}
         resolvedAppearance={resolvedAppearance()}
         themeDefaultColor={
           resolvedAppearance() === 'light'

package/dist/r/src/components/composites/appearance-editor/font-settings-group.tsx

@@ -11,7 +11,6 @@ import {
   DropdownMenuTrigger,
 } from '../../ui/dropdown-menu/dropdown-menu'
 import { InputControl } from '../../ui/input/input-control'
-import { SettingsRow } from './appearance-rows'
 import {
   APPEARANCE_EDITOR_FONT_SIZE_MAX,
   APPEARANCE_EDITOR_FONT_SIZE_MIN,
@@ -142,7 +141,7 @@ function FontFamilyMenu(props: {
         size="sm"
         aria-label={`${props.label} font family`}
         disabled={props.disabled}
-        class="w-40 max-w-full justify-between"
+        class="w-32 max-w-full justify-between"
       >
         <span class="truncate">{selectedLabel()}</span>
         <ChevronDown aria-hidden="true" class="ms-2 size-4 shrink-0 text-muted-foreground" />
@@ -298,8 +297,22 @@ export function AppearanceFontSettingsGroup(props: AppearanceFontSettingsGroupPr
             )
           }
           return (
-            <SettingsRow title={row.label} icon={<Icon />} description={row.description}>
-              <div class="flex min-w-0 max-w-full flex-wrap items-center gap-2">
+            <section class="flex items-center gap-3 px-4 py-4" data-font-settings-row={row.axis}>
+              <span
+                class="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-foreground/5 text-muted-foreground [&_svg]:size-4"
+                aria-hidden="true"
+              >
+                <Icon />
+              </span>
+              {/* One line, always: the copy truncates rather than wrapping the
+                  controls to a second line, so the family menu, the size field
+                  and the title/subtitle stay aligned. The compact widths keep
+                  that true at the appearance sheet's own width. */}
+              <div class="min-w-0 flex-1">
+                <h3 class="text-sm font-medium">{row.label}</h3>
+                <div class="mt-0.5 truncate text-xs text-muted-foreground">{row.description}</div>
+              </div>
+              <div class="flex shrink-0 items-center gap-2">
                 <FontFamilyMenu
                   label={row.label}
                   family={value().family}
@@ -307,7 +320,7 @@ export function AppearanceFontSettingsGroup(props: AppearanceFontSettingsGroupPr
                   disabled={props.disabled}
                   onSelect={(family) => updateAxis(row.axis, { family })}
                 />
-                <div class="flex shrink-0 items-center gap-1">
+                <div class="flex items-center gap-1">
                   <InputControl
                     type="number"
                     min={APPEARANCE_EDITOR_FONT_SIZE_MIN}
@@ -318,7 +331,7 @@ export function AppearanceFontSettingsGroup(props: AppearanceFontSettingsGroupPr
                     aria-label={`${row.label} font size in pixels`}
                     aria-describedby={sizeHintId}
                     aria-invalid={sizeIsInvalid()}
-                    class="w-16"
+                    class="w-12"
                     onInput={(event) =>
                       setSizeDrafts((current) => ({
                         ...current,
@@ -341,7 +354,7 @@ export function AppearanceFontSettingsGroup(props: AppearanceFontSettingsGroupPr
                   {APPEARANCE_EDITOR_FONT_SIZE_MAX} pixels.
                 </span>
               </div>
-            </SettingsRow>
+            </section>
           )
         }}
       </For>

package/dist/r/src/components/theme/appearance-panel.tsx

@@ -118,7 +118,6 @@ export function AppearancePanel(props: AppearancePanelProps) {
         >
           <AccentSwatchGroups
             accentOptions={accentPresets}
-            themeAccentOptions={themeAccents()}
             resolvedAppearance={resolvedAppearance()}
             themeDefaultColor="var(--primary)"
           />

package/dist/r/src/components/ui/alert-dialog/alert-dialog.tsx

@@ -6,10 +6,10 @@ import {
 import type { ComponentProps } from 'solid-js'
 import { createEffect, createSignal, splitProps } from 'solid-js'
 import {
+  dialogSurface,
   overlayMotion,
   overlayPositioner,
   overlayScrim,
-  overlaySurface,
   overlayTitle,
 } from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
@@ -89,7 +89,7 @@ export function AlertDialogContent(props: ComponentProps<typeof KobalteAlertDial
       <div class={overlayPositioner}>
         <KobalteAlertDialogContent
           {...blockDismissal}
-          class={cn(overlaySurface, overlayMotion, 'grid w-full max-w-md gap-4 p-5', local.class)}
+          class={cn(dialogSurface, overlayMotion, 'grid w-full max-w-md gap-4 p-5', local.class)}
           {...rest}
         />
       </div>

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

@@ -133,7 +133,9 @@ export function ComboboxItem(props: ComponentProps<typeof KobalteCombobox.Item>)
   return (
     <KobalteCombobox.Item class={cn(menuItem, 'pe-8', local.class)} {...rest}>
       <KobalteCombobox.ItemLabel>{local.children}</KobalteCombobox.ItemLabel>
-      <KobalteCombobox.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+      {/* The indicator reads in the accent, like every other selected state in
+      the system. */}
+      <KobalteCombobox.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center text-primary">
         <Check class="size-4" />
       </KobalteCombobox.ItemIndicator>
     </KobalteCombobox.Item>

package/dist/r/src/components/ui/context-menu/context-menu.tsx

@@ -109,7 +109,9 @@ export function ContextMenuCheckboxItem(
   return (
     <KobalteContextMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>
       {local.children}
-      <KobalteContextMenu.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+      {/* The indicator reads in the accent, like every other selected state in
+      the system. */}
+      <KobalteContextMenu.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center text-primary">
         <Check class="size-4" />
       </KobalteContextMenu.ItemIndicator>
     </KobalteContextMenu.CheckboxItem>
@@ -126,7 +128,9 @@ export function ContextMenuRadioItem(props: ComponentProps<typeof KobalteContext
   return (
     <KobalteContextMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>
       {local.children}
-      <KobalteContextMenu.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+      {/* The indicator reads in the accent, like every other selected state in
+      the system. */}
+      <KobalteContextMenu.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center text-primary">
         <Circle class="size-2 fill-current" />
       </KobalteContextMenu.ItemIndicator>
     </KobalteContextMenu.RadioItem>

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

@@ -8,10 +8,10 @@ import { X } from 'lucide-solid'
 import type { Accessor, ComponentProps, JSX } from 'solid-js'
 import { createRenderEffect, onCleanup, Show, splitProps } from 'solid-js'
 import {
+  dialogSurface,
   overlayMotion,
   overlayPositioner,
   overlayScrim,
-  overlaySurface,
   overlayTitle,
 } from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
@@ -282,7 +282,7 @@ export function DialogContent(props: DialogContentProps) {
       <div class={cn(overlayPositioner, local.positioner === 'inset' && 'inset-4 grid-rows-1 p-0')}>
         <KobalteDialogContent
           class={cn(
-            overlaySurface,
+            dialogSurface,
             overlayMotion,
             'relative grid w-full max-w-lg gap-4 p-5',
             local.class

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

@@ -69,7 +69,7 @@ export function DrawerContent(props: DrawerContentProps) {
       <DrawerOverlay />
       <DrawerPrimitive.Content
         class={cn(
-          'group/drawer bg-popover text-popover-foreground fixed z-(--z-drawer) flex flex-col border-border shadow-lg',
+          'group/drawer bg-background text-foreground fixed z-(--z-drawer) flex flex-col border-border shadow-lg',
           'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:max-h-[85vh] data-[side=bottom]:rounded-t-xl data-[side=bottom]:border-t',
           'data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:max-h-[85vh] data-[side=top]:rounded-b-xl data-[side=top]:border-b',
           'data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:w-80 data-[side=left]:rounded-e-xl data-[side=left]:border-e',