@brijbyte/agentic-ui 0.0.2 → 0.0.4

package/README.md

@@ -135,34 +135,37 @@ All tokens live in `@layer theme` — the lowest-priority layer. `@layer base` (
 
 Shadows are theme-aware — light mode uses low-opacity black shadows; dark mode uses higher-opacity values so elevation is visible against dark surfaces.
 
-| Token                                                     | Tailwind class       | Role                                        |
-| --------------------------------------------------------- | -------------------- | ------------------------------------------- |
-| `--color-canvas`                                          | `bg-canvas`          | Page background                             |
-| `--color-elevated`                                        | `bg-elevated`        | Cards, popovers                             |
-| `--color-sunken`                                          | `bg-sunken`          | Code blocks, inset areas                    |
-| `--color-overlay`                                         | `bg-overlay`         | Backdrop-blurred surfaces                   |
-| `--color-sidebar`                                         | `bg-sidebar`         | Sidebar / navigation panels                 |
-| `--color-surface-1/2/3`                                   | `bg-surface-1/2/3`   | Layered surface hierarchy                   |
-| `--color-hover`                                           | `bg-hover`           | Hovered interactive surface                 |
-| `--color-active`                                          | `bg-active`          | Pressed interactive surface                 |
-| `--color-selected`                                        | `bg-selected`        | Selected interactive surface                |
-| `--color-primary`                                         | `text-primary`       | Primary text                                |
-| `--color-secondary`                                       | `text-secondary`     | Secondary text                              |
-| `--color-tertiary`                                        | `text-tertiary`      | Tertiary / hint text                        |
-| `--color-disabled`                                        | `text-disabled`      | Disabled text                               |
-| `--color-inverse`                                         | `text-inverse`       | Text on inverse (dark) backgrounds          |
-| `--color-on-accent`                                       | `text-on-accent`     | Text on filled accent backgrounds           |
-| `--color-code`                                            | `text-code`          | Inline code text                            |
-| `--color-line`                                            | `border-line`        | Base border                                 |
-| `--color-line-strong`                                     | `border-line-strong` | Stronger border                             |
-| `--color-line-subtle`                                     | `border-line-subtle` | Subtle / decorative border                  |
-| `--color-accent`                                          | `bg-accent`          | macOS blue — solid interactive colour       |
-| `--color-accent-hover`                                    | —                    | Accent on hover                             |
-| `--color-accent-pressed`                                  | —                    | Accent on press                             |
-| `--color-accent-tint`                                     | `bg-accent-tint`     | Subtle accent fill (badges, soft buttons)   |
-| `--color-accent-tint-hover`                               | —                    | Tint on hover                               |
-| `--color-focus-ring`                                      | —                    | Focus ring colour (semi-transparent accent) |
-| `--color-success/warning/error/info-bg/border/text/solid` | —                    | Status colours                              |
+| Token                                                     | Tailwind class       | Role                                         |
+| --------------------------------------------------------- | -------------------- | -------------------------------------------- |
+| `--color-canvas`                                          | `bg-canvas`          | Page background                              |
+| `--color-elevated`                                        | `bg-elevated`        | Cards, popovers                              |
+| `--color-sunken`                                          | `bg-sunken`          | Code blocks, inset areas                     |
+| `--color-overlay`                                         | `bg-overlay`         | Backdrop-blurred surfaces                    |
+| `--color-sidebar`                                         | `bg-sidebar`         | Sidebar / navigation panels                  |
+| `--color-surface-1/2/3`                                   | `bg-surface-1/2/3`   | Layered surface hierarchy                    |
+| `--color-hover`                                           | `bg-hover`           | Hovered interactive surface                  |
+| `--color-active`                                          | `bg-active`          | Pressed interactive surface                  |
+| `--color-selected`                                        | `bg-selected`        | Selected interactive surface                 |
+| `--color-primary`                                         | `text-primary`       | Primary text                                 |
+| `--color-secondary`                                       | `text-secondary`     | Secondary text                               |
+| `--color-tertiary`                                        | `text-tertiary`      | Tertiary / hint text                         |
+| `--color-disabled`                                        | `text-disabled`      | Disabled text                                |
+| `--color-inverse`                                         | `text-inverse`       | Text on inverse (dark) backgrounds           |
+| `--color-on-accent`                                       | `text-on-accent`     | Text on filled accent backgrounds            |
+| `--color-code`                                            | `text-code`          | Inline code text                             |
+| `--color-line`                                            | `border-line`        | Base border                                  |
+| `--color-line-strong`                                     | `border-line-strong` | Stronger border                              |
+| `--color-line-subtle`                                     | `border-line-subtle` | Subtle / decorative border                   |
+| `--color-accent`                                          | `bg-accent`          | macOS blue — links, focus rings, tints       |
+| `--color-accent-solid`                                    | —                    | Filled button bg — AA contrast vs white      |
+| `--color-accent-text`                                     | —                    | Accent text on tinted surfaces — AA contrast |
+| `--color-accent-hover`                                    | —                    | Accent on hover                              |
+| `--color-accent-pressed`                                  | —                    | Accent on press                              |
+| `--color-accent-tint`                                     | `bg-accent-tint`     | Subtle accent fill (badges, soft buttons)    |
+| `--color-accent-tint-hover`                               | —                    | Tint on hover                                |
+| `--color-focus-ring`                                      | —                    | Focus ring colour (semi-transparent accent)  |
+| `--color-success/warning/error/info-bg/border/text/solid` | —                    | Status colours                               |
+| `--color-success/warning/error-on-solid`                  | —                    | Text on filled status buttons (AA contrast)  |
 
 ### Spacing
 
@@ -230,7 +233,7 @@ Per-component JS  (also exports <Name>Styles class-name map)
 @brijbyte/agentic-ui/context-menu    @brijbyte/agentic-ui/tabs
 @brijbyte/agentic-ui/dialog          @brijbyte/agentic-ui/toast
 @brijbyte/agentic-ui/drawer          @brijbyte/agentic-ui/tooltip
-@brijbyte/agentic-ui/input
+@brijbyte/agentic-ui/input           @brijbyte/agentic-ui/popover
 
 Per-component CSS  (/<name>.css mirrors each JS subpath)
 @brijbyte/agentic-ui/accordion.css    @brijbyte/agentic-ui/menu.css
@@ -243,7 +246,7 @@ Per-component CSS  (/<name>.css mirrors each JS subpath)
 @brijbyte/agentic-ui/context-menu.css @brijbyte/agentic-ui/tabs.css
 @brijbyte/agentic-ui/dialog.css       @brijbyte/agentic-ui/toast.css
 @brijbyte/agentic-ui/drawer.css       @brijbyte/agentic-ui/tooltip.css
-@brijbyte/agentic-ui/input.css
+@brijbyte/agentic-ui/input.css        @brijbyte/agentic-ui/popover.css
 ```
 
 ---
@@ -280,6 +283,7 @@ import { Button, Dialog, Input } from "@brijbyte/agentic-ui";
 | `/input`        | `Input`                                             | —                                                                                                                                                                                                     |
 | `/menu`         | `Menu`                                              | `MenuPositioner`, `MenuPopup`, `MenuItem`, `MenuSeparator`, `MenuGroupLabel`, `MenuArrow`, `MenuItemShortcut`                                                                                         |
 | `/number-field` | `NumberField`                                       | `NumberFieldGroup`, `NumberFieldInput`, `NumberFieldDecrement`, `NumberFieldIncrement`, `NumberFieldScrubArea`, `NumberFieldScrubAreaCursor`                                                          |
+| `/popover`      | `Popover`                                           | `PopoverPositioner`, `PopoverPopup`, `PopoverTitle`, `PopoverDescription`, `PopoverClose`, `PopoverArrow`, `PopoverViewport`                                                                          |
 | `/progress`     | `Progress`                                          | `ProgressTrack`, `ProgressIndicator`                                                                                                                                                                  |
 | `/select`       | `Select`                                            | `SelectTrigger`, `SelectValue`, `SelectPositioner`, `SelectPopup`, `SelectList`, `SelectItem`, `SelectItemText`, `SelectItemIndicator`, `SelectGroupContainer`, `SelectGroupLabel`, `SelectSeparator` |
 | `/separator`    | `Separator`                                         | —                                                                                                                                                                                                     |
@@ -413,6 +417,8 @@ import { Button } from "@brijbyte/agentic-ui/button";
 | `success`     | Confirm / complete action       |
 | `warning`     | Caution required                |
 
+All tone/variant combinations meet WCAG AA contrast (4.5:1 for text, 3:1 for borders). Each tone exposes two colour roles internally — a solid fill colour (`--btn-color`) and a separate text colour (`--btn-text-color`) optimised for legibility on tinted surfaces — so `soft`, `outline`, and `ghost` variants are always readable regardless of mode.
+
 **`loading`** disables the button and shows a centred spinner. The button width stays stable — children are hidden with `visibility: hidden` so they still contribute to layout.
 
 **`loadingText`** overrides the stable-width behaviour. When set, children swap to this text during loading (no spinner). Use when the loading state needs to communicate progress via text.
@@ -597,6 +603,97 @@ import { Collapsible } from "@brijbyte/agentic-ui/collapsible";
 
 When open, the trigger's bottom corners square off and connect flush with the content panel. When closing, the corners only round back after the panel has fully collapsed — no visible seam at any point during the animation.
 
+### Popover
+
+```tsx
+import { Popover } from "@brijbyte/agentic-ui/popover";
+
+// side: top | bottom (default) | left | right
+// align: start | center (default) | end
+<Popover
+  trigger={<Button variant="outline" size="sm">Details</Button>}
+  title="Deployment info"
+  description="Last deployed 3 minutes ago from main."
+  side="bottom"
+  align="start"
+/>
+
+// With body content and a close button
+<Popover
+  trigger={<Button>Settings</Button>}
+  title="API Settings"
+  dismissible
+>
+  <Input placeholder="API key" style={{ marginTop: "var(--space-3)" }} />
+</Popover>
+```
+
+**`trigger`** is rendered as-is and receives the open/close handler from base-ui.
+
+**`dismissible`** renders a close (×) button in the top-right corner. Omit it for simple informational popovers that dismiss on outside click.
+
+**`side`** / **`align`** control positioning. The popup auto-repositions to avoid viewport overflow — it will flip sides when there isn't enough space.
+
+#### Shared trigger (one popover, many triggers)
+
+Use `Popover.createHandle` from base-ui to connect multiple triggers to a single popup instance. Each trigger passes its own `payload`; the Root receives it via a render-function child. Switching triggers while the popup is open animates the content transition with `PopoverViewport`:
+
+```tsx
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { PopoverPopup, PopoverTitle, PopoverDescription, PopoverArrow, PopoverViewport } from "@brijbyte/agentic-ui/popover";
+
+interface Item {
+  id: string;
+  name: string;
+  detail: string;
+}
+
+// Create once outside the component — typed with the payload shape
+const handle = BasePopover.createHandle<Item>();
+
+function MyList({ items }: { items: Item[] }) {
+  return (
+    <>
+      {/* Single Root — content driven by whichever trigger is active */}
+      <BasePopover.Root handle={handle}>
+        {({ payload }) =>
+          payload ? (
+            <BasePopover.Portal>
+              <BasePopover.Positioner side="right" sideOffset={8}>
+                <PopoverPopup>
+                  <PopoverArrow />
+                  {/* Viewport animates between triggers */}
+                  <PopoverViewport>
+                    <PopoverTitle>{payload.name}</PopoverTitle>
+                    <PopoverDescription>{payload.detail}</PopoverDescription>
+                  </PopoverViewport>
+                </PopoverPopup>
+              </BasePopover.Positioner>
+            </BasePopover.Portal>
+          ) : null
+        }
+      </BasePopover.Root>
+
+      {/* Each trigger passes its item as the payload */}
+      {items.map((item) => (
+        <BasePopover.Trigger
+          key={item.id}
+          handle={handle}
+          payload={item}
+          render={
+            <Button variant="ghost" size="xs">
+              Info
+            </Button>
+          }
+        />
+      ))}
+    </>
+  );
+}
+```
+
+`PopoverViewport` detects the direction between the old and new trigger and slides content in/out accordingly — down when moving to a lower trigger, up when moving higher, left/right for horizontal layouts.
+
 ### Menu
 
 ```tsx
@@ -726,15 +823,15 @@ import { ContextMenu } from "@brijbyte/agentic-ui/context-menu";
 
 <ContextMenu
   items={[
-    { label: "Cut",   shortcut: "⌘X" },
-    { label: "Copy",  shortcut: "⌘C" },
+    { label: "Cut", shortcut: "⌘X" },
+    { label: "Copy", shortcut: "⌘C" },
     { label: "Paste", shortcut: "⌘V", disabled: true },
     { type: "separator" },
     { label: "Select All", shortcut: "⌘A" },
   ]}
 >
   <div>Right click me</div>
-</ContextMenu>
+</ContextMenu>;
 ```
 
 Activated by right-click or long press on the child element. Supports `items` with `label`, `shortcut`, `icon`, `onSelect`, and `disabled`. Use `type: "separator"` for dividers and `type: "group"` with nested `items` for logical sections.
@@ -755,7 +852,7 @@ import { ContextMenuPopup, ContextMenuItem, ContextMenuSubmenuTrigger } from "@b
       </ContextMenuPopup>
     </BaseContextMenu.Positioner>
   </BaseContextMenu.Portal>
-</BaseContextMenu.SubmenuRoot>
+</BaseContextMenu.SubmenuRoot>;
 ```
 
 ---
@@ -783,7 +880,7 @@ dist/
   button/index.js          ← Per-component ESM (no CSS imports)
   button/index.d.ts
   button/button.css        ← Per-component plain CSS
-  …                        ← All 19 components follow the same pattern
+  …                        ← All 20 components follow the same pattern
 ```
 
 ### Why no CSS in JS?

package/dist/accordion/accordion.d.ts

@@ -1,22 +1,36 @@
-import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 import styles from "./accordion.module.css";
 
 //#region src/accordion/accordion.d.ts
 interface AccordionItem {
+  /** Unique identifier for this panel. */
   value: string;
+  /** Content rendered inside the trigger button. */
   header: ReactNode;
+  /** Content revealed when the panel is expanded. */
   content: ReactNode;
+  /** When `true`, the item cannot be toggled. */
   disabled?: boolean;
 }
 interface AccordionProps {
+  /** Array of items to render as collapsible panels. */
   items: AccordionItem[];
+  /** Allow multiple panels open at once. @default true */
   multiple?: boolean;
+  /** Initially expanded panel values (uncontrolled). */
   defaultValue?: string[];
+  /** Currently expanded panel values (controlled). */
   value?: string[];
+  /** Called when the set of open panels changes. */
   onValueChange?: (value: string[]) => void;
   className?: string;
 }
+/**
+ * Collapsible content panels. Wraps `@base-ui/react` Accordion with pre-styled
+ * headers, triggers, and animated panels. Pass `multiple` to allow more than one
+ * panel open at a time.
+ */
 declare function Accordion({
   items,
   className,

package/dist/accordion/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","names":[],"sources":["../../src/accordion/accordion.tsx"],"mappings":";;;;;UAIiB,aAAA;EACf,KAAA;EACA,MAAA,EAAQ,SAAA;EACR,OAAA,EAAS,SAAA;EACT,QAAA;AAAA;AAAA,UAGe,cAAA;EACf,KAAA,EAAO,aAAA;EACP,QAAA;EACA,YAAA;EACA,KAAA;EACA,aAAA,IAAiB,KAAA;EACjB,SAAA;AAAA;AAAA,iBAWc,SAAA,CAAA;EAAY,KAAA;EAAO,SAAA;EAAW,QAAA;EAAA,GAAoB;AAAA,GAAS,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"accordion.d.ts","names":[],"sources":["../../src/accordion/accordion.tsx"],"mappings":";;;;;UAIiB,aAAA;;EAEf,KAAA;EAFe;EAIf,MAAA,EAAQ,SAAA;;EAER,OAAA,EAAS,SAAA;EAJT;EAMA,QAAA;AAAA;AAAA,UAGe,cAAA;EALN;EAOT,KAAA,EAAO,aAAA;EALC;EAOR,QAAA;EAJe;EAMf,YAAA;;EAEA,KAAA;EANA;EAQA,aAAA,IAAiB,KAAA;EACjB,SAAA;AAAA;;;;;;iBAgBc,SAAA,CAAA;EAAY,KAAA;EAAO,SAAA;EAAW,QAAA;EAAA,GAAoB;AAAA,GAAS,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/accordion/accordion.js

@@ -1,6 +1,6 @@
 import accordion_module_default from "./accordion.module.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Accordion } from "@base-ui/react/accordion";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/accordion/accordion.tsx
 function ChevronIcon() {
 	return /* @__PURE__ */ jsx("svg", {
@@ -17,6 +17,11 @@ function ChevronIcon() {
 		})
 	});
 }
+/**
+* Collapsible content panels. Wraps `@base-ui/react` Accordion with pre-styled
+* headers, triggers, and animated panels. Pass `multiple` to allow more than one
+* panel open at a time.
+*/
 function Accordion$1({ items, className, multiple = true, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion.Root, {
 		className: `${accordion_module_default.root} ${className ?? ""}`,

package/dist/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["Accordion","BaseAccordion","styles"],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport styles from \"./accordion.module.css\";\n\nexport interface AccordionItem {\n  value: string;\n  header: ReactNode;\n  content: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface AccordionProps {\n  items: AccordionItem[];\n  multiple?: boolean;\n  defaultValue?: string[];\n  value?: string[];\n  onValueChange?: (value: string[]) => void;\n  className?: string;\n}\n\nfunction ChevronIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2.5 4.5L6 8L9.5 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nexport function Accordion({ items, className, multiple = true, ...props }: AccordionProps) {\n  return (\n    <BaseAccordion.Root className={`${styles.root} ${className ?? \"\"}`} multiple={multiple} {...props}>\n      {items.map((item) => (\n        <BaseAccordion.Item key={item.value} value={item.value} className={styles.item} disabled={item.disabled ?? false}>\n          <BaseAccordion.Header className={styles.header}>\n            <BaseAccordion.Trigger className={styles.trigger}>\n              {item.header}\n              <span className={styles[\"trigger-icon\"]}>\n                <ChevronIcon />\n              </span>\n            </BaseAccordion.Trigger>\n          </BaseAccordion.Header>\n          <BaseAccordion.Panel className={styles.panel}>\n            <div className={styles[\"panel-content\"]}>{item.content}</div>\n          </BaseAccordion.Panel>\n        </BaseAccordion.Item>\n      ))}\n    </BaseAccordion.Root>\n  );\n}\nexport { styles as AccordionStyles };\n"],"mappings":";;;;AAoBA,SAAS,cAAc;AACrB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAClH,CAAA;;AAIV,SAAgBA,YAAU,EAAE,OAAO,WAAW,WAAW,MAAM,GAAG,SAAyB;AACzF,QACE,oBAACC,UAAc,MAAf;EAAoB,WAAW,GAAGC,yBAAO,KAAK,GAAG,aAAa;EAAgB;EAAU,GAAI;YACzF,MAAM,KAAK,SACV,qBAACD,UAAc,MAAf;GAAqC,OAAO,KAAK;GAAO,WAAWC,yBAAO;GAAM,UAAU,KAAK,YAAY;aAA3G,CACE,oBAACD,UAAc,QAAf;IAAsB,WAAWC,yBAAO;cACtC,qBAACD,UAAc,SAAf;KAAuB,WAAWC,yBAAO;eAAzC,CACG,KAAK,QACN,oBAAC,QAAD;MAAM,WAAWA,yBAAO;gBACtB,oBAAC,aAAD,EAAe,CAAA;MACV,CAAA,CACe;;IACH,CAAA,EACvB,oBAACD,UAAc,OAAf;IAAqB,WAAWC,yBAAO;cACrC,oBAAC,OAAD;KAAK,WAAWA,yBAAO;eAAmB,KAAK;KAAc,CAAA;IACzC,CAAA,CACH;KAZI,KAAK,MAYT,CACrB;EACiB,CAAA"}
+{"version":3,"file":"accordion.js","names":["Accordion","BaseAccordion","styles"],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport styles from \"./accordion.module.css\";\n\nexport interface AccordionItem {\n  /** Unique identifier for this panel. */\n  value: string;\n  /** Content rendered inside the trigger button. */\n  header: ReactNode;\n  /** Content revealed when the panel is expanded. */\n  content: ReactNode;\n  /** When `true`, the item cannot be toggled. */\n  disabled?: boolean;\n}\n\nexport interface AccordionProps {\n  /** Array of items to render as collapsible panels. */\n  items: AccordionItem[];\n  /** Allow multiple panels open at once. @default true */\n  multiple?: boolean;\n  /** Initially expanded panel values (uncontrolled). */\n  defaultValue?: string[];\n  /** Currently expanded panel values (controlled). */\n  value?: string[];\n  /** Called when the set of open panels changes. */\n  onValueChange?: (value: string[]) => void;\n  className?: string;\n}\n\nfunction ChevronIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2.5 4.5L6 8L9.5 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\n/**\n * Collapsible content panels. Wraps `@base-ui/react` Accordion with pre-styled\n * headers, triggers, and animated panels. Pass `multiple` to allow more than one\n * panel open at a time.\n */\nexport function Accordion({ items, className, multiple = true, ...props }: AccordionProps) {\n  return (\n    <BaseAccordion.Root className={`${styles.root} ${className ?? \"\"}`} multiple={multiple} {...props}>\n      {items.map((item) => (\n        <BaseAccordion.Item key={item.value} value={item.value} className={styles.item} disabled={item.disabled ?? false}>\n          <BaseAccordion.Header className={styles.header}>\n            <BaseAccordion.Trigger className={styles.trigger}>\n              {item.header}\n              <span className={styles[\"trigger-icon\"]}>\n                <ChevronIcon />\n              </span>\n            </BaseAccordion.Trigger>\n          </BaseAccordion.Header>\n          <BaseAccordion.Panel className={styles.panel}>\n            <div className={styles[\"panel-content\"]}>{item.content}</div>\n          </BaseAccordion.Panel>\n        </BaseAccordion.Item>\n      ))}\n    </BaseAccordion.Root>\n  );\n}\nexport { styles as AccordionStyles };\n"],"mappings":";;;;AA6BA,SAAS,cAAc;AACrB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAClH,CAAA;;;;;;;AASV,SAAgBA,YAAU,EAAE,OAAO,WAAW,WAAW,MAAM,GAAG,SAAyB;AACzF,QACE,oBAACC,UAAc,MAAf;EAAoB,WAAW,GAAGC,yBAAO,KAAK,GAAG,aAAa;EAAgB;EAAU,GAAI;YACzF,MAAM,KAAK,SACV,qBAACD,UAAc,MAAf;GAAqC,OAAO,KAAK;GAAO,WAAWC,yBAAO;GAAM,UAAU,KAAK,YAAY;aAA3G,CACE,oBAACD,UAAc,QAAf;IAAsB,WAAWC,yBAAO;cACtC,qBAACD,UAAc,SAAf;KAAuB,WAAWC,yBAAO;eAAzC,CACG,KAAK,QACN,oBAAC,QAAD;MAAM,WAAWA,yBAAO;gBACtB,oBAAC,aAAD,EAAe,CAAA;MACV,CAAA,CACe;;IACH,CAAA,EACvB,oBAACD,UAAc,OAAf;IAAqB,WAAWC,yBAAO;cACrC,oBAAC,OAAD;KAAK,WAAWA,yBAAO;eAAmB,KAAK;KAAc,CAAA;IACzC,CAAA,CACH;KAZI,KAAK,MAYT,CACrB;EACiB,CAAA"}

package/dist/accordion/parts.d.ts

@@ -1,6 +1,6 @@
+import { Accordion } from "@base-ui/react/accordion";
 import * as react from "react";
 import { ComponentPropsWithoutRef } from "react";
-import { Accordion } from "@base-ui/react/accordion";
 
 //#region src/accordion/parts.d.ts
 type BaseItemProps = ComponentPropsWithoutRef<typeof Accordion.Item>;

package/dist/accordion/parts.js

@@ -1,7 +1,7 @@
 import accordion_module_default from "./accordion.module.js";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
 import { Accordion } from "@base-ui/react/accordion";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 //#region src/accordion/parts.tsx
 /**
 * Styled primitives for Accordion.

package/dist/alert-dialog/alert-dialog.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactElement, ReactNode } from "react";
 import styles from "./alert-dialog.module.css";
 
 //#region src/alert-dialog/alert-dialog.d.ts
@@ -13,13 +13,19 @@ interface AlertAction {
   destructive?: boolean;
 }
 interface AlertDialogProps {
+  /** Controlled open state. */
   open?: boolean;
+  /** Whether the dialog is initially open (uncontrolled). */
   defaultOpen?: boolean;
+  /** Called when the dialog opens or closes. */
   onOpenChange?: (open: boolean, eventDetails: unknown) => void;
+  /** Element that opens the dialog when clicked. */
   trigger?: ReactElement;
   /** Optional icon shown above the title. */
   icon?: ReactNode;
+  /** Dialog heading text. */
   title: ReactNode;
+  /** Supplementary text below the title. */
   description?: ReactNode;
   /**
    * Action buttons rendered right-aligned.
@@ -29,6 +35,11 @@ interface AlertDialogProps {
   actions: AlertAction[];
   className?: string;
 }
+/**
+ * A modal that requires a user response before continuing. Blocks interaction
+ * with the rest of the page until dismissed. Two actions render side-by-side;
+ * three or more stack vertically.
+ */
 declare function AlertDialog({
   trigger,
   icon,

package/dist/alert-dialog/alert-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.d.ts","names":[],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"mappings":";;;;;UAKiB,WAAA;EACf,KAAA,EAAO,SAAA;;EAEP,QAAA;EAH0B;EAK1B,OAAA;EAJgB;EAMhB,WAAA;AAAA;AAAA,UAGe,gBAAA;EACf,IAAA;EACA,WAAA;EACA,YAAA,IAAgB,IAAA,WAAe,YAAA;EAC/B,OAAA,GAAU,YAAA;EAJK;EAMf,IAAA,GAAO,SAAA;EACP,KAAA,EAAO,SAAA;EACP,WAAA,GAAc,SAAA;EAFP;;;;;EAQP,OAAA,EAAS,WAAA;EACT,SAAA;AAAA;AAAA,iBAGc,WAAA,CAAA;EAAc,OAAA;EAAS,IAAA;EAAM,KAAA;EAAO,WAAA;EAAa,OAAA;EAAS,SAAA;EAAW,YAAA;EAAA,GAAiB;AAAA,GAAS,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"alert-dialog.d.ts","names":[],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"mappings":";;;;;UAKiB,WAAA;EACf,KAAA,EAAO,SAAA;;EAEP,QAAA;EAH0B;EAK1B,OAAA;EAJgB;EAMhB,WAAA;AAAA;AAAA,UAGe,gBAAA;EALf;EAOA,IAAA;EALW;EAOX,WAAA;EAJe;EAMf,YAAA,IAAgB,IAAA,WAAe,YAAA;;EAE/B,OAAA,GAAU,YAAA;EAEH;EAAP,IAAA,GAAO,SAAA;EAIO;EAFd,KAAA,EAAO,SAAA;EAQa;EANpB,WAAA,GAAc,SAAA;EAZd;;;;;EAkBA,OAAA,EAAS,WAAA;EACT,SAAA;AAAA;;;;;;iBAQc,WAAA,CAAA;EAAc,OAAA;EAAS,IAAA;EAAM,KAAA;EAAO,WAAA;EAAa,OAAA;EAAS,SAAA;EAAW,YAAA;EAAA,GAAiB;AAAA,GAAS,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/alert-dialog/alert-dialog.js

@@ -1,8 +1,13 @@
 import { Button } from "../button/button.js";
 import alert_dialog_module_default from "./alert-dialog.module.js";
-import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
 //#region src/alert-dialog/alert-dialog.tsx
+/**
+* A modal that requires a user response before continuing. Blocks interaction
+* with the rest of the page until dismissed. Two actions render side-by-side;
+* three or more stack vertically.
+*/
 function AlertDialog$1({ trigger, icon, title, description, actions, className, onOpenChange, ...props }) {
 	return /* @__PURE__ */ jsxs(AlertDialog.Root, {
 		onOpenChange,

package/dist/alert-dialog/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":["AlertDialog","BaseAlertDialog","styles"],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { Button } from \"../button/button\";\nimport styles from \"./alert-dialog.module.css\";\n\nexport interface AlertAction {\n  label: ReactNode;\n  /** Called when the action button is clicked. The dialog closes automatically. */\n  onAction?: () => void;\n  /** Renders as a filled accent button — use for the primary confirm action. */\n  primary?: boolean;\n  /** Renders as a soft destructive button. Sits on the left when combined with other actions. */\n  destructive?: boolean;\n}\n\nexport interface AlertDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  trigger?: ReactElement;\n  /** Optional icon shown above the title. */\n  icon?: ReactNode;\n  title: ReactNode;\n  description?: ReactNode;\n  /**\n   * Action buttons rendered right-aligned.\n   * Use `primary: true` for the confirm action (solid), leave unset for cancel (outline).\n   * Use `destructive: true` to apply destructive tone to the confirm action.\n   */\n  actions: AlertAction[];\n  className?: string;\n}\n\nexport function AlertDialog({ trigger, icon, title, description, actions, className, onOpenChange, ...props }: AlertDialogProps) {\n  return (\n    <BaseAlertDialog.Root onOpenChange={onOpenChange as never} {...props}>\n      {trigger && <BaseAlertDialog.Trigger render={trigger} />}\n      <BaseAlertDialog.Portal>\n        <BaseAlertDialog.Backdrop className={styles.backdrop} />\n        <BaseAlertDialog.Popup className={`${styles.popup} ${className ?? \"\"}`}>\n          <div className={styles.header}>\n            {icon && <div className={styles.icon}>{icon}</div>}\n            <BaseAlertDialog.Title className={styles.title}>{title}</BaseAlertDialog.Title>\n            {description && <BaseAlertDialog.Description className={styles.description}>{description}</BaseAlertDialog.Description>}\n          </div>\n          <div className={styles.actions}>\n            {actions.map((action, i) => (\n              <BaseAlertDialog.Close\n                key={i}\n                render={\n                  <Button\n                    variant={action.primary ? \"solid\" : \"outline\"}\n                    tone={action.destructive ? \"destructive\" : \"primary\"}\n                    size=\"sm\"\n                    onClick={action.onAction}\n                  />\n                }\n              >\n                {action.label}\n              </BaseAlertDialog.Close>\n            ))}\n          </div>\n        </BaseAlertDialog.Popup>\n      </BaseAlertDialog.Portal>\n    </BaseAlertDialog.Root>\n  );\n}\n\nexport { styles as AlertDialogStyles };\n"],"mappings":";;;;;AAiCA,SAAgBA,cAAY,EAAE,SAAS,MAAM,OAAO,aAAa,SAAS,WAAW,cAAc,GAAG,SAA2B;AAC/H,QACE,qBAACC,YAAgB,MAAjB;EAAoC;EAAuB,GAAI;YAA/D,CACG,WAAW,oBAACA,YAAgB,SAAjB,EAAyB,QAAQ,SAAW,CAAA,EACxD,qBAACA,YAAgB,QAAjB,EAAA,UAAA,CACE,oBAACA,YAAgB,UAAjB,EAA0B,WAAWC,4BAAO,UAAY,CAAA,EACxD,qBAACD,YAAgB,OAAjB;GAAuB,WAAW,GAAGC,4BAAO,MAAM,GAAG,aAAa;aAAlE,CACE,qBAAC,OAAD;IAAK,WAAWA,4BAAO;cAAvB;KACG,QAAQ,oBAAC,OAAD;MAAK,WAAWA,4BAAO;gBAAO;MAAW,CAAA;KAClD,oBAACD,YAAgB,OAAjB;MAAuB,WAAWC,4BAAO;gBAAQ;MAA8B,CAAA;KAC9E,eAAe,oBAACD,YAAgB,aAAjB;MAA6B,WAAWC,4BAAO;gBAAc;MAA0C,CAAA;KACnH;OACN,oBAAC,OAAD;IAAK,WAAWA,4BAAO;cACpB,QAAQ,KAAK,QAAQ,MACpB,oBAACD,YAAgB,OAAjB;KAEE,QACE,oBAAC,QAAD;MACE,SAAS,OAAO,UAAU,UAAU;MACpC,MAAM,OAAO,cAAc,gBAAgB;MAC3C,MAAK;MACL,SAAS,OAAO;MAChB,CAAA;eAGH,OAAO;KACc,EAXjB,EAWiB,CACxB;IACE,CAAA,CACgB;KACD,EAAA,CAAA,CACJ"}
+{"version":3,"file":"alert-dialog.js","names":["AlertDialog","BaseAlertDialog","styles"],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { Button } from \"../button/button\";\nimport styles from \"./alert-dialog.module.css\";\n\nexport interface AlertAction {\n  label: ReactNode;\n  /** Called when the action button is clicked. The dialog closes automatically. */\n  onAction?: () => void;\n  /** Renders as a filled accent button — use for the primary confirm action. */\n  primary?: boolean;\n  /** Renders as a soft destructive button. Sits on the left when combined with other actions. */\n  destructive?: boolean;\n}\n\nexport interface AlertDialogProps {\n  /** Controlled open state. */\n  open?: boolean;\n  /** Whether the dialog is initially open (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Called when the dialog opens or closes. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  /** Element that opens the dialog when clicked. */\n  trigger?: ReactElement;\n  /** Optional icon shown above the title. */\n  icon?: ReactNode;\n  /** Dialog heading text. */\n  title: ReactNode;\n  /** Supplementary text below the title. */\n  description?: ReactNode;\n  /**\n   * Action buttons rendered right-aligned.\n   * Use `primary: true` for the confirm action (solid), leave unset for cancel (outline).\n   * Use `destructive: true` to apply destructive tone to the confirm action.\n   */\n  actions: AlertAction[];\n  className?: string;\n}\n\n/**\n * A modal that requires a user response before continuing. Blocks interaction\n * with the rest of the page until dismissed. Two actions render side-by-side;\n * three or more stack vertically.\n */\nexport function AlertDialog({ trigger, icon, title, description, actions, className, onOpenChange, ...props }: AlertDialogProps) {\n  return (\n    <BaseAlertDialog.Root onOpenChange={onOpenChange as never} {...props}>\n      {trigger && <BaseAlertDialog.Trigger render={trigger} />}\n      <BaseAlertDialog.Portal>\n        <BaseAlertDialog.Backdrop className={styles.backdrop} />\n        <BaseAlertDialog.Popup className={`${styles.popup} ${className ?? \"\"}`}>\n          <div className={styles.header}>\n            {icon && <div className={styles.icon}>{icon}</div>}\n            <BaseAlertDialog.Title className={styles.title}>{title}</BaseAlertDialog.Title>\n            {description && <BaseAlertDialog.Description className={styles.description}>{description}</BaseAlertDialog.Description>}\n          </div>\n          <div className={styles.actions}>\n            {actions.map((action, i) => (\n              <BaseAlertDialog.Close\n                key={i}\n                render={\n                  <Button\n                    variant={action.primary ? \"solid\" : \"outline\"}\n                    tone={action.destructive ? \"destructive\" : \"primary\"}\n                    size=\"sm\"\n                    onClick={action.onAction}\n                  />\n                }\n              >\n                {action.label}\n              </BaseAlertDialog.Close>\n            ))}\n          </div>\n        </BaseAlertDialog.Popup>\n      </BaseAlertDialog.Portal>\n    </BaseAlertDialog.Root>\n  );\n}\n\nexport { styles as AlertDialogStyles };\n"],"mappings":";;;;;;;;;;AA4CA,SAAgBA,cAAY,EAAE,SAAS,MAAM,OAAO,aAAa,SAAS,WAAW,cAAc,GAAG,SAA2B;AAC/H,QACE,qBAACC,YAAgB,MAAjB;EAAoC;EAAuB,GAAI;YAA/D,CACG,WAAW,oBAACA,YAAgB,SAAjB,EAAyB,QAAQ,SAAW,CAAA,EACxD,qBAACA,YAAgB,QAAjB,EAAA,UAAA,CACE,oBAACA,YAAgB,UAAjB,EAA0B,WAAWC,4BAAO,UAAY,CAAA,EACxD,qBAACD,YAAgB,OAAjB;GAAuB,WAAW,GAAGC,4BAAO,MAAM,GAAG,aAAa;aAAlE,CACE,qBAAC,OAAD;IAAK,WAAWA,4BAAO;cAAvB;KACG,QAAQ,oBAAC,OAAD;MAAK,WAAWA,4BAAO;gBAAO;MAAW,CAAA;KAClD,oBAACD,YAAgB,OAAjB;MAAuB,WAAWC,4BAAO;gBAAQ;MAA8B,CAAA;KAC9E,eAAe,oBAACD,YAAgB,aAAjB;MAA6B,WAAWC,4BAAO;gBAAc;MAA0C,CAAA;KACnH;OACN,oBAAC,OAAD;IAAK,WAAWA,4BAAO;cACpB,QAAQ,KAAK,QAAQ,MACpB,oBAACD,YAAgB,OAAjB;KAEE,QACE,oBAAC,QAAD;MACE,SAAS,OAAO,UAAU,UAAU;MACpC,MAAM,OAAO,cAAc,gBAAgB;MAC3C,MAAK;MACL,SAAS,OAAO;MAChB,CAAA;eAGH,OAAO;KACc,EAXjB,EAWiB,CACxB;IACE,CAAA,CACgB;KACD,EAAA,CAAA,CACJ"}

package/dist/alert-dialog/parts.d.ts

@@ -1,6 +1,6 @@
-import { AlertDialog } from "@base-ui/react/alert-dialog";
 import * as react from "react";
 import { ComponentPropsWithoutRef } from "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
 
 //#region src/alert-dialog/parts.d.ts
 type BaseBackdropProps = ComponentPropsWithoutRef<typeof AlertDialog.Backdrop>;

package/dist/alert-dialog/parts.js

@@ -1,7 +1,7 @@
 import alert_dialog_module_default from "./alert-dialog.module.js";
-import { AlertDialog } from "@base-ui/react/alert-dialog";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
 //#region src/alert-dialog/parts.tsx
 /**
 * Styled primitives for AlertDialog.

package/dist/badge/badge.d.ts

@@ -1,13 +1,19 @@
-import { ComponentPropsWithoutRef } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef } from "react";
 import styles from "./badge.module.css";
 
 //#region src/badge/badge.d.ts
 type BadgeVariant = "default" | "solid" | "soft" | "success" | "warning" | "error" | "info";
 interface BadgeProps extends ComponentPropsWithoutRef<"span"> {
+  /** Visual style and semantic colour. @default "default" */
   variant?: BadgeVariant;
+  /** Show a small coloured dot indicator before the label. */
   dot?: boolean;
 }
+/**
+ * Compact label for status, counts, and categories. A plain styled `<span>` —
+ * no base-ui dependency.
+ */
 declare function Badge({
   variant,
   dot,

package/dist/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","names":[],"sources":["../../src/badge/badge.tsx"],"mappings":";;;;;KAGY,YAAA;AAAA,UAEK,UAAA,SAAmB,wBAAA;EAClC,OAAA,GAAU,YAAA;EACV,GAAA;AAAA;AAAA,iBAGc,KAAA,CAAA;EAAQ,OAAA;EAAqB,GAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,UAAA,GAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"badge.d.ts","names":[],"sources":["../../src/badge/badge.tsx"],"mappings":";;;;;KAGY,YAAA;AAAA,UAEK,UAAA,SAAmB,wBAAA;;EAElC,OAAA,GAAU,YAAA;EAJY;EAMtB,GAAA;AAAA;;AAJF;;;iBAWgB,KAAA,CAAA;EAAQ,OAAA;EAAqB,GAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,UAAA,GAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/badge/badge.js

@@ -1,6 +1,10 @@
 import badge_module_default from "./badge.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/badge/badge.tsx
+/**
+* Compact label for status, counts, and categories. A plain styled `<span>` —
+* no base-ui dependency.
+*/
 function Badge({ variant = "default", dot = false, className, children, ...props }) {
 	return /* @__PURE__ */ jsxs("span", {
 		className: [

package/dist/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":["styles"],"sources":["../../src/badge/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport styles from \"./badge.module.css\";\n\nexport type BadgeVariant = \"default\" | \"solid\" | \"soft\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\nexport interface BadgeProps extends ComponentPropsWithoutRef<\"span\"> {\n  variant?: BadgeVariant;\n  dot?: boolean;\n}\n\nexport function Badge({ variant = \"default\", dot = false, className, children, ...props }: BadgeProps) {\n  return (\n    <span className={[styles.root, styles[`variant-${variant}`], className ?? \"\"].filter(Boolean).join(\" \")} {...props}>\n      {dot && <span className={styles.dot} aria-hidden=\"true\" />}\n      {children}\n    </span>\n  );\n}\nexport { styles as BadgeStyles };\n"],"mappings":";;;AAUA,SAAgB,MAAM,EAAE,UAAU,WAAW,MAAM,OAAO,WAAW,UAAU,GAAG,SAAqB;AACrG,QACE,qBAAC,QAAD;EAAM,WAAW;GAACA,qBAAO;GAAMA,qBAAO,WAAW;GAAY,aAAa;GAAG,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAE,GAAI;YAA7G,CACG,OAAO,oBAAC,QAAD;GAAM,WAAWA,qBAAO;GAAK,eAAY;GAAS,CAAA,EACzD,SACI"}
+{"version":3,"file":"badge.js","names":["styles"],"sources":["../../src/badge/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport styles from \"./badge.module.css\";\n\nexport type BadgeVariant = \"default\" | \"solid\" | \"soft\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\nexport interface BadgeProps extends ComponentPropsWithoutRef<\"span\"> {\n  /** Visual style and semantic colour. @default \"default\" */\n  variant?: BadgeVariant;\n  /** Show a small coloured dot indicator before the label. */\n  dot?: boolean;\n}\n\n/**\n * Compact label for status, counts, and categories. A plain styled `<span>` —\n * no base-ui dependency.\n */\nexport function Badge({ variant = \"default\", dot = false, className, children, ...props }: BadgeProps) {\n  return (\n    <span className={[styles.root, styles[`variant-${variant}`], className ?? \"\"].filter(Boolean).join(\" \")} {...props}>\n      {dot && <span className={styles.dot} aria-hidden=\"true\" />}\n      {children}\n    </span>\n  );\n}\nexport { styles as BadgeStyles };\n"],"mappings":";;;;;;;AAgBA,SAAgB,MAAM,EAAE,UAAU,WAAW,MAAM,OAAO,WAAW,UAAU,GAAG,SAAqB;AACrG,QACE,qBAAC,QAAD;EAAM,WAAW;GAACA,qBAAO;GAAMA,qBAAO,WAAW;GAAY,aAAa;GAAG,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAE,GAAI;YAA7G,CACG,OAAO,oBAAC,QAAD;GAAM,WAAWA,qBAAO;GAAK,eAAY;GAAS,CAAA,EACzD,SACI"}

package/dist/button/button.css

@@ -86,9 +86,10 @@
   }
 
   .tone-primary_4j5AgW {
-    --btn-color: var(--color-accent);
+    --btn-color: var(--color-accent-solid);
     --btn-color-hover: var(--color-accent-hover);
     --btn-color-pressed: var(--color-accent-pressed);
+    --btn-text-color: var(--color-accent-text);
     --btn-tint: var(--color-accent-tint);
     --btn-tint-hover: var(--color-accent-tint-hover);
     --btn-on-color: var(--color-on-accent);
@@ -98,6 +99,7 @@
     --btn-color: var(--color-secondary);
     --btn-color-hover: var(--color-primary);
     --btn-color-pressed: var(--color-primary);
+    --btn-text-color: var(--color-secondary);
     --btn-tint: var(--color-hover);
     --btn-tint-hover: var(--color-active);
     --btn-on-color: var(--color-canvas);
@@ -107,27 +109,30 @@
     --btn-color: var(--color-error-solid);
     --btn-color-hover: var(--color-error-solid);
     --btn-color-pressed: var(--color-error-solid);
+    --btn-text-color: var(--color-error-text);
     --btn-tint: var(--color-error-bg);
     --btn-tint-hover: var(--color-error-bg);
-    --btn-on-color: #fff;
+    --btn-on-color: var(--color-error-on-solid);
   }
 
   .tone-success_4j5AgW {
     --btn-color: var(--color-success-solid);
     --btn-color-hover: var(--color-success-solid);
     --btn-color-pressed: var(--color-success-solid);
+    --btn-text-color: var(--color-success-text);
     --btn-tint: var(--color-success-bg);
     --btn-tint-hover: var(--color-success-bg);
-    --btn-on-color: #fff;
+    --btn-on-color: var(--color-success-on-solid);
   }
 
   .tone-warning_4j5AgW {
     --btn-color: var(--color-warning-solid);
     --btn-color-hover: var(--color-warning-solid);
     --btn-color-pressed: var(--color-warning-solid);
+    --btn-text-color: var(--color-warning-text);
     --btn-tint: var(--color-warning-bg);
     --btn-tint-hover: var(--color-warning-bg);
-    --btn-on-color: #fff;
+    --btn-on-color: var(--color-warning-on-solid);
   }
 
   .variant-solid_4j5AgW {
@@ -162,7 +167,7 @@
 
   .variant-soft_4j5AgW {
     background-color: var(--btn-tint);
-    color: var(--btn-color);
+    color: var(--btn-text-color);
     border-color: #0000;
   }
 
@@ -181,10 +186,15 @@
     background-color: #0000;
   }
 
+  .variant-outline_4j5AgW:not(.tone-secondary_4j5AgW) {
+    border-color: var(--btn-text-color);
+    color: var(--btn-text-color);
+  }
+
   .variant-outline_4j5AgW:hover:not([data-disabled]) {
     background-color: var(--color-hover);
-    border-color: var(--btn-color);
-    color: var(--btn-color);
+    border-color: var(--btn-text-color);
+    color: var(--btn-text-color);
   }
 
   .variant-outline_4j5AgW:active:not([data-disabled]), .variant-outline_4j5AgW[data-pressed]:not([data-disabled]) {
@@ -197,9 +207,13 @@
     border-color: #0000;
   }
 
+  .variant-ghost_4j5AgW:not(.tone-secondary_4j5AgW) {
+    color: var(--btn-text-color);
+  }
+
   .variant-ghost_4j5AgW:hover:not([data-disabled]) {
     background-color: var(--color-hover);
-    color: var(--btn-color);
+    color: var(--btn-text-color);
   }
 
   .variant-ghost_4j5AgW:active:not([data-disabled]), .variant-ghost_4j5AgW[data-pressed]:not([data-disabled]) {

package/dist/button/button.d.ts

@@ -7,21 +7,32 @@ type ButtonVariant = "solid" | "soft" | "outline" | "ghost";
 type ButtonTone = "primary" | "secondary" | "destructive" | "success" | "warning";
 type ButtonSize = "xs" | "sm" | "md" | "lg";
 interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+  /** Visual shape — filled, tinted, outlined, or borderless. @default "solid" */
   variant?: ButtonVariant;
-  /** Semantic color. Defaults to "primary". */
-  tone?: ButtonTone;
-  size?: ButtonSize;
-  loading?: boolean;
+  /** Semantic colour. @default "primary" */
+  tone?: ButtonTone | undefined;
+  /** Controls padding and font size. @default "md" */
+  size?: ButtonSize | undefined;
+  /** Shows a spinner overlay and disables interaction. */
+  loading?: boolean | undefined;
   /**
    * Text shown in place of children while loading.
    * When provided the button width adapts to this text (variable width).
    * When omitted, children stay rendered invisibly — width stays stable.
    */
-  loadingText?: string;
-  iconOnly?: boolean;
-  render?: ReactElement;
-  nativeButton?: boolean;
+  loadingText?: string | undefined;
+  /** Renders as a square button with equal padding on all sides. */
+  iconOnly?: boolean | undefined;
+  /** Custom render element forwarded to base-ui Button. */
+  render?: ReactElement | undefined;
+  /** Use a native `<button>` element. @default true */
+  nativeButton?: boolean | undefined;
 }
+/**
+ * Pressable button with multiple variants, tones, and sizes. Composes
+ * `@base-ui/react` Button with focus management and disabled-while-loading.
+ * Supports a spinner overlay that preserves button width.
+ */
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { Button, ButtonProps, ButtonSize, ButtonTone, ButtonVariant, styles };