@brijbyte/agentic-ui 0.0.1 → 0.0.3

package/dist/slider/slider.module.js

@@ -0,0 +1,15 @@
+//#region src/slider/slider.module.css
+var slider_module_default = {
+	"control": "control_Lvfi-a",
+	"header": "header_Lvfi-a",
+	"indicator": "indicator_Lvfi-a",
+	"label": "label_Lvfi-a",
+	"root": "root_Lvfi-a",
+	"thumb": "thumb_Lvfi-a",
+	"track": "track_Lvfi-a",
+	"value": "value_Lvfi-a"
+};
+//#endregion
+export { slider_module_default as default };
+
+//# sourceMappingURL=slider.module.js.map

package/dist/slider/slider.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.module.js","names":[],"sources":["../../src/slider/slider.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-2);\n    width: 100%;\n  }\n\n  /* ─── Label + Value row ──────────────────────────────────────── */\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-2);\n  }\n\n  .label {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    font-weight: var(--font-weight-medium);\n    color: var(--color-secondary);\n    letter-spacing: var(--letter-spacing-wide);\n    text-transform: uppercase;\n    user-select: none;\n  }\n\n  .value {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-tertiary);\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* ─── Control (hit area) ─────────────────────────────────────── */\n\n  .control {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    padding-block: var(--space-2);\n    touch-action: none;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .control[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n\n  /* ─── Track ──────────────────────────────────────────────────── */\n\n  .track {\n    position: relative;\n    width: 100%;\n    height: 4px;\n    border-radius: var(--radius-full);\n    background-color: var(--color-surface-3);\n    border: var(--border-width-base) solid var(--color-line-subtle);\n    user-select: none;\n  }\n\n  /* ─── Indicator (filled portion) ────────────────────────────── */\n\n  .indicator {\n    border-radius: var(--radius-full);\n    background-color: var(--color-accent);\n    user-select: none;\n    transition: background-color var(--duration-fast) var(--easing-standard);\n  }\n\n  .root[data-disabled] .indicator {\n    background-color: var(--color-tertiary);\n  }\n\n  /* ─── Thumb ──────────────────────────────────────────────────── */\n\n  .thumb {\n    width: 16px;\n    height: 16px;\n    border-radius: var(--radius-full);\n    background-color: var(--color-elevated);\n    border: var(--border-width-base) solid var(--color-line);\n    box-shadow: var(--shadow-sm);\n    user-select: none;\n    transition:\n      transform var(--duration-fast) var(--easing-spring),\n      box-shadow var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard);\n  }\n\n  /* Grow on drag — gives tactile feedback */\n  .thumb[data-dragging] {\n    transform: scale(1.2);\n    border-color: var(--color-accent);\n    box-shadow: var(--shadow-md);\n  }\n\n  /* Focus ring via the nested <input> */\n  .thumb:has(:focus-visible) {\n    border-color: var(--color-accent);\n    box-shadow: var(--shadow-focus);\n  }\n\n  .thumb[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--color-surface-3);\n  }\n}\n"],"mappings":""}

package/dist/styles/reset.css

@@ -19,8 +19,8 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-md);
     line-height: var(--line-height-normal);
-    color: var(--color-text-primary);
-    background-color: var(--color-bg-base);
+    color: var(--color-primary);
+    background-color: var(--color-canvas);
   }
 
   img, picture, video, canvas, svg {
@@ -45,12 +45,12 @@
     font-weight: var(--font-weight-semibold);
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
   }
 
   * {
     scrollbar-width: thin;
-    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
+    scrollbar-color: var(--color-thumb) var(--color-track);
   }
 
   ::-webkit-scrollbar {
@@ -59,11 +59,11 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background: var(--color-scrollbar-thumb);
+    background: var(--color-thumb);
     border-radius: var(--radius-full);
   }
 
   ::-webkit-scrollbar-track {
-    background: var(--color-scrollbar-track);
+    background: var(--color-track);
   }
 }

package/dist/styles/tokens.css

@@ -1,4 +1,4 @@
-@layer base {
+@layer theme {
   :root {
     --font-display: "New York", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", Georgia, serif;
     --font-mono: "Berkeley Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", "Menlo", ui-monospace, "Courier New", monospace;
@@ -76,31 +76,33 @@
 
   :root, [data-theme="light"] {
     color-scheme: light;
-    --color-bg-base: #f5f5f5;
-    --color-bg-elevated: #fff;
-    --color-bg-sunken: #ebebeb;
-    --color-bg-overlay: #ffffffeb;
-    --color-bg-sidebar: #f6f6f6f2;
-    --color-surface-1: #fff;
-    --color-surface-2: #f9f9f9;
-    --color-surface-3: #f4f4f4;
-    --color-surface-hover: #0000000a;
-    --color-surface-active: #00000012;
-    --color-surface-selected: #0078d41a;
-    --color-text-primary: #000000e0;
-    --color-text-secondary: #0000008c;
-    --color-text-tertiary: #0000005c;
-    --color-text-disabled: #0000003d;
-    --color-text-inverse: #fffffff2;
-    --color-text-on-accent: #fff;
-    --color-text-code: #0f766e;
-    --color-border-base: #0000001f;
-    --color-border-strong: #00000038;
-    --color-border-subtle: #0000000f;
-    --color-border-focus: var(--color-focus-ring);
+    --color-canvas: #f0eff0;
+    --color-elevated: #fafafa;
+    --color-sunken: #e8e7e8;
+    --color-overlay: #fafafaeb;
+    --color-sidebar: #f4f3f4f5;
+    --color-surface-1: #fafafa;
+    --color-surface-2: #f4f3f4;
+    --color-surface-3: #eeeded;
+    --color-hover: #0000000a;
+    --color-active: #00000012;
+    --color-selected: #0078d41a;
+    --color-primary: #000000e0;
+    --color-secondary: #0009;
+    --color-tertiary: #0000005c;
+    --color-disabled: #0000003d;
+    --color-inverse: #fffffff2;
+    --color-on-accent: #fff;
+    --color-code: #0f766e;
+    --color-line: #0000001f;
+    --color-line-strong: #00000038;
+    --color-line-subtle: #0000000f;
+    --color-line-focus: var(--color-focus-ring);
     --color-accent: #0078d4;
     --color-accent-hover: #006bbf;
     --color-accent-pressed: #005ea8;
+    --color-accent-solid: #0078d4;
+    --color-accent-text: #005ea8;
     --color-accent-tint: #0078d41a;
     --color-accent-tint-hover: #0078d429;
     --color-focus-ring: #0078d4cc;
@@ -112,61 +114,66 @@
     --shadow-popover: 0 8px 24px -4px #00000029, 0 2px 6px -2px #0000001a;
     --shadow-sheet: 0 -4px 16px 0 #0000001f;
     --shadow-inset: inset 0 1px 2px 0 #00000014;
-    --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+    --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
     --color-success-bg: #f0fdf4;
     --color-success-border: #bbf7d0;
-    --color-success-text: #15803d;
-    --color-success-solid: #16a34a;
+    --color-success-text: #147a39;
+    --color-success-solid: #15803d;
+    --color-success-on-solid: #fff;
     --color-warning-bg: #fffbeb;
     --color-warning-border: #fde68a;
     --color-warning-text: #92400e;
-    --color-warning-solid: #d97706;
+    --color-warning-solid: #b45309;
+    --color-warning-on-solid: #fff;
     --color-error-bg: #fef2f2;
     --color-error-border: #fecaca;
     --color-error-text: #991b1b;
     --color-error-solid: #dc2626;
+    --color-error-on-solid: #fff;
     --color-info-bg: #eff6ff;
     --color-info-border: #bfdbfe;
     --color-info-text: #1d4ed8;
     --color-info-solid: #2563eb;
-    --color-code-bg: #f6f8fa;
+    --color-code-canvas: #f6f8fa;
     --color-code-border: #d0d7de;
     --color-code-comment: #6e7781;
     --color-code-keyword: #cf222e;
     --color-code-string: #0a3069;
     --color-code-number: #0550ae;
     --color-code-function: #8250df;
-    --color-scrollbar-thumb: #0003;
-    --color-scrollbar-track: transparent;
+    --color-thumb: #0003;
+    --color-track: transparent;
   }
 
   @media (prefers-color-scheme: dark) {
     :root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-theme="dark"] {
       color-scheme: dark;
-      --color-bg-base: #1c1c1e;
-      --color-bg-elevated: #2c2c2e;
-      --color-bg-sunken: #141416;
-      --color-bg-overlay: #1e1e20eb;
-      --color-bg-sidebar: #1c1c1ef2;
+      --color-canvas: #1c1c1e;
+      --color-elevated: #2c2c2e;
+      --color-sunken: #141416;
+      --color-overlay: #1e1e20eb;
+      --color-sidebar: #1c1c1ef2;
       --color-surface-1: #2c2c2e;
       --color-surface-2: #3a3a3c;
       --color-surface-3: #48484a;
-      --color-surface-hover: #ffffff0f;
-      --color-surface-active: #ffffff1a;
-      --color-surface-selected: #0a84ff29;
-      --color-text-primary: #ffffffeb;
-      --color-text-secondary: #ffffff8c;
-      --color-text-tertiary: #ffffff5c;
-      --color-text-disabled: #ffffff3d;
-      --color-text-inverse: #000000e0;
-      --color-text-on-accent: #fff;
-      --color-text-code: #2dd4bf;
-      --color-border-base: #ffffff1f;
-      --color-border-strong: #ffffff38;
-      --color-border-subtle: #ffffff0f;
+      --color-hover: #ffffff0f;
+      --color-active: #ffffff1a;
+      --color-selected: #0a84ff29;
+      --color-primary: #ffffffeb;
+      --color-secondary: #ffffff8c;
+      --color-tertiary: #ffffff5c;
+      --color-disabled: #ffffff3d;
+      --color-inverse: #000000e0;
+      --color-on-accent: #fff;
+      --color-code: #2dd4bf;
+      --color-line: #ffffff1f;
+      --color-line-strong: #ffffff38;
+      --color-line-subtle: #ffffff0f;
       --color-accent: #0a84ff;
       --color-accent-hover: #0071e3;
       --color-accent-pressed: #005bb5;
+      --color-accent-solid: #0071e3;
+      --color-accent-text: #60a5fa;
       --color-accent-tint: #0a84ff1f;
       --color-accent-tint-hover: #0a84ff33;
       --color-focus-ring: #0a84ffe6;
@@ -178,61 +185,66 @@
       --shadow-popover: 0 8px 24px -4px #00000080, 0 2px 6px -2px #0006;
       --shadow-sheet: 0 -4px 16px 0 #0006;
       --shadow-inset: inset 0 1px 2px 0 #0000004d;
-      --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+      --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
       --color-success-bg: #16a34a1f;
       --color-success-border: #16a34a4d;
       --color-success-text: #4ade80;
       --color-success-solid: #22c55e;
+      --color-success-on-solid: #000;
       --color-warning-bg: #d977061f;
       --color-warning-border: #d977064d;
       --color-warning-text: #fbbf24;
       --color-warning-solid: #f59e0b;
+      --color-warning-on-solid: #000;
       --color-error-bg: #dc26261f;
       --color-error-border: #dc26264d;
       --color-error-text: #f87171;
-      --color-error-solid: #ef4444;
+      --color-error-solid: #dc2626;
+      --color-error-on-solid: #fff;
       --color-info-bg: #2563eb1f;
       --color-info-border: #2563eb4d;
       --color-info-text: #60a5fa;
       --color-info-solid: #3b82f6;
-      --color-code-bg: #161b22;
+      --color-code-canvas: #161b22;
       --color-code-border: #ffffff1a;
       --color-code-comment: #8b949e;
       --color-code-keyword: #ff7b72;
       --color-code-string: #a5d6ff;
       --color-code-number: #79c0ff;
       --color-code-function: #d2a8ff;
-      --color-scrollbar-thumb: #fff3;
-      --color-scrollbar-track: transparent;
+      --color-thumb: #fff3;
+      --color-track: transparent;
     }
   }
 
   [data-theme="dark"] {
     color-scheme: dark;
-    --color-bg-base: #1c1c1e;
-    --color-bg-elevated: #2c2c2e;
-    --color-bg-sunken: #141416;
-    --color-bg-overlay: #1e1e20eb;
-    --color-bg-sidebar: #1c1c1ef2;
+    --color-canvas: #1c1c1e;
+    --color-elevated: #2c2c2e;
+    --color-sunken: #141416;
+    --color-overlay: #1e1e20eb;
+    --color-sidebar: #1c1c1ef2;
     --color-surface-1: #2c2c2e;
     --color-surface-2: #3a3a3c;
     --color-surface-3: #48484a;
-    --color-surface-hover: #ffffff0f;
-    --color-surface-active: #ffffff1a;
-    --color-surface-selected: #0a84ff29;
-    --color-text-primary: #ffffffeb;
-    --color-text-secondary: #ffffff8c;
-    --color-text-tertiary: #ffffff5c;
-    --color-text-disabled: #ffffff3d;
-    --color-text-inverse: #000000e0;
-    --color-text-on-accent: #fff;
-    --color-text-code: #2dd4bf;
-    --color-border-base: #ffffff1f;
-    --color-border-strong: #ffffff38;
-    --color-border-subtle: #ffffff0f;
+    --color-hover: #ffffff0f;
+    --color-active: #ffffff1a;
+    --color-selected: #0a84ff29;
+    --color-primary: #ffffffeb;
+    --color-secondary: #ffffff8c;
+    --color-tertiary: #ffffff5c;
+    --color-disabled: #ffffff3d;
+    --color-inverse: #000000e0;
+    --color-on-accent: #fff;
+    --color-code: #2dd4bf;
+    --color-line: #ffffff1f;
+    --color-line-strong: #ffffff38;
+    --color-line-subtle: #ffffff0f;
     --color-accent: #0a84ff;
     --color-accent-hover: #0071e3;
     --color-accent-pressed: #005bb5;
+    --color-accent-solid: #0071e3;
+    --color-accent-text: #60a5fa;
     --color-accent-tint: #0a84ff1f;
     --color-accent-tint-hover: #0a84ff33;
     --color-focus-ring: #0a84ffe6;
@@ -244,31 +256,34 @@
     --shadow-popover: 0 8px 24px -4px #00000080, 0 2px 6px -2px #0006;
     --shadow-sheet: 0 -4px 16px 0 #0006;
     --shadow-inset: inset 0 1px 2px 0 #0000004d;
-    --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+    --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
     --color-success-bg: #16a34a1f;
     --color-success-border: #16a34a4d;
     --color-success-text: #4ade80;
     --color-success-solid: #22c55e;
+    --color-success-on-solid: #000;
     --color-warning-bg: #d977061f;
     --color-warning-border: #d977064d;
     --color-warning-text: #fbbf24;
     --color-warning-solid: #f59e0b;
+    --color-warning-on-solid: #000;
     --color-error-bg: #dc26261f;
     --color-error-border: #dc26264d;
     --color-error-text: #f87171;
-    --color-error-solid: #ef4444;
+    --color-error-solid: #dc2626;
+    --color-error-on-solid: #fff;
     --color-info-bg: #2563eb1f;
     --color-info-border: #2563eb4d;
     --color-info-text: #60a5fa;
     --color-info-solid: #3b82f6;
-    --color-code-bg: #161b22;
+    --color-code-canvas: #161b22;
     --color-code-border: #ffffff1a;
     --color-code-comment: #8b949e;
     --color-code-keyword: #ff7b72;
     --color-code-string: #a5d6ff;
     --color-code-number: #79c0ff;
     --color-code-function: #d2a8ff;
-    --color-scrollbar-thumb: #fff3;
-    --color-scrollbar-track: transparent;
+    --color-thumb: #fff3;
+    --color-track: transparent;
   }
 }

package/dist/switch/parts.js

@@ -1,6 +1,6 @@
 import switch_module_default from "./switch.module.js";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Switch } from "@base-ui/react/switch";
 //#region src/switch/parts.tsx
 /**

package/dist/switch/switch.css

@@ -1,5 +1,3 @@
-@layer theme, base;
-
 @layer components {
   .root_3hDtBa {
     align-items: center;
@@ -17,7 +15,7 @@
   .thumb-track_3hDtBa {
     border-radius: var(--radius-full);
     background-color: var(--color-surface-3);
-    border: var(--border-width-base) solid var(--color-border-base);
+    border: var(--border-width-base) solid var(--color-line);
     width: 36px;
     height: 20px;
     transition: background-color var(--duration-normal) var(--easing-standard),
@@ -61,8 +59,6 @@
   .label_3hDtBa {
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
   }
 }
-
-@layer utilities;

package/dist/switch/switch.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 import styles from "./switch.module.css";
 
 //#region src/switch/switch.d.ts

package/dist/switch/switch.js

@@ -1,6 +1,6 @@
 import switch_module_default from "./switch.module.js";
-import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { Switch } from "@base-ui/react/switch";
 //#region src/switch/switch.tsx
 function Switch$1({ children, id, className, onCheckedChange, ...props }) {

package/dist/switch/switch.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.module.js","names":[],"sources":["../../src/switch/switch.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  .root {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .root[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n\n  .thumb-track {\n    position: relative;\n    width: 36px;\n    height: 20px;\n    border-radius: var(--radius-full);\n    background-color: var(--color-surface-3);\n    border: var(--border-width-base) solid var(--color-border-base);\n    transition:\n      background-color var(--duration-normal) var(--easing-standard),\n      border-color var(--duration-normal) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard);\n    outline: none;\n    flex-shrink: 0;\n  }\n\n  .thumb-track:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n\n  .thumb-track[data-checked] {\n    background-color: var(--color-accent);\n    border-color: var(--color-accent);\n  }\n\n  .thumb-track[data-checked]:hover {\n    background-color: var(--color-accent-hover);\n    border-color: var(--color-accent-hover);\n  }\n\n  .thumb {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 14px;\n    height: 14px;\n    border-radius: var(--radius-full);\n    background-color: #ffffff;\n    box-shadow: var(--shadow-xs);\n    transition: transform var(--duration-normal) var(--easing-spring);\n  }\n\n  .thumb-track[data-checked] .thumb {\n    transform: translateX(16px);\n  }\n\n  .label {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-text-primary);\n  }\n}\n"],"mappings":";AAQA,IAAA,wBAAe;CAAC,SAAK;CAAA,QAAA;CAAA,SAAA;CAAA,eAAA;CAAA"}
+{"version":3,"file":"switch.module.js","names":[],"sources":["../../src/switch/switch.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    cursor: pointer;\n    user-select: none;\n  }\n  .root[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n  .thumb-track {\n    position: relative;\n    width: 36px;\n    height: 20px;\n    border-radius: var(--radius-full);\n    background-color: var(--color-surface-3);\n    border: var(--border-width-base) solid var(--color-line);\n    transition:\n      background-color var(--duration-normal) var(--easing-standard),\n      border-color var(--duration-normal) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard);\n    outline: none;\n    flex-shrink: 0;\n  }\n  .thumb-track:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n  .thumb-track[data-checked] {\n    background-color: var(--color-accent);\n    border-color: var(--color-accent);\n  }\n  .thumb-track[data-checked]:hover {\n    background-color: var(--color-accent-hover);\n    border-color: var(--color-accent-hover);\n  }\n  .thumb {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 14px;\n    height: 14px;\n    border-radius: var(--radius-full);\n    background-color: #ffffff;\n    box-shadow: var(--shadow-xs);\n    transition: transform var(--duration-normal) var(--easing-spring);\n  }\n  .thumb-track[data-checked] .thumb {\n    transform: translateX(16px);\n  }\n  .label {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-primary);\n  }\n}\n"],"mappings":";AAQA,IAAA,wBAAa;CAAA,SAAU;CAAA,QAAA;CAAA,SAAA;CAAA,eAAA;CAAA"}

package/dist/tabs/parts.js

@@ -1,6 +1,6 @@
 import tabs_module_default from "./tabs.module.js";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/tabs/parts.tsx
 /**

package/dist/tabs/tabs.css

@@ -1,5 +1,3 @@
-@layer theme, base;
-
 @layer components {
   .root_prqJ8a {
     flex-direction: column;
@@ -10,7 +8,7 @@
   .list_prqJ8a {
     align-items: center;
     gap: var(--space-px);
-    border-bottom: var(--border-width-base) solid var(--color-border-base);
+    border-bottom: var(--border-width-base) solid var(--color-line);
     scrollbar-width: none;
     display: flex;
     overflow-x: auto;
@@ -27,7 +25,7 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-regular);
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     cursor: pointer;
     white-space: nowrap;
     transition: color var(--duration-fast) var(--easing-standard),
@@ -43,8 +41,8 @@
   }
 
   .tab_prqJ8a:hover:not([data-disabled]) {
-    color: var(--color-text-primary);
-    border-bottom-color: var(--color-border-strong);
+    color: var(--color-primary);
+    border-bottom-color: var(--color-line-strong);
   }
 
   .tab_prqJ8a:focus-visible {
@@ -61,7 +59,7 @@
   }
 
   .tab_prqJ8a[data-active] {
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     font-weight: var(--font-weight-medium);
     border-bottom-color: var(--color-accent);
   }
@@ -86,5 +84,3 @@
     border-radius: var(--radius-sm);
   }
 }
-
-@layer utilities;

package/dist/tabs/tabs.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 import styles from "./tabs.module.css";
 
 //#region src/tabs/tabs.d.ts

package/dist/tabs/tabs.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.module.js","names":[],"sources":["../../src/tabs/tabs.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n\n  /* ─── Tab List ──────────────────────────────────────── */\n  .list {\n    display: flex;\n    align-items: center;\n    gap: var(--space-px);\n    border-bottom: var(--border-width-base) solid var(--color-border-base);\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .list::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* ─── Tab trigger ────────────────────────────────────── */\n  .tab {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--space-1-5);\n    padding: var(--space-1-5) var(--space-3);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-regular);\n    color: var(--color-text-tertiary);\n    border: none;\n    background: none;\n    cursor: pointer;\n    outline: none;\n    white-space: nowrap;\n    position: relative;\n    margin-bottom: -1px;\n    border-bottom: 3px solid transparent;\n    transition:\n      color var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard);\n    user-select: none;\n  }\n\n  .tab:hover:not([data-disabled]) {\n    color: var(--color-text-primary);\n    border-bottom-color: var(--color-border-strong);\n  }\n\n  .tab:focus-visible {\n    outline: none;\n  }\n\n  .tab:focus-visible::after {\n    content: \"\";\n    position: absolute;\n    inset: 2px 2px 8px;\n    border-radius: var(--radius-sm);\n    box-shadow: var(--shadow-focus);\n    pointer-events: none;\n  }\n\n  .tab[data-active] {\n    color: var(--color-text-primary);\n    font-weight: var(--font-weight-medium);\n    border-bottom-color: var(--color-accent);\n  }\n\n  .tab[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n\n  /* ─── Tab panel ─────────────────────────────────────── */\n  .panel {\n    padding-top: var(--space-4);\n    outline: none;\n    transition: opacity 150ms var(--easing-ease-out);\n  }\n\n  .panel[data-starting-style] {\n    opacity: 0;\n  }\n\n  .panel:focus-visible {\n    box-shadow: var(--shadow-focus);\n    border-radius: var(--radius-sm);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"tabs.module.js","names":[],"sources":["../../src/tabs/tabs.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n  /* ─── Tab List ──────────────────────────────────────── */\n  .list {\n    display: flex;\n    align-items: center;\n    gap: var(--space-px);\n    border-bottom: var(--border-width-base) solid var(--color-line);\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n  .list::-webkit-scrollbar {\n    display: none;\n  }\n  /* ─── Tab trigger ────────────────────────────────────── */\n  .tab {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--space-1-5);\n    padding: var(--space-1-5) var(--space-3);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-regular);\n    color: var(--color-tertiary);\n    border: none;\n    background: none;\n    cursor: pointer;\n    outline: none;\n    white-space: nowrap;\n    position: relative;\n    margin-bottom: -1px;\n    border-bottom: 3px solid transparent;\n    transition:\n      color var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard);\n    user-select: none;\n  }\n  .tab:hover:not([data-disabled]) {\n    color: var(--color-primary);\n    border-bottom-color: var(--color-line-strong);\n  }\n  .tab:focus-visible {\n    outline: none;\n  }\n  .tab:focus-visible::after {\n    content: \"\";\n    position: absolute;\n    inset: 2px 2px 8px;\n    border-radius: var(--radius-sm);\n    box-shadow: var(--shadow-focus);\n    pointer-events: none;\n  }\n  .tab[data-active] {\n    color: var(--color-primary);\n    font-weight: var(--font-weight-medium);\n    border-bottom-color: var(--color-accent);\n  }\n  .tab[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n  /* ─── Tab panel ─────────────────────────────────────── */\n  .panel {\n    padding-top: var(--space-4);\n    outline: none;\n    transition: opacity 150ms var(--easing-ease-out);\n  }\n  .panel[data-starting-style] {\n    opacity: 0;\n  }\n  .panel:focus-visible {\n    box-shadow: var(--shadow-focus);\n    border-radius: var(--radius-sm);\n  }\n}\n"],"mappings":";AAQA,IAAA,sBAAa;CAAA,QAAI;CAAA,SAAA;CAAA,QAAA;CAAA,OAAA;CAAA"}

package/dist/tailwind-theme.css

@@ -14,9 +14,9 @@
  * overrides work automatically without any Tailwind configuration.
  *
  * Generated utility examples:
- *   bg-bg-base        → background-color: var(--color-bg-base)
- *   text-text-primary → color: var(--color-text-primary)
- *   border-border-base→ border-color: var(--color-border-base)
+ *   bg-canvas         → background-color: var(--color-canvas)
+ *   text-primary      → color: var(--color-primary)
+ *   border-line       → border-color: var(--color-line)
  *   font-mono         → font-family: var(--font-mono)
  *   rounded-md        → border-radius: var(--radius-md)
  *   shadow-sm         → box-shadow: var(--shadow-sm)
@@ -24,34 +24,34 @@
 
 @theme inline {
   /* ── Backgrounds ────────────────────────────────────────────── */
-  --color-bg-base: var(--color-bg-base);
-  --color-bg-elevated: var(--color-bg-elevated);
-  --color-bg-sunken: var(--color-bg-sunken);
-  --color-bg-overlay: var(--color-bg-overlay);
-  --color-bg-sidebar: var(--color-bg-sidebar);
+  --color-canvas: var(--color-canvas);
+  --color-elevated: var(--color-elevated);
+  --color-sunken: var(--color-sunken);
+  --color-overlay: var(--color-overlay);
+  --color-sidebar: var(--color-sidebar);
 
   /* ── Surfaces ───────────────────────────────────────────────── */
   --color-surface-1: var(--color-surface-1);
   --color-surface-2: var(--color-surface-2);
   --color-surface-3: var(--color-surface-3);
-  --color-surface-hover: var(--color-surface-hover);
-  --color-surface-active: var(--color-surface-active);
-  --color-surface-selected: var(--color-surface-selected);
+  --color-hover: var(--color-hover);
+  --color-active: var(--color-active);
+  --color-selected: var(--color-selected);
 
   /* ── Text ───────────────────────────────────────────────────── */
-  --color-text-primary: var(--color-text-primary);
-  --color-text-secondary: var(--color-text-secondary);
-  --color-text-tertiary: var(--color-text-tertiary);
-  --color-text-disabled: var(--color-text-disabled);
-  --color-text-inverse: var(--color-text-inverse);
-  --color-text-on-accent: var(--color-text-on-accent);
-  --color-text-code: var(--color-text-code);
+  --color-primary: var(--color-primary);
+  --color-secondary: var(--color-secondary);
+  --color-tertiary: var(--color-tertiary);
+  --color-disabled: var(--color-disabled);
+  --color-inverse: var(--color-inverse);
+  --color-on-accent: var(--color-on-accent);
+  --color-code: var(--color-code);
 
   /* ── Borders ────────────────────────────────────────────────── */
-  --color-border-base: var(--color-border-base);
-  --color-border-strong: var(--color-border-strong);
-  --color-border-subtle: var(--color-border-subtle);
-  --color-border-focus: var(--color-border-focus);
+  --color-line: var(--color-line);
+  --color-line-strong: var(--color-line-strong);
+  --color-line-subtle: var(--color-line-subtle);
+  --color-line-focus: var(--color-line-focus);
 
   /* ── Accent (macOS blue) ────────────────────────────────────── */
   --color-accent: var(--color-accent);
@@ -85,7 +85,7 @@
   --color-info-solid: var(--color-info-solid);
 
   /* ── Code syntax ────────────────────────────────────────────── */
-  --color-code-bg: var(--color-code-bg);
+  --color-code-canvas: var(--color-code-canvas);
   --color-code-border: var(--color-code-border);
   --color-code-keyword: var(--color-code-keyword);
   --color-code-string: var(--color-code-string);

package/dist/toast/parts.js

@@ -1,6 +1,6 @@
 import toast_module_default from "./toast.module.js";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Toast } from "@base-ui/react/toast";
 //#region src/toast/parts.tsx
 /**

package/dist/toast/toast.css

@@ -1,5 +1,3 @@
-@layer theme, base;
-
 @layer components {
   .viewport_QXnIWW {
     bottom: var(--space-4);
@@ -27,8 +25,8 @@
     align-items: flex-start;
     gap: var(--space-3);
     padding: var(--space-3) var(--space-4);
-    background-color: var(--color-bg-overlay);
-    border: var(--border-width-base) solid var(--color-border-base);
+    background-color: var(--color-overlay);
+    border: var(--border-width-base) solid var(--color-line);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-popover);
     pointer-events: auto;
@@ -119,19 +117,19 @@
   }
 
   .toast-success_QXnIWW {
-    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-bg-overlay));
+    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-overlay));
   }
 
   .toast-error_QXnIWW {
-    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-bg-overlay));
+    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-overlay));
   }
 
   .toast-warning_QXnIWW {
-    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-bg-overlay));
+    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-overlay));
   }
 
   .toast-info_QXnIWW {
-    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-bg-overlay));
+    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-overlay));
   }
 
   .icon_QXnIWW {
@@ -169,14 +167,14 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     line-height: var(--line-height-normal);
   }
 
   .description_QXnIWW {
     font-family: var(--font-mono);
     font-size: var(--font-size-xs);
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
     line-height: var(--line-height-relaxed);
   }
 
@@ -184,7 +182,7 @@
     border-radius: var(--radius-sm);
     width: 20px;
     height: 20px;
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     cursor: pointer;
     transition: background-color var(--duration-fast) var(--easing-standard),
       color var(--duration-fast) var(--easing-standard);
@@ -199,13 +197,11 @@
   }
 
   .close_QXnIWW:hover {
-    background-color: var(--color-surface-hover);
-    color: var(--color-text-primary);
+    background-color: var(--color-hover);
+    color: var(--color-primary);
   }
 
   .close_QXnIWW:focus-visible {
     box-shadow: var(--shadow-focus);
   }
 }
-
-@layer utilities;