@attrus-ds/core 0.1.1 → 0.3.1

package/dist/assets/logo-attrus-dark.svg

@@ -1,8 +1,8 @@
-<svg width="1003" height="130" viewBox="0 0 1003 130" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M163.142 19.1138H221.901V129.352H246.304V19.1138H303.218V0H163.142V19.1138Z" fill="#000033"></path>
-<path d="M324.487 19.1138H383.22V129.352H407.649V19.1138H466.382V0H324.487V19.1138Z" fill="#000033"></path>
-<path d="M597.946 0H488.134V129.352H512.563V71.6632H580.687L610.977 129.352H637.065L606.589 71.2885C629.546 69.0933 638.537 57.1539 638.537 40.4227V31.2405C638.537 12.6889 627.326 0 597.946 0ZM614.108 40.6101C614.108 48.3198 608.97 52.5495 597.946 52.5495H512.536V19.1138H597.946C608.97 19.1138 614.108 23.3434 614.108 31.0531V40.6101Z" fill="#000033"></path>
-<path d="M798.257 98.2993C798.257 106.009 793.12 110.239 782.096 110.239H701.85C690.826 110.239 685.689 106.009 685.689 98.2993V0H661.26V98.1119C661.26 116.664 672.47 129.352 701.85 129.352H787.26C816.64 129.352 822.713 116.664 822.713 98.1119V0H798.284V98.2993H798.257Z" fill="#000033"></path>
-<path d="M961.636 50.8897H885.592C874.567 50.8897 869.43 46.66 869.43 38.9503V31.0532C869.43 23.3434 874.567 19.1137 885.592 19.1137H995.057V0H885.592C856.211 0 845 12.689 845 31.2406V38.7629C845 57.3145 856.211 70.0034 885.592 70.0034H961.636C972.66 70.0034 977.798 74.2331 977.798 81.9428V98.2993C977.798 106.009 972.66 110.239 961.636 110.239H849.255V129.353H961.636C991.015 129.353 1002.23 116.663 1002.23 98.112V82.1303C1002.23 63.5787 991.015 50.8897 961.636 50.8897Z" fill="#000033"></path>
-<path d="M108.233 6.74605C105.184 2.677 100.34 0 94.8819 0C89.4234 0 84.4464 2.73056 81.3961 6.8799L80.6203 8.03098L0 129.352H27.1854L90.0923 32.6594L94.9622 25.1637L99.7248 32.6325L161.615 129.352H189.176L109.304 8.37901L108.233 6.74605Z" fill="#000033"></path>
+<svg width="1003" height="130" viewBox="0 0 1003 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M163.142 19.1138H221.901V129.352H246.304V19.1138H303.218V0H163.142V19.1138Z" fill="#000033"></path>
+<path d="M324.487 19.1138H383.22V129.352H407.649V19.1138H466.382V0H324.487V19.1138Z" fill="#000033"></path>
+<path d="M597.946 0H488.134V129.352H512.563V71.6632H580.687L610.977 129.352H637.065L606.589 71.2885C629.546 69.0933 638.537 57.1539 638.537 40.4227V31.2405C638.537 12.6889 627.326 0 597.946 0ZM614.108 40.6101C614.108 48.3198 608.97 52.5495 597.946 52.5495H512.536V19.1138H597.946C608.97 19.1138 614.108 23.3434 614.108 31.0531V40.6101Z" fill="#000033"></path>
+<path d="M798.257 98.2993C798.257 106.009 793.12 110.239 782.096 110.239H701.85C690.826 110.239 685.689 106.009 685.689 98.2993V0H661.26V98.1119C661.26 116.664 672.47 129.352 701.85 129.352H787.26C816.64 129.352 822.713 116.664 822.713 98.1119V0H798.284V98.2993H798.257Z" fill="#000033"></path>
+<path d="M961.636 50.8897H885.592C874.567 50.8897 869.43 46.66 869.43 38.9503V31.0532C869.43 23.3434 874.567 19.1137 885.592 19.1137H995.057V0H885.592C856.211 0 845 12.689 845 31.2406V38.7629C845 57.3145 856.211 70.0034 885.592 70.0034H961.636C972.66 70.0034 977.798 74.2331 977.798 81.9428V98.2993C977.798 106.009 972.66 110.239 961.636 110.239H849.255V129.353H961.636C991.015 129.353 1002.23 116.663 1002.23 98.112V82.1303C1002.23 63.5787 991.015 50.8897 961.636 50.8897Z" fill="#000033"></path>
+<path d="M108.233 6.74605C105.184 2.677 100.34 0 94.8819 0C89.4234 0 84.4464 2.73056 81.3961 6.8799L80.6203 8.03098L0 129.352H27.1854L90.0923 32.6594L94.9622 25.1637L99.7248 32.6325L161.615 129.352H189.176L109.304 8.37901L108.233 6.74605Z" fill="#000033"></path>
 </svg>

package/dist/assets/logo-attrus-light.svg

@@ -1,8 +1,8 @@
-<svg width="1005" height="130" viewBox="0 0 1005 130" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M163.142 19.1138H221.901V129.352H246.304V19.1138H303.218V0H163.142V19.1138Z" fill="white"></path>
-<path d="M324.487 19.1138H383.22V129.352H407.649V19.1138H466.382V0H324.487V19.1138Z" fill="white"></path>
-<path d="M597.946 0H488.134V129.352H512.563V71.6632H580.687L610.977 129.352H637.065L606.589 71.2885C629.546 69.0933 638.537 57.1539 638.537 40.4227V31.2405C638.537 12.6889 627.326 0 597.946 0ZM614.108 40.6101C614.108 48.3198 608.97 52.5495 597.946 52.5495H512.536V19.1138H597.946C608.97 19.1138 614.108 23.3434 614.108 31.0531V40.6101Z" fill="white"></path>
-<path d="M798.257 98.2993C798.257 106.009 793.12 110.239 782.096 110.239H701.85C690.826 110.239 685.689 106.009 685.689 98.2993V0H661.26V98.1119C661.26 116.664 672.47 129.352 701.85 129.352H787.26C816.64 129.352 822.713 116.664 822.713 98.1119V0H798.284V98.2993H798.257Z" fill="white"></path>
-<path d="M963.641 50.9135H887.597C876.572 50.9135 871.434 46.6838 871.434 38.9741V31.077C871.434 23.3672 876.572 19.1375 887.597 19.1375H997.061V0.0238037H887.597C858.216 0.0238037 847.005 12.7128 847.005 31.2644V38.7867C847.005 57.3383 858.216 70.0272 887.597 70.0272H963.641C974.665 70.0272 979.803 74.2569 979.803 81.9666V98.3231C979.803 106.033 974.665 110.262 963.641 110.262H851.259V129.376H963.641C993.02 129.376 1004.23 116.687 1004.23 98.1358V82.1541C1004.23 63.6025 993.02 50.9135 963.641 50.9135Z" fill="white"></path>
-<path d="M108.233 6.74605C105.184 2.677 100.34 0 94.8819 0C89.4234 0 84.4464 2.73056 81.3961 6.8799L80.6203 8.03098L0 129.352H27.1854L90.0923 32.6594L94.9622 25.1637L99.7248 32.6325L161.615 129.352H189.176L109.304 8.37901L108.233 6.74605Z" fill="white"></path>
+<svg width="1005" height="130" viewBox="0 0 1005 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M163.142 19.1138H221.901V129.352H246.304V19.1138H303.218V0H163.142V19.1138Z" fill="white"></path>
+<path d="M324.487 19.1138H383.22V129.352H407.649V19.1138H466.382V0H324.487V19.1138Z" fill="white"></path>
+<path d="M597.946 0H488.134V129.352H512.563V71.6632H580.687L610.977 129.352H637.065L606.589 71.2885C629.546 69.0933 638.537 57.1539 638.537 40.4227V31.2405C638.537 12.6889 627.326 0 597.946 0ZM614.108 40.6101C614.108 48.3198 608.97 52.5495 597.946 52.5495H512.536V19.1138H597.946C608.97 19.1138 614.108 23.3434 614.108 31.0531V40.6101Z" fill="white"></path>
+<path d="M798.257 98.2993C798.257 106.009 793.12 110.239 782.096 110.239H701.85C690.826 110.239 685.689 106.009 685.689 98.2993V0H661.26V98.1119C661.26 116.664 672.47 129.352 701.85 129.352H787.26C816.64 129.352 822.713 116.664 822.713 98.1119V0H798.284V98.2993H798.257Z" fill="white"></path>
+<path d="M963.641 50.9135H887.597C876.572 50.9135 871.434 46.6838 871.434 38.9741V31.077C871.434 23.3672 876.572 19.1375 887.597 19.1375H997.061V0.0238037H887.597C858.216 0.0238037 847.005 12.7128 847.005 31.2644V38.7867C847.005 57.3383 858.216 70.0272 887.597 70.0272H963.641C974.665 70.0272 979.803 74.2569 979.803 81.9666V98.3231C979.803 106.033 974.665 110.262 963.641 110.262H851.259V129.376H963.641C993.02 129.376 1004.23 116.687 1004.23 98.1358V82.1541C1004.23 63.6025 993.02 50.9135 963.641 50.9135Z" fill="white"></path>
+<path d="M108.233 6.74605C105.184 2.677 100.34 0 94.8819 0C89.4234 0 84.4464 2.73056 81.3961 6.8799L80.6203 8.03098L0 129.352H27.1854L90.0923 32.6594L94.9622 25.1637L99.7248 32.6325L161.615 129.352H189.176L109.304 8.37901L108.233 6.74605Z" fill="white"></path>
 </svg>

package/dist/css/components/buttons.css

@@ -1,301 +1,301 @@
-/* ============================================================
-   BUTTONS — ATTRUS Design System
-   Component CSS — pure tokens, no hardcoded values.
-
-   Anatomy:
-     [leading icon?] [label] [trailing icon?]
-
-   Variants (semantic):
-     .btn-primary     | brand fill — main action
-     .btn-secondary   | neutral fill + hairline border — alternative actions
-     .btn-tertiary    | soft neutral fill (borderless) — quiet affirmative
-     .btn-ghost       | no chrome — toolbar / cancel / low priority
-     .btn-link        | inline text-link styling
-     .btn-danger      | destructive solid — irreversible
-     .btn-danger-outline | destructive secondary — contextual remove
-     .btn-success     | strong positive — approve / confirm
-     .btn-inverse     | white pill on dark/brand surfaces
-
-   Modifier:
-     .btn-icon        | icon-only (square hit-area)
-
-   Sizes:
-     .btn-xs (24h)  .btn-sm (32h)  default (40h)  .btn-lg (48h)
-
-   States: default | :hover | :active | :focus-visible | [disabled] | .is-loading
-   ============================================================ */
-
-
-/* ----------------------------------------------------------------
-   1. BASE
-   ---------------------------------------------------------------- */
-.btn {
-  /* Layout */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  white-space: nowrap;
-  flex-shrink: 0;
-
-  /* Box — default size = md (40px tall) */
-  height: 40px;
-  padding: 0 var(--space-5);
-  border: 1px solid transparent;
-  border-radius: var(--radius-pill);
-
-  /* Type */
-  font-family: var(--font-sans);
-  font-size: var(--fs-md);
-  font-weight: var(--w-semibold);
-  line-height: 1;
-  letter-spacing: var(--ls-body);
-
-  /* Behavior */
-  cursor: pointer;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  background: transparent;
-  color: inherit;
-
-  /* Motion */
-  transition:
-    background var(--transition-fast),
-    border-color var(--transition-fast),
-    color var(--transition-fast),
-    box-shadow var(--transition-fast),
-    transform var(--transition-fast);
-}
-
-.btn:active { transform: translateY(0.5px); }
-
-.btn:focus { outline: none; }
-.btn:focus-visible { box-shadow: var(--shadow-focus); }
-
-.btn[disabled],
-.btn.is-disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-/* Icon sizing inside buttons (Lucide replaces <i> with <svg>) */
-.btn > i, .btn > svg,
-.btn > svg {
-  width: var(--icon-sm);
-  height: var(--icon-sm);
-  stroke-width: var(--icon-stroke);
-  flex-shrink: 0;
-}
-
-
-/* ----------------------------------------------------------------
-   2. SIZES
-   ---------------------------------------------------------------- */
-.btn-xs {
-  height: 24px;
-  padding: 0 var(--space-3);
-  font-size: var(--fs-sm);
-  gap: var(--space-1);
-}
-.btn-xs > i, .btn-xs > svg, .btn-xs > svg { width: var(--icon-xs); height: var(--icon-xs); }
-
-.btn-sm {
-  height: 32px;
-  padding: 0 var(--space-4);
-  font-size: var(--fs-md);
-}
-.btn-sm > i, .btn-sm > svg, .btn-sm > svg { width: var(--icon-xs); height: var(--icon-xs); }
-
-/* default = md (40px) — defined in .btn */
-
-.btn-lg {
-  height: 48px;
-  padding: 0 var(--space-6);
-  font-size: var(--fs-base);
-  gap: var(--space-3);
-}
-.btn-lg > i, .btn-lg > svg, .btn-lg > svg { width: var(--icon-md); height: var(--icon-md); }
-
-
-/* ----------------------------------------------------------------
-   3. ICON-ONLY MODIFIER
-   ---------------------------------------------------------------- */
-.btn-icon { padding: 0; aspect-ratio: 1 / 1; }
-.btn-icon.btn-xs { width: 24px; }
-.btn-icon.btn-sm { width: 32px; }
-.btn-icon          { width: 40px; }
-.btn-icon.btn-lg { width: 48px; }
-
-
-/* ----------------------------------------------------------------
-   4. VARIANTS
-   ---------------------------------------------------------------- */
-
-/* PRIMARY — brand-blue solid */
-.btn-primary {
-  background: var(--color-brand-secondary-500);
-  color: var(--color-foreground-on-solid);
-}
-.btn-primary:hover  { background: var(--color-brand-secondary-600); }
-.btn-primary:active { background: var(--color-brand-secondary-700); }
-.btn-primary:focus-visible { box-shadow: var(--shadow-focus); }
-
-
-/* SECONDARY — soft neutral fill + hairline border */
-.btn-secondary {
-  background: var(--color-background-subtle);
-  color: var(--color-foreground-default);
-  border-color: var(--color-border-default);
-}
-.btn-secondary:hover  { background: var(--color-background-hover); border-color: var(--color-border-strong); }
-.btn-secondary:active { background: var(--color-background-press); }
-.btn-secondary:focus-visible { box-shadow: var(--shadow-focus); }
-
-
-/* TERTIARY — soft neutral fill, borderless (quieter than secondary) */
-.btn-tertiary {
-  background: color-mix(in srgb, var(--color-foreground-default) 7%, transparent);
-  color: var(--color-foreground-default);
-  border-color: transparent;
-}
-.btn-tertiary:hover  { background: color-mix(in srgb, var(--color-foreground-default) 12%, transparent); }
-.btn-tertiary:active { background: color-mix(in srgb, var(--color-foreground-default) 16%, transparent); }
-.btn-tertiary:focus-visible { box-shadow: var(--shadow-focus); }
-
-
-/* GHOST — no chrome until hover */
-.btn-ghost {
-  background: transparent;
-  color: var(--color-foreground-secondary);
-}
-.btn-ghost:hover  { background: var(--color-background-hover);  color: var(--color-foreground-default); }
-.btn-ghost:active { background: var(--color-background-press); }
-.btn-ghost:focus-visible { box-shadow: var(--shadow-focus); }
-
-
-/* LINK — looks like inline text link */
-.btn-link {
-  background: transparent;
-  color: var(--color-foreground-highlight);
-  height: auto;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-2xs);
-  text-decoration: none;
-}
-.btn-link:hover  { color: var(--color-brand-secondary-700); text-decoration: underline; text-underline-offset: 2px; }
-.btn-link:active { color: var(--color-brand-secondary-800); }
-.btn-link:focus-visible { box-shadow: var(--shadow-focus); }
-
-
-/* DANGER — destructive solid */
-.btn-danger {
-  background: var(--color-danger-500);
-  color: var(--color-foreground-on-solid);
-}
-.btn-danger:hover  { background: var(--color-danger-700); }
-.btn-danger:active { background: var(--color-danger-900); }
-.btn-danger:focus-visible { box-shadow: var(--shadow-focus-danger); }
-
-
-/* DANGER OUTLINE — destructive contextual */
-.btn-danger-outline {
-  background: var(--color-background-surface);
-  color: var(--color-danger-500);
-  border-color: var(--color-feedback-danger-border);
-}
-.btn-danger-outline:hover  { background: var(--color-feedback-danger-background); border-color: var(--color-danger-500); }
-.btn-danger-outline:active { background: color-mix(in srgb, var(--color-feedback-danger-background) 60%, var(--color-danger-100)); }
-.btn-danger-outline:focus-visible { box-shadow: var(--shadow-focus-danger); }
-
-
-/* SUCCESS — strong positive (rare) */
-.btn-success {
-  background: var(--color-success-500);
-  color: var(--color-foreground-on-solid);
-}
-.btn-success:hover  { background: var(--color-success-700); }
-.btn-success:active { background: var(--color-success-900); }
-.btn-success:focus-visible { box-shadow: var(--shadow-focus-success); }
-
-
-/* INVERSE — white pill on dark/brand surfaces */
-.btn-inverse {
-  background: var(--color-pure-white);
-  color: var(--color-brand-secondary-700);
-}
-.btn-inverse:hover  { background: var(--color-neutral-100); color: var(--color-brand-secondary-800); }
-.btn-inverse:active { background: var(--color-neutral-150); }
-.btn-inverse:focus-visible { box-shadow: var(--shadow-focus-sky); }
-
-
-/* ----------------------------------------------------------------
-   5. ON-INVERSE GHOSTS  —  for use inside .inverse / dark surfaces
-   Apply BOTH .btn-ghost AND .on-inverse
-   ---------------------------------------------------------------- */
-.btn-ghost.on-inverse {
-  color: var(--color-foreground-inverse-secondary);
-}
-.btn-ghost.on-inverse:hover  { background: var(--color-background-inverse-hover); color: var(--color-foreground-inverse-default); }
-.btn-ghost.on-inverse:active { background: var(--color-background-inverse-press); }
-
-/* Outline ghost on inverse — pairs with .btn-secondary semantics */
-.btn-secondary.on-inverse {
-  background: transparent;
-  color: var(--color-foreground-inverse-default);
-  border-color: var(--color-border-inverse-strong);
-}
-.btn-secondary.on-inverse:hover  { background: var(--color-background-inverse-hover); border-color: var(--color-foreground-inverse-secondary); }
-.btn-secondary.on-inverse:active { background: var(--color-background-inverse-press); }
-
-
-/* ----------------------------------------------------------------
-   6. LOADING STATE
-   Add .is-loading; keeps current width but hides label/icons,
-   shows a centered spinner.
-   ---------------------------------------------------------------- */
-.btn.is-loading {
-  position: relative;
-  color: transparent !important;
-  pointer-events: none;
-}
-.btn.is-loading > * { visibility: hidden; }
-.btn.is-loading::after {
-  content: "";
-  position: absolute;
-  top: 50%; left: 50%;
-  width: var(--icon-sm);
-  height: var(--icon-sm);
-  margin: calc(var(--icon-sm) / -2) 0 0 calc(var(--icon-sm) / -2);
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: var(--radius-pill);
-  animation: btn-spin var(--duration-slower) linear infinite;
-  /* Re-introduce currentColor where the variant set it; ::after inherits the parent's color BEFORE the !important override */
-  color: var(--color-foreground-default);
-}
-.btn-primary.is-loading::after,
-.btn-danger.is-loading::after,
-.btn-success.is-loading::after { color: var(--color-pure-white); }
-.btn-tertiary.is-loading::after { color: var(--color-foreground-default); }
-
-@keyframes btn-spin {
-  to { transform: rotate(360deg); }
-}
-
-
-/* ----------------------------------------------------------------
-   7. BUTTON GROUP  —  segmented / toolbar
-   ---------------------------------------------------------------- */
-.btn-group {
-  display: inline-flex;
-}
-.btn-group .btn {
-  border-radius: 0;
-}
-.btn-group .btn:first-child { border-top-left-radius: var(--radius-pill); border-bottom-left-radius: var(--radius-pill); }
-.btn-group .btn:last-child  { border-top-right-radius: var(--radius-pill); border-bottom-right-radius: var(--radius-pill); }
-.btn-group .btn + .btn { margin-left: -1px; }
-.btn-group .btn:focus-visible,
-.btn-group .btn:hover { z-index: 1; }
+/* ============================================================
+   BUTTONS — ATTRUS Design System
+   Component CSS — pure tokens, no hardcoded values.
+
+   Anatomy:
+     [leading icon?] [label] [trailing icon?]
+
+   Variants (semantic):
+     .btn-primary     | brand fill — main action
+     .btn-secondary   | neutral fill + hairline border — alternative actions
+     .btn-tertiary    | soft neutral fill (borderless) — quiet affirmative
+     .btn-ghost       | no chrome — toolbar / cancel / low priority
+     .btn-link        | inline text-link styling
+     .btn-danger      | destructive solid — irreversible
+     .btn-danger-outline | destructive secondary — contextual remove
+     .btn-success     | strong positive — approve / confirm
+     .btn-inverse     | white pill on dark/brand surfaces
+
+   Modifier:
+     .btn-icon        | icon-only (square hit-area)
+
+   Sizes:
+     .btn-xs (24h)  .btn-sm (32h)  default (40h)  .btn-lg (48h)
+
+   States: default | :hover | :active | :focus-visible | [disabled] | .is-loading
+   ============================================================ */
+
+
+/* ----------------------------------------------------------------
+   1. BASE
+   ---------------------------------------------------------------- */
+.btn {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  white-space: nowrap;
+  flex-shrink: 0;
+
+  /* Box — default size = md (40px tall) */
+  height: 40px;
+  padding: 0 var(--space-5);
+  border: 1px solid transparent;
+  border-radius: var(--radius-pill);
+
+  /* Type */
+  font-family: var(--font-sans);
+  font-size: var(--fs-md);
+  font-weight: var(--w-semibold);
+  line-height: 1;
+  letter-spacing: var(--ls-body);
+
+  /* Behavior */
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  background: transparent;
+  color: inherit;
+
+  /* Motion */
+  transition:
+    background var(--transition-fast),
+    border-color var(--transition-fast),
+    color var(--transition-fast),
+    box-shadow var(--transition-fast),
+    transform var(--transition-fast);
+}
+
+.btn:active { transform: translateY(0.5px); }
+
+.btn:focus { outline: none; }
+.btn:focus-visible { box-shadow: var(--shadow-focus); }
+
+.btn[disabled],
+.btn.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Icon sizing inside buttons (Lucide replaces <i> with <svg>) */
+.btn > i, .btn > svg,
+.btn > svg {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  stroke-width: var(--icon-stroke);
+  flex-shrink: 0;
+}
+
+
+/* ----------------------------------------------------------------
+   2. SIZES
+   ---------------------------------------------------------------- */
+.btn-xs {
+  height: 24px;
+  padding: 0 var(--space-3);
+  font-size: var(--fs-sm);
+  gap: var(--space-1);
+}
+.btn-xs > i, .btn-xs > svg, .btn-xs > svg { width: var(--icon-xs); height: var(--icon-xs); }
+
+.btn-sm {
+  height: 32px;
+  padding: 0 var(--space-4);
+  font-size: var(--fs-md);
+}
+.btn-sm > i, .btn-sm > svg, .btn-sm > svg { width: var(--icon-xs); height: var(--icon-xs); }
+
+/* default = md (40px) — defined in .btn */
+
+.btn-lg {
+  height: 48px;
+  padding: 0 var(--space-6);
+  font-size: var(--fs-base);
+  gap: var(--space-3);
+}
+.btn-lg > i, .btn-lg > svg, .btn-lg > svg { width: var(--icon-md); height: var(--icon-md); }
+
+
+/* ----------------------------------------------------------------
+   3. ICON-ONLY MODIFIER
+   ---------------------------------------------------------------- */
+.btn-icon { padding: 0; aspect-ratio: 1 / 1; }
+.btn-icon.btn-xs { width: 24px; }
+.btn-icon.btn-sm { width: 32px; }
+.btn-icon          { width: 40px; }
+.btn-icon.btn-lg { width: 48px; }
+
+
+/* ----------------------------------------------------------------
+   4. VARIANTS
+   ---------------------------------------------------------------- */
+
+/* PRIMARY — brand-blue solid */
+.btn-primary {
+  background: var(--color-brand-secondary-500);
+  color: var(--color-foreground-on-solid);
+}
+.btn-primary:hover  { background: var(--color-brand-secondary-600); }
+.btn-primary:active { background: var(--color-brand-secondary-700); }
+.btn-primary:focus-visible { box-shadow: var(--shadow-focus); }
+
+
+/* SECONDARY — soft neutral fill + hairline border */
+.btn-secondary {
+  background: var(--color-background-subtle);
+  color: var(--color-foreground-default);
+  border-color: var(--color-border-default);
+}
+.btn-secondary:hover  { background: var(--color-background-hover); border-color: var(--color-border-strong); }
+.btn-secondary:active { background: var(--color-background-press); }
+.btn-secondary:focus-visible { box-shadow: var(--shadow-focus); }
+
+
+/* TERTIARY — soft neutral fill, borderless (quieter than secondary) */
+.btn-tertiary {
+  background: color-mix(in srgb, var(--color-foreground-default) 7%, transparent);
+  color: var(--color-foreground-default);
+  border-color: transparent;
+}
+.btn-tertiary:hover  { background: color-mix(in srgb, var(--color-foreground-default) 12%, transparent); }
+.btn-tertiary:active { background: color-mix(in srgb, var(--color-foreground-default) 16%, transparent); }
+.btn-tertiary:focus-visible { box-shadow: var(--shadow-focus); }
+
+
+/* GHOST — no chrome until hover */
+.btn-ghost {
+  background: transparent;
+  color: var(--color-foreground-secondary);
+}
+.btn-ghost:hover  { background: var(--color-background-hover);  color: var(--color-foreground-default); }
+.btn-ghost:active { background: var(--color-background-press); }
+.btn-ghost:focus-visible { box-shadow: var(--shadow-focus); }
+
+
+/* LINK — looks like inline text link */
+.btn-link {
+  background: transparent;
+  color: var(--color-foreground-highlight);
+  height: auto;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-2xs);
+  text-decoration: none;
+}
+.btn-link:hover  { color: var(--color-brand-secondary-700); text-decoration: underline; text-underline-offset: 2px; }
+.btn-link:active { color: var(--color-brand-secondary-800); }
+.btn-link:focus-visible { box-shadow: var(--shadow-focus); }
+
+
+/* DANGER — destructive solid */
+.btn-danger {
+  background: var(--color-danger-500);
+  color: var(--color-foreground-on-solid);
+}
+.btn-danger:hover  { background: var(--color-danger-700); }
+.btn-danger:active { background: var(--color-danger-900); }
+.btn-danger:focus-visible { box-shadow: var(--shadow-focus-danger); }
+
+
+/* DANGER OUTLINE — destructive contextual */
+.btn-danger-outline {
+  background: var(--color-background-surface);
+  color: var(--color-danger-500);
+  border-color: var(--color-feedback-danger-border);
+}
+.btn-danger-outline:hover  { background: var(--color-feedback-danger-background); border-color: var(--color-danger-500); }
+.btn-danger-outline:active { background: color-mix(in srgb, var(--color-feedback-danger-background) 85%, var(--color-danger-500)); }
+.btn-danger-outline:focus-visible { box-shadow: var(--shadow-focus-danger); }
+
+
+/* SUCCESS — strong positive (rare) */
+.btn-success {
+  background: var(--color-success-500);
+  color: var(--color-foreground-on-solid);
+}
+.btn-success:hover  { background: var(--color-success-700); }
+.btn-success:active { background: var(--color-success-900); }
+.btn-success:focus-visible { box-shadow: var(--shadow-focus-success); }
+
+
+/* INVERSE — white pill on dark/brand surfaces */
+.btn-inverse {
+  background: var(--color-pure-white);
+  color: var(--color-brand-secondary-700);
+}
+.btn-inverse:hover  { background: var(--color-neutral-100); color: var(--color-brand-secondary-800); }
+.btn-inverse:active { background: var(--color-neutral-150); }
+.btn-inverse:focus-visible { box-shadow: var(--shadow-focus-sky); }
+
+
+/* ----------------------------------------------------------------
+   5. ON-INVERSE GHOSTS  —  for use inside .inverse / dark surfaces
+   Apply BOTH .btn-ghost AND .on-inverse
+   ---------------------------------------------------------------- */
+.btn-ghost.on-inverse {
+  color: var(--color-foreground-inverse-secondary);
+}
+.btn-ghost.on-inverse:hover  { background: var(--color-background-inverse-hover); color: var(--color-foreground-inverse-default); }
+.btn-ghost.on-inverse:active { background: var(--color-background-inverse-press); }
+
+/* Outline ghost on inverse — pairs with .btn-secondary semantics */
+.btn-secondary.on-inverse {
+  background: transparent;
+  color: var(--color-foreground-inverse-default);
+  border-color: var(--color-border-inverse-strong);
+}
+.btn-secondary.on-inverse:hover  { background: var(--color-background-inverse-hover); border-color: var(--color-foreground-inverse-secondary); }
+.btn-secondary.on-inverse:active { background: var(--color-background-inverse-press); }
+
+
+/* ----------------------------------------------------------------
+   6. LOADING STATE
+   Add .is-loading; keeps current width but hides label/icons,
+   shows a centered spinner.
+   ---------------------------------------------------------------- */
+.btn.is-loading {
+  position: relative;
+  color: transparent !important;
+  pointer-events: none;
+}
+.btn.is-loading > * { visibility: hidden; }
+.btn.is-loading::after {
+  content: "";
+  position: absolute;
+  top: 50%; left: 50%;
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  margin: calc(var(--icon-sm) / -2) 0 0 calc(var(--icon-sm) / -2);
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: var(--radius-pill);
+  animation: btn-spin var(--duration-slower) linear infinite;
+  /* Re-introduce currentColor where the variant set it; ::after inherits the parent's color BEFORE the !important override */
+  color: var(--color-foreground-default);
+}
+.btn-primary.is-loading::after,
+.btn-danger.is-loading::after,
+.btn-success.is-loading::after { color: var(--color-pure-white); }
+.btn-tertiary.is-loading::after { color: var(--color-foreground-default); }
+
+@keyframes btn-spin {
+  to { transform: rotate(360deg); }
+}
+
+
+/* ----------------------------------------------------------------
+   7. BUTTON GROUP  —  segmented / toolbar
+   ---------------------------------------------------------------- */
+.btn-group {
+  display: inline-flex;
+}
+.btn-group .btn {
+  border-radius: 0;
+}
+.btn-group .btn:first-child { border-top-left-radius: var(--radius-pill); border-bottom-left-radius: var(--radius-pill); }
+.btn-group .btn:last-child  { border-top-right-radius: var(--radius-pill); border-bottom-right-radius: var(--radius-pill); }
+.btn-group .btn + .btn { margin-left: -1px; }
+.btn-group .btn:focus-visible,
+.btn-group .btn:hover { z-index: 1; }