@attrus-ds/core 1.0.3 → 1.0.6

package/dist/css/components/buttons.css

@@ -132,7 +132,7 @@
    4. VARIANTS
    ---------------------------------------------------------------- */
 
-/* PRIMARY — brand solid */
+/* PRIMARY — brand-blue solid */
 .btn-primary {
   background: var(--color-brand-solid);
   color: var(--color-brand-on-solid);

package/dist/css/components/callout.css

@@ -38,7 +38,7 @@
      --callout-fg    theme-aware foreground → icon color
    ============================================================ */
 .callout {
-  --callout-tint: var(--color-brand-secondary-500);  /* info / royal */
+  --callout-tint: var(--color-brand-solid);  /* info / royal */
   --callout-fg:   var(--color-foreground-accent);     /* sky, theme-aware */
   display: flex;
   gap: var(--space-3);

package/dist/css/components/combobox.css

@@ -73,8 +73,8 @@
 .combobox-avatar {
   width: 24px; height: 24px;
   border-radius: var(--radius-pill);
-  background: var(--color-brand-secondary-100);
-  color: var(--color-brand-secondary-700);
+  background: var(--color-brand-subtle-solid);
+  color: var(--color-brand-text);
   display: inline-flex; align-items: center; justify-content: center;
   font-size: var(--fs-xxs);
   font-weight: var(--w-semibold);
@@ -198,7 +198,7 @@
   margin-top: 1px;
 }
 .combobox-option.is-selected .combobox-option-meta {
-  color: var(--color-brand-secondary-600);
+  color: var(--color-brand-text);
 }
 
 .combobox-option-check {
@@ -306,9 +306,9 @@
 .combobox-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--color-border-subtle); }
 .combobox-filter-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3); background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--w-medium); color: var(--color-foreground-secondary); cursor: pointer; transition: var(--transition-fast); }
 .combobox-filter-chip:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); color: var(--color-foreground-default); }
-.combobox-filter-chip.is-active { background: var(--color-background-selected); border-color: var(--color-brand-secondary-200); color: var(--color-foreground-brand); font-weight: var(--w-semibold); }
+.combobox-filter-chip.is-active { background: var(--color-background-selected); border-color: var(--color-brand-border); color: var(--color-foreground-brand); font-weight: var(--w-semibold); }
 .combobox-filter-chip .count { font-family: var(--font-mono); font-size: var(--fs-xxs); color: var(--color-foreground-muted); }
-.combobox-filter-chip.is-active .count { color: var(--color-brand-secondary-600); }
+.combobox-filter-chip.is-active .count { color: var(--color-brand-text); }
 .combobox-meta { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--fs-xxs); font-weight: var(--w-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); border-bottom: 1px solid var(--color-border-subtle); }
 .combobox-foot-meta { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); color: var(--color-foreground-muted); border-top: 1px solid var(--color-border-subtle); }
 

package/dist/css/components/inputs.css

@@ -469,7 +469,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   font-size: var(--fs-xl);
   font-weight: var(--w-semibold);
   border: 1px solid var(--color-border-default);
-  border-radius: var(--shape-container);
+  border-radius: var(--shape-control);
   outline: none;
   background: var(--color-background-surface);
   color: var(--color-foreground-default);
@@ -842,7 +842,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   white-space: nowrap;
 }
 .file-status.ok      { color: var(--color-feedback-success-foreground); background: var(--color-feedback-success-background); }
-.file-status.pending { color: var(--color-brand-text);   background: var(--color-brand-subtle); }
+.file-status.pending { color: var(--color-brand-text);   background: color-mix(in srgb, var(--color-brand-solid) 10%, transparent); }
 .file-status.err     { color: var(--color-feedback-danger-foreground);  background: var(--color-feedback-danger-background); cursor: pointer; }
 
 .file-remove {
@@ -952,7 +952,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 .dark .chips:focus-within,
 .dark .number-input:focus-within,
 .dark .date-trigger:focus-visible {
-  border-color: var(--color-brand-secondary-300);
+  border-color: var(--color-border-focus);
   box-shadow: var(--shadow-focus-sky);
 }
 .dark .field > label  { color: var(--color-foreground-inverse-default); }

package/dist/css/components/overlays.css

@@ -37,7 +37,7 @@
   display: flex;
   flex-direction: column;
   background: var(--color-background-surface);
-  border-radius: var(--radius-lg);
+  border-radius: var(--shape-overlay);
   box-shadow: var(--shadow-2xl);
   opacity: 0;
   pointer-events: none;
@@ -237,7 +237,7 @@
   justify-content: space-between;
   gap: var(--space-4);
   padding: var(--space-6);
-  background: var(--glass-white);
+  background: var(--glass-chrome);
   -webkit-backdrop-filter: var(--glass-blur);
   backdrop-filter: var(--glass-blur);
   border-bottom: 1px solid var(--color-border-subtle);
@@ -307,7 +307,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-md);
+  border-radius: var(--shape-container);
 }
 .drawer-lead i, .drawer-lead svg { width: 20px; height: 20px; stroke-width: var(--icon-stroke); }
 
@@ -328,7 +328,7 @@
   justify-content: flex-end;
   gap: var(--space-3);
   padding: var(--space-5) var(--space-6);
-  background: var(--glass-white);
+  background: var(--glass-chrome);
   -webkit-backdrop-filter: var(--glass-blur);
   backdrop-filter: var(--glass-blur);
   border-top: 1px solid var(--color-border-subtle);
@@ -343,7 +343,7 @@
   display: flex;
   justify-content: center;
   padding: var(--space-3) 0 var(--space-1);
-  background: var(--glass-white);
+  background: var(--glass-chrome);
   -webkit-backdrop-filter: var(--glass-blur);
   backdrop-filter: var(--glass-blur);
   flex-shrink: 0;

package/dist/css/components/primitives.css

@@ -32,7 +32,7 @@
 
 /* Tone — accent-on-tinted-bg uses the same background+foreground pair as feedback pills,
    so an Avatar reads as the same "object" as a status pill that references it. */
-.av-brand   { background: var(--color-brand-secondary-50);          color: var(--color-brand-secondary-700); }
+.av-brand   { background: var(--color-brand-subtle-solid);          color: var(--color-brand-text); }
 .av-success { background: var(--color-feedback-success-background); color: var(--color-feedback-success-foreground); }
 .av-warning { background: var(--color-feedback-warning-background); color: var(--color-feedback-warning-foreground); }
 .av-danger  { background: var(--color-feedback-danger-background);  color: var(--color-feedback-danger-foreground); }
@@ -141,7 +141,7 @@
   padding: var(--space-5);
   background: var(--color-background-surface);
   border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
+  border-radius: var(--shape-container);
 }
 .stat-label {
   font-family: var(--font-mono);
@@ -253,7 +253,7 @@
 .eyebrow-muted     { color: var(--color-foreground-muted); }
 .eyebrow-secondary { color: var(--color-foreground-secondary); }
 .eyebrow-default   { color: var(--color-foreground-default); }
-.eyebrow-brand     { color: var(--color-brand-secondary-700); }
+.eyebrow-brand     { color: var(--color-brand-text); }
 .eyebrow-inverse   { color: var(--color-foreground-inverse-muted); }
 
 /* =================== FILTER CHIP =================== */
@@ -280,7 +280,7 @@
 /* Selected (aria-pressed via FilterChip TSX) — same active treatment as combobox filter chips */
 .filter-chip[aria-pressed="true"] {
   background: var(--color-background-selected);
-  border-color: var(--color-brand-secondary-200);
+  border-color: var(--color-brand-border);
   color: var(--color-foreground-brand);
   font-weight: var(--w-semibold);
 }

package/dist/css/components/sidebar.css

@@ -58,6 +58,7 @@
   font-family: var(--font-sans);
   font-size: var(--fs-xxs); font-weight: var(--w-semibold);
   color: var(--color-foreground-muted);
+  opacity: 0.7;
   letter-spacing: var(--ls-caps); text-transform: uppercase;
 }
 
@@ -66,7 +67,7 @@
   padding: 8px 10px; margin: 3px 10px;
   height: 36px; box-sizing: border-box;
   border-radius: var(--radius-sm);
-  color: var(--color-foreground-secondary);
+  color: var(--color-foreground-default);
   font-size: var(--fs-md); font-weight: var(--w-medium);
   cursor: pointer; position: relative;
   white-space: nowrap; overflow: hidden;
@@ -81,10 +82,10 @@
 .sb-item.active::before {
   content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px;
   width: 2px; border-radius: var(--radius-pill);
-  background: var(--color-brand-secondary-500);
+  background: var(--color-brand-solid);
 }
 .sb-item .ic { width: 15px; height: 15px; stroke-width: var(--icon-stroke); flex-shrink: 0; opacity: 0.85; }
-.sb-item.active .ic { color: var(--color-brand-secondary-500); opacity: 1; }
+.sb-item.active .ic { color: var(--color-brand-solid); opacity: 1; }
 .sb-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sb-item.disabled { color: var(--color-foreground-placeholder); cursor: not-allowed; }
 .sb-item.disabled:hover { background: transparent; }
@@ -94,7 +95,7 @@
   font-family: var(--font-sans); font-size: 9px; font-weight: var(--w-bold);
   letter-spacing: .06em; line-height: 1.4;
   padding: 1px var(--space-2-5); border-radius: var(--radius-pill);
-  background: var(--color-brand-secondary-500); color: var(--color-pure-white);
+  background: var(--color-brand-solid); color: var(--color-brand-on-solid);
 }
 .sb-badge.alert { background: var(--color-danger-500); }
 .sb-badge.warning { background: var(--color-warning-500); }
@@ -104,7 +105,7 @@
   background: var(--color-background-subtle);
   padding: 1px 6px; border-radius: var(--radius-xs);
 }
-.sb-item.active .sb-count { background: color-mix(in srgb, var(--color-brand-secondary-200) 70%, transparent); color: var(--color-brand-secondary-700); }
+.sb-item.active .sb-count { background: var(--color-brand-subtle); color: var(--color-brand-text); }
 
 /* Footer — user mini-card */
 .sb-foot {
@@ -115,7 +116,7 @@
 }
 .sb-foot .avatar {
   width: 26px; height: 26px; border-radius: var(--radius-pill);
-  background: var(--color-brand-secondary-500); color: var(--color-pure-white);
+  background: var(--color-brand-solid); color: var(--color-brand-on-solid);
   font-size: 10px; font-weight: var(--w-bold);
   display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
 }
@@ -124,6 +125,18 @@
 .sb-foot .meta .role { font-size: var(--fs-xxs); color: var(--color-foreground-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sb-foot .logout { color: var(--color-foreground-muted); cursor: pointer; flex-shrink: 0; display: inline-flex; }
 .sb-foot .logout svg, .sb-foot .logout i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+/* Card variant — enclosed footer that reads as a distinct card and stacks the
+   company under the name (mirrors the top-bar account control). Use .co for the
+   company line. Consumed via AppSidebar's `foot` slot: <div class="sb-foot sb-foot-card">. */
+.sb-foot-card {
+  margin: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--shape-container);
+  background: var(--color-background-surface);
+}
+.sb-foot-card .meta { display: flex; flex-direction: column; line-height: 1.3; }
+.sb-foot-card .meta .co { font-size: var(--fs-xxs); color: var(--color-foreground-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* ===== Collapsed (60px icon rail) ===== */
 .sb.collapsed { width: 60px; }
@@ -169,7 +182,7 @@
 .sb-children .sb-subitem:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
 .sb-children .sb-subitem:hover::before { opacity: 1; background: var(--color-foreground-muted); }
 .sb-children .sb-subitem.active { color: var(--color-foreground-brand); font-weight: var(--w-semibold); background: var(--color-background-selected); }
-.sb-children .sb-subitem.active::before { background: var(--color-brand-secondary-500); opacity: 1; }
+.sb-children .sb-subitem.active::before { background: var(--color-brand-solid); opacity: 1; }
 .sb-children .sb-subitem .count, .sb-children .sb-subitem .sb-count {
   margin-left: auto;
   font-family: var(--font-mono); font-size: var(--fs-xxs);

package/dist/css/components/smart-search.css

@@ -18,7 +18,7 @@
 
 .ss-section { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border-subtle); }
 .ss-section:last-of-type { border-bottom: 0; }
-.ss-section-label { font-size: var(--fs-xxs); font-weight: var(--w-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); padding: 0 var(--space-2); margin-bottom: var(--space-2); }
+.ss-section-label { font-size: var(--fs-xxs); font-weight: var(--w-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); padding: 0 var(--space-2); margin-bottom: var(--space-2); }: var(--space-2); }
 
 /* Suggestion chips (active state) */
 .ss-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-2); }
@@ -32,7 +32,7 @@
 .ss-list-item:hover, .ss-list-item.is-active { background: var(--color-background-hover); }
 .ss-list-item .icon-leading { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-background-canvas); display: inline-flex; align-items: center; justify-content: center; color: var(--color-foreground-secondary); flex-shrink: 0; }
 .ss-list-item .icon-leading svg, .ss-list-item .icon-leading i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
-.ss-list-item .icon-leading.brand { background: var(--color-brand-secondary-50); color: var(--color-brand-secondary-700); }
+.ss-list-item .icon-leading.brand { background: var(--color-brand-subtle-solid); color: var(--color-brand-text); }
 .ss-list-item .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
 .ss-list-item .text .label { font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--color-foreground-default); }
 .ss-list-item .text .meta { font-size: var(--fs-xs); color: var(--color-foreground-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -56,7 +56,7 @@
 .ss-hint .icon-leading svg, .ss-hint .icon-leading i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
 .ss-hint .body { font-size: var(--fs-sm); color: var(--color-foreground-secondary); line-height: var(--lh-relaxed); }
 .ss-hint .body strong { color: var(--color-foreground-default); font-weight: var(--w-semibold); }
-.ss-hint .body code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-foreground-accent); background: color-mix(in srgb, var(--color-brand-secondary-500) 12%, transparent); padding: 1px var(--space-2); border-radius: var(--radius-xs); }
+.ss-hint .body code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-foreground-accent); background: var(--color-brand-subtle); padding: 1px var(--space-2); border-radius: var(--radius-xs); }
 
 /* ID type-picker buttons */
 .ss-typebtns { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-2); }

package/dist/css/components/status-pills.css

@@ -131,7 +131,7 @@
 .pill.solid.danger  { background: var(--color-danger-500);  color: var(--color-pure-white); border-color: transparent; }
 .pill.solid.info    { background: var(--color-info-500);    color: var(--color-pure-white); border-color: transparent; }
 .pill.solid.neutral { background: var(--color-neutral-700); color: var(--color-pure-white); border-color: transparent; }
-.pill.solid.brand   { background: var(--color-brand-secondary-500);    color: var(--color-foreground-on-solid); border-color: transparent; }
+.pill.solid.brand   { background: var(--color-brand-solid);    color: var(--color-brand-on-solid); border-color: transparent; }
 .pill.solid > .dot  { background: currentColor; }
 
 .pill.outline.success { background: transparent; color: var(--color-feedback-success-foreground); border-color: var(--color-success-500); }
@@ -139,7 +139,7 @@
 .pill.outline.danger  { background: transparent; color: var(--color-feedback-danger-foreground);  border-color: var(--color-danger-500);  }
 .pill.outline.info    { background: transparent; color: var(--color-feedback-info-foreground);    border-color: var(--color-info-500);    }
 .pill.outline.neutral { background: transparent; color: var(--color-foreground-secondary); border-color: var(--color-border-strong); }
-.pill.outline.brand   { background: transparent; color: var(--color-foreground-accent);  border-color: var(--color-brand-secondary-500);    }
+.pill.outline.brand   { background: transparent; color: var(--color-foreground-accent);  border-color: var(--color-brand-solid);    }
 
 
 /* ----------------------------------------------------------------

package/dist/css/components/table.css

@@ -54,7 +54,7 @@
 .dt-wrap {
   background: var(--color-background-surface);
   border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
+  border-radius: var(--shape-container);
   overflow: hidden;
   box-shadow: var(--shadow-xs);
 }
@@ -138,8 +138,8 @@
 .dt-pagination .page-btn:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
 .dt-pagination .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
 .dt-pagination .page-btn.is-current {
-  background: color-mix(in srgb, var(--color-brand-accent-500) 14%, transparent);
-  border-color: color-mix(in srgb, var(--color-brand-accent-500) 36%, transparent);
+  background: var(--color-accent-subtle);
+  border-color: color-mix(in srgb, var(--color-accent-solid) 36%, transparent);
   color: var(--color-foreground-accent);
 }
 .dt-pagination .page-btn > i, .dt-pagination .page-btn > svg,

package/dist/css/components/toast.css

@@ -16,7 +16,7 @@
   -webkit-backdrop-filter: var(--glass-blur);
   backdrop-filter: var(--glass-blur);
   border: var(--glass-border);
-  border-radius: var(--radius-md);
+  border-radius: var(--shape-container);
   box-shadow: var(--shadow-glass), var(--shadow-lg);
   font-family: var(--font-sans);
   font-size: var(--fs-sm);

package/dist/css/components/topbar.css

@@ -80,7 +80,7 @@
 /* Avatar chip */
 .tb-avatar {
   width: 30px; height: 30px; border-radius: var(--radius-pill);
-  background: var(--color-brand-secondary-500); color: var(--color-pure-white);
+  background: var(--color-brand-solid); color: var(--color-brand-on-solid);
   font-size: var(--fs-xs); font-weight: var(--w-bold);
   display: inline-flex; align-items: center; justify-content: center;
   flex-shrink: 0; margin-left: var(--space-1);

package/dist/css/tokens.css

@@ -1,14 +1,14 @@
 /* @attrus/cabiros — design tokens + type classes (concatenated).
    Generated by scripts/build.mjs from src/tokens/ and src/typography/. */
 
-/* ============================================================
-   ATTRUS / Cabiros — BASE PALETTE (raw color tokens)
-   The primitive layer. Theme-agnostic. Referenced only by the
-   semantic layer (color-semantic.css) and effect layers — never
-   consumed directly by components.
-   ============================================================ */
+/* AUTO-GENERATED by tools/sync-to-ds.cjs from Cabiros/colors_and_type.css.
+   Edit the source there, then re-run the sync — do not hand-edit this file. */
 
 :root {
+/* ============================================================
+     1.  BASE PALETTE  —  raw color tokens
+     ============================================================ */
+
   /* --- Brand (from manual: Lato + 4 HEX stops) --- */
   --brand-attrus-ink:        #0F0F1A;   /* almost-black, blue-tinted */
   --brand-attrus-navy:       #002142;   /* deep navy */
@@ -143,15 +143,16 @@
   --color-info-900: #072951;
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — SEMANTIC COLOR TOKENS
-   Reference the base palette (palette.css). This is the layer
-   components consume.
-   Roles: default | secondary | muted | accent | placeholder
-   Contexts: fg (text/icon), bg (surface), br (border)
-   ============================================================ */
+/* AUTO-GENERATED by tools/sync-to-ds.cjs from Cabiros/colors_and_type.css.
+   Edit the source there, then re-run the sync — do not hand-edit this file. */
 
 :root {
+/* ============================================================
+     2.  SEMANTIC TOKENS — reference the base palette
+     Roles: default | secondary | muted | accent | placeholder
+     Contexts: fg (text/icon), bg (surface), br (border)
+     ============================================================ */
+
   /* Default (light) theme — the 60% whites/light grays */
   --color-background-canvas:      var(--color-neutral-25);          /* app background */
   --color-background-surface:     var(--color-neutral-0);           /* card / container */
@@ -169,23 +170,27 @@
      component fill, text and tint reads from these, so swapping them reskins the
      whole catalog with no per-component edits. Primer/Spectrum-style aliasing.
 
-     The two axes stay orthogonal:
+     Defaults below = today's Cabiros values (Royal solid, Sky accent), so these
+     are ADDITIVE — introducing them changes nothing until components migrate
+     (Phase 2). The two axes stay orthogonal:
        • PRODUCT axis → matiz: this set + the brand/accent scales, logo, hero grad.
        • THEME axis (light/dark) → surface ramp + tint intensity. NEVER matiz.
+     A product that needs a SURFACE token is not a sub-brand — it is a separate
+     system (see preview/theming.html for the full contract).
 
-     Brand = institutional / primary action. */
-  --color-brand-solid:        var(--color-brand-primary-500);  /* Enterprise primary — ATTRUS Navy #002142 (buttons, avatars, toggles, badges, hero) */
+     Brand = institutional / primary action (Royal). */
+  --color-brand-solid:    var(--color-brand-primary-500);  /* Enterprise primary — ATTRUS Navy #002142 (buttons, avatars, toggles, badges, hero) */
   --color-brand-solid-hover:  color-mix(in srgb, var(--color-pure-white) 12%, var(--color-brand-primary-500));  /* navy is near-ink → states LIGHTEN */
   --color-brand-solid-active: color-mix(in srgb, var(--color-pure-white) 6%,  var(--color-brand-primary-500));
-  --color-brand-text:         var(--color-brand-primary-500);  /* navy as text — 15:1 on white */
-  --color-brand-text-strong:  var(--color-brand-primary-700);  /* brand text pressed/emphasis */
-  --color-brand-subtle:       color-mix(in srgb, var(--color-brand-primary-500) 12%, transparent);  /* tints: brand chips, selected, tags */
+  --color-brand-text:     var(--color-brand-primary-500);  /* navy as text — 15:1 on white */
+  --color-brand-text-strong: var(--color-brand-primary-700);  /* brand text pressed/emphasis */
+  --color-brand-subtle:   color-mix(in srgb, var(--color-brand-primary-500) 12%, transparent);  /* tints: brand chips, selected, tags */
   --color-brand-subtle-solid: var(--color-brand-primary-50);   /* opaque light brand tint: brand avatars, selected-row base */
-  --color-brand-border:       var(--color-brand-primary-200);  /* light brand border: selected filter chips */
-  --color-brand-on-solid:     var(--color-foreground-on-solid);  /* text/icon on --color-brand-solid */
+  --color-brand-border:   var(--color-brand-primary-200);  /* light brand border: selected filter chips */
+  --color-brand-on-solid: var(--color-foreground-on-solid);  /* text/icon on --color-brand-solid */
   /* Accent = interactive / wayfinding (Sky). accent text = --color-foreground-accent. */
-  --color-accent-solid:       var(--color-brand-accent-500);   /* tab/active indicator, focus ring */
-  --color-accent-subtle:      color-mix(in srgb, var(--color-brand-accent-500) 14%, transparent);  /* counts, pagination, accent chips */
+  --color-accent-solid:   var(--color-brand-accent-500);     /* tab/active indicator, focus ring */
+  --color-accent-subtle:  color-mix(in srgb, var(--color-brand-accent-500) 14%, transparent);  /* counts, pagination, accent chips */
 
   /* ─────────────────────────────────────────────────────────────────────────
      INVERSE LAYER — contextual contrast surface, NOT dark theme
@@ -210,7 +215,7 @@
        ✗ Mixing inverse and surface tokens in the same component without intent
        ✗ Hard-coding #0B1230 / white instead of inverse tokens
      ───────────────────────────────────────────────────────────────────────── */
-  --color-background-inverse:          color-mix(in srgb, var(--color-brand-solid) 16%, var(--color-ink-base));      /* product-tinted dark panel */
+  --color-background-inverse:          color-mix(in srgb, var(--color-brand-solid) 16%, var(--color-ink-base));      /* product-tinted dark panel (Enterprise≈navy, Business≈blue) */
   --color-background-inverse-surface:  color-mix(in srgb, var(--color-brand-solid) 20%, var(--color-ink-raised));
   --color-background-inverse-subtle:   color-mix(in srgb, var(--color-brand-solid) 12%, var(--color-ink-deep));
   --color-background-inverse-hover:    var(--color-ink-hover);
@@ -300,63 +305,67 @@
   --color-feedback-info-foreground-on-inverse-muted:    color-mix(in srgb, var(--color-info-100)    70%, var(--color-foreground-inverse-muted));
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — GRADIENTS (primary brand + layers)
-   ============================================================ */
+/* AUTO-GENERATED by tools/sync-to-ds.cjs from Cabiros/colors_and_type.css.
+   Edit the source there, then re-run the sync — do not hand-edit this file. */
 
-/* Brand gradients — DERIVED from --color-brand-solid so they follow the
-   active product automatically (Enterprise Navy / Business Blue / …). The
-   var() resolves at use-site, so an element under [data-product] recomputes
-   these with that product's primary — no per-product override needed.
-   --grad-brand tips into the shared Sky accent. */
 :root {
+/* ============================================================
+     3.  GRADIENTS  —  primary brand + layers
+     ============================================================ */
+  /* Brand gradients — DERIVED from --color-brand-solid so they follow the
+     active product automatically (Enterprise Navy / Business Blue / …). The
+     var() resolves at use-site, so an element under [data-product] recomputes
+     these with that product's primary — no per-product override needed.
+     --grad-brand tips into the shared Sky accent. */
   --grad-brand:       linear-gradient(135deg,
                         color-mix(in srgb, var(--color-pure-black) 45%, var(--color-brand-solid)) 0%,
                         var(--color-brand-solid) 55%,
-                        var(--color-accent-solid) 100%);
+                        var(--color-accent-solid) 100%);  /* @kind color */
   --grad-brand-soft:  linear-gradient(135deg,
                         var(--color-brand-solid) 0%,
-                        color-mix(in srgb, var(--color-pure-black) 20%, var(--color-brand-solid)) 100%);
+                        color-mix(in srgb, var(--color-pure-black) 20%, var(--color-brand-solid)) 100%);  /* @kind color */
   --grad-ink:         linear-gradient(160deg,
                         color-mix(in srgb, var(--color-pure-black) 68%, var(--color-brand-solid)) 0%,
                         color-mix(in srgb, var(--color-pure-black) 45%, var(--color-brand-solid)) 55%,
-                        color-mix(in srgb, var(--color-pure-black) 25%, var(--color-brand-solid)) 100%);
+                        color-mix(in srgb, var(--color-pure-black) 25%, var(--color-brand-solid)) 100%);  /* @kind color */
   --grad-hero:        linear-gradient(180deg,
                         color-mix(in srgb, var(--color-pure-black) 52%, var(--color-brand-solid)) 0%,
-                        color-mix(in srgb, var(--color-pure-black) 18%, var(--color-brand-solid)) 100%);
+                        color-mix(in srgb, var(--color-pure-black) 18%, var(--color-brand-solid)) 100%);  /* @kind color */
   --grad-sheen:       linear-gradient(120deg,
                         color-mix(in srgb, var(--color-pure-white) 14%, transparent) 0%,
                         color-mix(in srgb, var(--color-pure-white)  0%, transparent) 40%,
                         color-mix(in srgb, var(--color-pure-white)  0%, transparent) 60%,
-                        color-mix(in srgb, var(--color-pure-white)  8%, transparent) 100%);
+                        color-mix(in srgb, var(--color-pure-white)  8%, transparent) 100%);  /* @kind color */
   --grad-surface-top: linear-gradient(180deg,
                         color-mix(in srgb, var(--color-pure-white) 65%, transparent) 0%,
-                        color-mix(in srgb, var(--color-pure-white)  0%, transparent) 100%);
+                        color-mix(in srgb, var(--color-pure-white)  0%, transparent) 100%);  /* @kind color */
   --grad-radial-glow: radial-gradient(1200px 500px at 20% -10%,
                         color-mix(in srgb, var(--color-accent-solid) 25%, transparent) 0%,
-                        color-mix(in srgb, var(--color-accent-solid)  0%, transparent) 60%);
+                        color-mix(in srgb, var(--color-accent-solid)  0%, transparent) 60%);  /* @kind color */
   --grad-data-pos:    linear-gradient(180deg,
                         color-mix(in srgb, var(--color-success-500) 35%, transparent) 0%,
-                        color-mix(in srgb, var(--color-success-500)  0%, transparent) 100%);
+                        color-mix(in srgb, var(--color-success-500)  0%, transparent) 100%);  /* @kind color */
   --grad-data-neg:    linear-gradient(180deg,
                         color-mix(in srgb, var(--color-danger-500) 35%, transparent) 0%,
-                        color-mix(in srgb, var(--color-danger-500)  0%, transparent) 100%);
+                        color-mix(in srgb, var(--color-danger-500)  0%, transparent) 100%);  /* @kind color */
   --grad-data-brand:  linear-gradient(180deg,
                         color-mix(in srgb, var(--color-brand-accent-500) 30%, transparent) 0%,
-                        color-mix(in srgb, var(--color-brand-accent-500)  0%, transparent) 100%);
+                        color-mix(in srgb, var(--color-brand-accent-500)  0%, transparent) 100%);  /* @kind color */
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — DATA VISUALIZATION (chart palettes & structure)
-   Categorical = qualitative series (distinct, on-brand, cool).
-   Sequential  = single-hue magnitude ramp (Sky).
-   Diverging   = danger ← neutral → success (variance/heatmap).
-   Structure   = grid / axis / track / reference (semantic → theme).
-   Categorical gets dark-theme overrides (lift the dark hues, in
-   theme-dark.css); ramps + structure follow semantic tokens.
-   ============================================================ */
+/* AUTO-GENERATED by tools/sync-to-ds.cjs from Cabiros/colors_and_type.css.
+   Edit the source there, then re-run the sync — do not hand-edit this file. */
 
 :root {
+/* ============================================================
+     3b.  DATA VISUALIZATION  —  chart palettes & structure
+     Categorical = qualitative series (distinct, on-brand, cool).
+     Sequential  = single-hue magnitude ramp (Sky).
+     Diverging   = danger ← neutral → success (variance/heatmap).
+     Structure   = grid / axis / track / reference (semantic → theme).
+     Categorical gets dark-theme overrides (lift the dark hues);
+     ramps + structure follow semantic tokens automatically.
+     ============================================================ */
   /* Categorical — order chosen for max adjacent contrast */
   --dataviz-cat-1: #003399;  /* Royal — brand-anchored series 1 */
   --dataviz-cat-2: #3399FF;  /* Sky */
@@ -397,12 +406,14 @@
   --dataviz-reference:   var(--color-foreground-muted);   /* dashed target/avg line */
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — LIQUID GLASS (transparent / frosted layers)
-   Use with backdrop-filter: blur().
-   ============================================================ */
+/* AUTO-GENERATED by tools/sync-to-ds.cjs from Cabiros/colors_and_type.css.
+   Edit the source there, then re-run the sync — do not hand-edit this file. */
 
 :root {
+/* ============================================================
+     4.  LIQUID GLASS  —  transparent / frosted layers
+     Use with backdrop-filter: blur().
+     ============================================================ */
   --glass-white:     color-mix(in srgb, var(--color-pure-white) 58%, transparent);
   --glass-white-hi:  color-mix(in srgb, var(--color-pure-white) 78%, transparent);
   --glass-white-lo:  color-mix(in srgb, var(--color-pure-white) 38%, transparent);
@@ -410,19 +421,23 @@
   --glass-ink:       color-mix(in srgb, var(--color-background-inverse) 55%, transparent);   /* dark navy */
   --glass-ink-hi:    color-mix(in srgb, var(--color-background-inverse) 78%, transparent);
   --glass-ink-lo:    color-mix(in srgb, var(--color-background-inverse) 35%, transparent);
-  --glass-blur:      saturate(140%) blur(18px);
-  --glass-blur-sm:   saturate(130%) blur(10px);
-  --glass-blur-lg:   saturate(160%) blur(28px);
+  /* Theme-aware frosted chrome (drawer/modal header+footer): white glass in light,
+     ink glass in dark. Use this — NOT raw --glass-white — on themed chrome. */
+  --glass-chrome:    var(--glass-white);
+  --glass-blur:      saturate(140%) blur(18px);  /* @kind other */
+  --glass-blur-sm:   saturate(130%) blur(10px);  /* @kind other */
+  --glass-blur-lg:   saturate(160%) blur(28px);  /* @kind other */
   --glass-border:      1px solid color-mix(in srgb, var(--color-pure-white) 45%, transparent);
   --glass-border-dark: 1px solid color-mix(in srgb, var(--color-pure-white) 10%, transparent);
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — RADII
-   Mostly softly rounded; buttons fully rounded.
-   ============================================================ */
+/* AUTO-GENERATED by tools/sync-to-ds.cjs from Cabiros/colors_and_type.css.
+   Edit the source there, then re-run the sync — do not hand-edit this file. */
 
 :root {
+/* ============================================================
+     5.  RADII  —  mostly softly rounded; buttons fully rounded
+     ============================================================ */
   --radius-2xs: 2px;   /* never-square minimum — tiny chips, ticks, dividers */
   --radius-xs: 4px;
   --radius-sm: 6px;
@@ -434,13 +449,27 @@
   --radius-xl: 20px;   /* hero / large panels */
   --radius-2xl: 28px;
   --radius-pill: 999px; /* BUTTONS — fully rounded */
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     SHAPE — product axis (roundness of the product surface)
+     ─────────────────────────────────────────────────────────────────────────
+     A product theme (`[data-product]`) may redefine these to read sharper or
+     softer — they PICK a step from the raw --radius-* scale (never a raw px),
+     so the scale stays the single source and the linter can enforce it.
+     Defaults below = today's values (value-preserving). Buttons stay pill by
+     deliberate brand stance (own token, not shape-themable here). */
+  --shape-control:   var(--radius-sm);   /* inputs, select, segmented, file trigger, number-input */
+  --shape-container: var(--radius-md);   /* cards, stat tiles, table wrapper, toast, drawer-lead */
+  --shape-overlay:   var(--radius-lg);   /* modals, drawer panels, large surfaces */
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — SHADOWS (soft, blue-tinted, multi-layer)
-   ============================================================ */
+/* AUTO-GENERATED by tools/sync-to-ds.cjs from Cabiros/colors_and_type.css.
+   Edit the source there, then re-run the sync — do not hand-edit this file. */
 
 :root {
+/* ============================================================
+     6.  SHADOWS  —  soft, blue-tinted, multi-layer
+     ============================================================ */
   --shadow-xs:  0 1px 2px color-mix(in srgb, var(--color-shadow-tint) 5%, transparent);
   --shadow-sm:  0 1px 2px color-mix(in srgb, var(--color-shadow-tint) 6%, transparent),
                 0 2px 6px color-mix(in srgb, var(--color-shadow-tint) 4%, transparent);
@@ -484,12 +513,13 @@
                        0 10px 40px color-mix(in srgb, var(--color-pure-black) 35%, transparent);
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — SPACING
-   4px base; dense, data-heavy layouts.
-   ============================================================ */
+/* AUTO-GENERATED by tools/sync-to-ds.cjs from Cabiros/colors_and_type.css.
+   Edit the source there, then re-run the sync — do not hand-edit this file. */
 
 :root {
+/* ============================================================
+     7.  SPACING  —  4px base; dense, data-heavy layouts
+     ============================================================ */
   --space-0:   0;
   --space-1:   2px;
   --space-2:   4px;
@@ -509,11 +539,13 @@
   --space-16:  96px;
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — ICONOGRAPHY (Lucide; sized to pair with type scale)
-   ============================================================ */
+/* AUTO-GENERATED by tools/sync-to-ds.cjs from Cabiros/colors_and_type.css.
+   Edit the source there, then re-run the sync — do not hand-edit this file. */
 
 :root {
+/* ============================================================
+     7b. ICONOGRAPHY  —  Lucide; sized to pair with type scale
+     ============================================================ */
   --icon-xs: 12px;  /* helper text, micro caption          (paired w/ 11–12px text) */
   --icon-sm: 14px;  /* input affix, dense inline           (paired w/ 13px text) */
   --icon-md: 16px;  /* default — buttons, nav, body        (paired w/ 14px text) */
@@ -521,54 +553,56 @@
   --icon-xl: 24px;  /* hero, empty states, splash          (paired w/ 18+ text) */
 
   /* Stroke widths — Lucide */
-  --icon-stroke:      1.75;  /* default — slightly bolder than 1.5, calmer than 2 */
+  --icon-stroke:      1.75;  /* @kind other */  /* default — slightly bolder than 1.5, calmer than 2 */
   --icon-stroke-bold: 2;     /* close buttons, X marks, indicators where weight matters */
   --icon-stroke-thin: 1.5;   /* decorative / large hero icons where 1.75 looks heavy */
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — MOTION (durations + easings for transitions/animations)
-   ============================================================ */
+/* AUTO-GENERATED by tools/sync-to-ds.cjs from Cabiros/colors_and_type.css.
+   Edit the source there, then re-run the sync — do not hand-edit this file. */
 
 :root {
+/* ============================================================
+     7c. MOTION  —  durations + easings for transitions/animations
+     ============================================================ */
   /* Easing — single curve across the system; "out-expo-ish" for snappy UI */
-  --ease-standard: cubic-bezier(.2, .8, .2, 1);
-  --ease-emphasis: cubic-bezier(.2, .9, .15, 1);   /* slightly more overshoot — for entries */
-  --ease-linear:   linear;                         /* loading bars, scrubbers */
+  --ease-standard: cubic-bezier(.2, .8, .2, 1);  /* @kind other */
+  --ease-emphasis: cubic-bezier(.2, .9, .15, 1);  /* @kind other */   /* slightly more overshoot — for entries */
+  --ease-linear:   linear;  /* @kind other */                         /* loading bars, scrubbers */
 
   /* Durations — paired with --ease-standard unless noted */
-  --duration-instant: 80ms;     /* micro feedback (tap echo) */
-  --duration-fast:    140ms;    /* hover, focus, color shifts */
-  --duration-base:    200ms;    /* default for most UI */
-  --duration-slow:    320ms;    /* expansions, reveals */
-  --duration-slower:  480ms;    /* page-level transitions */
-  --duration-deliberate: 640ms; /* overlays — modal/drawer entry */
+  --duration-instant: 80ms;  /* @kind other */     /* micro feedback (tap echo) */
+  --duration-fast:    140ms;  /* @kind other */    /* hover, focus, color shifts */
+  --duration-base:    200ms;  /* @kind other */    /* default for most UI */
+  --duration-slow:    320ms;  /* @kind other */    /* expansions, reveals */
+  --duration-slower:  480ms;  /* @kind other */    /* page-level transitions */
+  --duration-deliberate: 640ms;  /* @kind other */ /* overlays — modal/drawer entry */
 
   /* Pre-composed transition shorthand (most common cases) */
-  --transition-fast:  140ms var(--ease-standard);   /* default for buttons/inputs */
-  --transition-base:  200ms var(--ease-standard);
-  --transition-slow:  320ms var(--ease-standard);
+  --transition-fast:  140ms var(--ease-standard);  /* @kind other */   /* default for buttons/inputs */
+  --transition-base:  200ms var(--ease-standard);  /* @kind other */
+  --transition-slow:  320ms var(--ease-standard);  /* @kind other */
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — TYPOGRAPHY TOKENS (Lato family per brand manual)
-   Font families, weights, type scale, line heights, letter spacing.
-   Ready-to-use type CLASSES live in ../typography/index.css.
-   ============================================================ */
+/* AUTO-GENERATED by tools/sync-to-ds.cjs from Cabiros/colors_and_type.css.
+   Edit the source there, then re-run the sync — do not hand-edit this file. */
 
 :root {
+/* ============================================================
+     8.  TYPOGRAPHY  —  Lato family per brand manual
+     ============================================================ */
   --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
   --font-display: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
 
   /* Weights (per manual) */
-  --w-light: 300;
-  --w-regular: 400;
-  --w-medium: 500;  /* Lato doesn't ship 500 natively; maps to 400 */
-  --w-semibold: 600;
-  --w-bold: 700;
-  --w-extrabold: 800;
-  --w-black: 900;
+  --w-light: 300;  /* @kind font */
+  --w-regular: 400;  /* @kind font */
+  --w-medium: 500;  /* @kind font */  /* Lato doesn't ship 500 natively; maps to 400 */
+  --w-semibold: 600;  /* @kind font */
+  --w-bold: 700;  /* @kind font */
+  --w-extrabold: 800;  /* @kind font */
+  --w-black: 900;  /* @kind font */
 
   /* Type scale  (px) */
   --fs-xxs: 10px;
@@ -587,31 +621,22 @@
   --fs-8xl: 72px;
 
   /* Line heights */
-  --lh-tight:   1.15;
-  --lh-snug:    1.3;
-  --lh-normal:  1.5;
-  --lh-relaxed: 1.65;
+  --lh-tight:   1.15;  /* @kind font */
+  --lh-snug:    1.3;  /* @kind font */
+  --lh-normal:  1.5;  /* @kind font */
+  --lh-relaxed: 1.65;  /* @kind font */
 
   /* Letter spacing — per Lato manual rules */
-  --ls-display: -0.03em;  /* 32–80px headlines */
-  --ls-tight:   -0.01em;  /* large numerics / stat values — between display and body */
-  --ls-title:   -0.015em; /* 16–32px titles (manual says -5%, but -5% looks tight on screens; using -1.5%) */
-  --ls-body:    0em;      /* <16px body */
-  --ls-label:   0.02em;   /* small caps / labels */
-  --ls-caps:    0.08em;
+  --ls-display: -0.03em;  /* @kind font */  /* 32–80px headlines */
+  --ls-tight:   -0.01em;  /* @kind font */  /* large numerics / stat values — between display and body */
+  --ls-title:   -0.015em;  /* @kind font */ /* 16–32px titles (manual says -5%, but -5% looks tight on screens; using -1.5%) */
+  --ls-body:    0em;  /* @kind font */      /* <16px body */
+  --ls-label:   0.02em;  /* @kind font */   /* small caps / labels */
+  --ls-caps:    0.08em;  /* @kind font */
 }
 
-/* ============================================================
-   ATTRUS / Cabiros — DARK THEME
-   [data-theme="dark"] remaps the AMBIENT semantic tokens to a dark
-   ink ramp. Components consume semantic tokens, so they flip
-   automatically — no per-component dark CSS needed.
-   Philosophy: the INVERSE layer stays a deliberate, brand-tinted
-   dark even here (see note in color-semantic.css), distinct from the
-   ambient surface. Raw palette + brand/accent scales are theme-agnostic.
-   Toggle via JS: set data-theme on <html>, persist to localStorage,
-   seed from prefers-color-scheme.
-   ============================================================ */
+/* AUTO-GENERATED by tools/sync-to-ds.cjs from Cabiros/colors_and_type.css.
+   Edit the source there, then re-run the sync — do not hand-edit this file. */
 
 [data-theme="dark"] {
   color-scheme: dark;
@@ -670,7 +695,9 @@
   --color-feedback-info-border:        color-mix(in srgb, var(--color-info-500) 34%, transparent);
 
   /* Surface-top sheen reads wrong on dark → neutralize */
-  --grad-surface-top: linear-gradient(180deg, color-mix(in srgb, var(--color-pure-white) 6%, transparent) 0%, transparent 100%);
+  --grad-surface-top: linear-gradient(180deg, color-mix(in srgb, var(--color-pure-white) 6%, transparent) 0%, transparent 100%);  /* @kind color */
+  /* Frosted chrome flips to ink glass on dark (drawer/modal header+footer) */
+  --glass-chrome: var(--glass-ink);
 
   /* Data-viz categorical — lift the dark hues so every series reads on dark ink.
      Ramps (seq/div) + structure follow the semantic tokens already remapped above. */
@@ -684,10 +711,11 @@
   --dataviz-cat-8: #A6B0C4;  /* Slate, lightened */
 }
 
+/* AUTO-GENERATED by tools/sync-to-ds.cjs from Cabiros/colors_and_type.css.
+   Edit the source there, then re-run the sync — do not hand-edit this file. */
+
 /* ============================================================
-   ATTRUS / Cabiros — SEMANTIC TYPE CLASSES (ready-to-use)
-   Base document styles + the display/heading/body/utility classes.
-   Consumes typography + color tokens (see ../tokens).
+   9.  SEMANTIC TYPE CLASSES  —  ready-to-use
    ============================================================ */
 
 html, body {
@@ -740,3 +768,34 @@ h6, .h6 { font-weight: var(--w-semibold); font-size: var(--fs-lg);  line-height:
 .inverse .color-foreground-muted     { color: var(--color-foreground-inverse-muted); }
 .inverse .fg-accent    { color: var(--color-foreground-inverse-accent); }
 
+
+/* ---- doc-back link (fixed top-left on every preview page) ---- */
+.doc-back {
+  position: fixed;
+  top: var(--space-5);
+  left: var(--space-5);
+  z-index: 1000;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  font-weight: var(--w-semibold);
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--color-foreground-default);
+  text-decoration: none;
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  background: var(--color-background-surface);
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-fast);
+}
+.doc-back:hover {
+  color: var(--color-foreground-default);
+  border-color: var(--color-border-strong);
+  box-shadow: var(--shadow-md);
+}
+.doc-back svg, .doc-back i { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@attrus-ds/core",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "description": "ATTRUS / Cabiros design system — design tokens, component styles, brand assets, fonts and an optional typed React component layer.",
   "keywords": [
     "design-system",