@24vlh/vds 0.1.9 → 0.2.0

package/dist/components/buttons.css

@@ -33,13 +33,14 @@
     border-radius: var(--radius-md);
     border-width: var(--border-width);
     border-style: solid;
+    --button-text-color: var(--color-text);
     font-family: inherit;
     font-size: var(--text-sm);
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-xl-tight);
     background: var(--color-surface);
     border-color: var(--color-border-subtle);
-    color: var(--color-text);
+    color: var(--button-text-color);
     cursor: pointer;
     -webkit-text-decoration: none;
     text-decoration: none;
@@ -87,6 +88,17 @@
    2. SIZE SCALE
 --------------------------------------------------------- */
 
+.button--xs {
+    padding-top: var(--space-1_5);
+    padding-bottom: var(--space-1_5);
+    padding-left: var(--space-2_5);
+    padding-right: var(--space-2_5);
+    border-radius: var(--radius-sm);
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-semibold);
+    gap: var(--space-1_5);
+}
+
 .button--sm {
     padding-top: var(--space-1_5);
     padding-bottom: var(--space-1_5);
@@ -127,7 +139,8 @@
     height: 100%;
 }
 
-.button--icon {
+.button--icon,
+.button--icon-only {
     padding: var(--space-2);
     min-width: var(--space-8);
     min-height: var(--space-8);
@@ -141,12 +154,14 @@
     justify-content: center;
 }
 
-.button__icon--left {
-    margin-right: var(--space-2);
-}
+@supports not (gap: 1rem) {
+    .button__icon--left {
+        margin-right: var(--space-2);
+    }
 
-.button__icon--right {
-    margin-left: var(--space-2);
+    .button__icon--right {
+        margin-left: var(--space-2);
+    }
 }
 
 /* ---------------------------------------------------------
@@ -156,7 +171,7 @@
 .button--primary {
     background: var(--color-accent);
     border-color: var(--color-accent-strong);
-    color: var(--color-on-accent);
+    --button-text-color: var(--color-on-accent);
 }
 
 .button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
@@ -182,7 +197,7 @@
 .button--secondary {
     background: var(--color-surface);
     border-color: var(--color-border-subtle);
-    color: var(--color-text);
+    --button-text-color: var(--color-text);
 }
 
 .button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
@@ -203,7 +218,7 @@
 .button--soft {
     background-color: var(--color-surface-subtle);
     border-color: var(--button-soft-border, var(--color-border-subtle));
-    color: var(--button-soft-text, var(--color-text));
+    --button-text-color: var(--button-soft-text, var(--color-text));
 }
 
 .button--soft:hover:not(:disabled):not([aria-disabled="true"]) {
@@ -224,7 +239,7 @@
 .button--ghost {
     background: transparent;
     border-color: transparent;
-    color: var(--color-text);
+    --button-text-color: var(--color-text);
 }
 
 .button--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
@@ -245,17 +260,17 @@
 .button--subtle {
     background: transparent;
     border-color: transparent;
-    color: var(--color-text-muted);
+    --button-text-color: var(--color-text-muted);
 }
 
 .button--subtle:hover:not(:disabled):not([aria-disabled="true"]) {
     background: var(--color-muted-bg);
-    color: var(--color-text);
+    --button-text-color: var(--color-text);
 }
 
 .button--subtle:active:not(:disabled):not([aria-disabled="true"]) {
     background: var(--color-muted-bg);
-    color: var(--color-text);
+    --button-text-color: var(--color-text);
 }
 
 .button--subtle:focus-visible {
@@ -270,13 +285,13 @@
 .button--success {
     background: var(--color-success);
     border-color: var(--color-success-strong);
-    color: var(--color-on-success);
+    --button-text-color: var(--color-on-success);
 }
 
 .button--success:hover:not(:disabled):not([aria-disabled="true"]) {
     background-color: var(--success-soft-surface-strong, var(--color-success-soft-hover));
     border-color: var(--color-success-strong);
-    color: var(--success-soft-on);
+    --button-text-color: var(--success-soft-on);
 }
 
 .button--success:active:not(:disabled):not([aria-disabled="true"]) {
@@ -292,13 +307,13 @@
 .button--warning {
     background: var(--color-warning);
     border-color: var(--color-warning-strong);
-    color: var(--color-on-warning);
+    --button-text-color: var(--color-on-warning);
 }
 
 .button--warning:hover:not(:disabled):not([aria-disabled="true"]) {
     background-color: var(--warning-soft-surface-strong, var(--color-warning-soft-hover));
     border-color: var(--color-warning-strong);
-    color: var(--warning-soft-on);
+    --button-text-color: var(--warning-soft-on);
 }
 
 .button--warning:active:not(:disabled):not([aria-disabled="true"]) {
@@ -314,13 +329,13 @@
 .button--info {
     background: var(--color-info);
     border-color: var(--color-info-strong);
-    color: var(--color-on-info);
+    --button-text-color: var(--color-on-info);
 }
 
 .button--info:hover:not(:disabled):not([aria-disabled="true"]) {
     background-color: var(--info-soft-surface-strong, var(--color-info-soft-hover));
     border-color: var(--color-info-strong);
-    color: var(--info-soft-on);
+    --button-text-color: var(--info-soft-on);
 }
 
 .button--info:active:not(:disabled):not([aria-disabled="true"]) {
@@ -336,13 +351,13 @@
 .button--danger {
     background: var(--color-danger);
     border-color: var(--color-danger-strong);
-    color: var(--color-on-danger);
+    --button-text-color: var(--color-on-danger);
 }
 
 .button--danger:hover:not(:disabled):not([aria-disabled="true"]) {
     background-color: var(--danger-soft-surface-strong, var(--color-danger-soft-hover));
     border-color: var(--color-danger-strong);
-    color: var(--danger-soft-on);
+    --button-text-color: var(--danger-soft-on);
 }
 
 .button--danger:active:not(:disabled):not([aria-disabled="true"]) {
@@ -356,13 +371,38 @@
 }
 
 /* ---------------------------------------------------------
-   6. OUTLINE VARIANTS
+   6. NEUTRAL (SOFT SURFACE)
+--------------------------------------------------------- */
+
+.button--neutral {
+    background: var(--color-surface-subtle);
+    border-color: var(--color-border-subtle);
+    --button-text-color: var(--color-text-on-soft, var(--color-text));
+}
+
+.button--neutral:hover:not(:disabled):not([aria-disabled="true"]) {
+    background: var(--color-surface-hover);
+    border-color: var(--color-border-strong, var(--color-border-subtle));
+}
+
+.button--neutral:active:not(:disabled):not([aria-disabled="true"]) {
+    background: var(--color-surface-hover);
+    border-color: var(--color-border-strong, var(--color-border-subtle));
+}
+
+.button--neutral:focus-visible {
+    box-shadow: 0 0 0 1px var(--color-surface),
+    0 0 0 3px var(--focus-ring-color, var(--color-accent-soft));
+}
+
+/* ---------------------------------------------------------
+   7. OUTLINE VARIANTS
 --------------------------------------------------------- */
 
 .button--outline {
     background: transparent;
     border-color: var(--color-border-subtle);
-    color: var(--color-text);
+    --button-text-color: var(--color-text);
 }
 
 .button--outline:hover:not(:disabled):not([aria-disabled="true"]) {
@@ -383,7 +423,7 @@
 .button--outline-accent {
     background: transparent;
     border-color: var(--color-accent);
-    color: var(--color-accent);
+    --button-text-color: var(--color-accent);
 }
 
 .button--outline-accent:hover:not(:disabled):not([aria-disabled="true"]) {
@@ -404,7 +444,7 @@
 .button--outline-danger {
     background: transparent;
     border-color: var(--color-danger);
-    color: var(--color-danger);
+    --button-text-color: var(--color-danger);
 }
 
 .button--outline-danger:hover:not(:disabled):not([aria-disabled="true"]) {
@@ -425,7 +465,7 @@
 .button--outline-success {
     background: transparent;
     border-color: var(--color-success);
-    color: var(--color-success);
+    --button-text-color: var(--color-success);
 }
 
 .button--outline-success:hover:not(:disabled):not([aria-disabled="true"]) {
@@ -446,7 +486,7 @@
 .button--outline-warning {
     background: transparent;
     border-color: var(--color-warning);
-    color: var(--color-warning);
+    --button-text-color: var(--color-warning);
 }
 
 .button--outline-warning:hover:not(:disabled):not([aria-disabled="true"]) {
@@ -467,7 +507,7 @@
 .button--outline-info {
     background: transparent;
     border-color: var(--color-info);
-    color: var(--color-info);
+    --button-text-color: var(--color-info);
 }
 
 .button--outline-info:hover:not(:disabled):not([aria-disabled="true"]) {
@@ -486,13 +526,13 @@
 }
 
 /* ---------------------------------------------------------
-   7. LINK BUTTON
+   8. LINK BUTTON
 --------------------------------------------------------- */
 
 .button--link {
     background: transparent;
-    border-color: transparent;
-    color: var(--color-accent);
+    border: 0;
+    --button-text-color: var(--color-accent);
     padding-left: 0;
     padding-right: 0;
     padding-top: 0;
@@ -528,7 +568,7 @@
 }
 
 /* ---------------------------------------------------------
-   8. LOADING STATE
+   9. LOADING STATE
 --------------------------------------------------------- */
 
 .button--loading {
@@ -568,7 +608,7 @@
 }
 
 /* ---------------------------------------------------------
-   9. REDUCED MOTION
+   10. REDUCED MOTION
 --------------------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {
@@ -583,7 +623,7 @@
 }
 
 /* ---------------------------------------------------------
-   10. HELPERS
+   11. HELPERS
 --------------------------------------------------------- */
 
 .button--contrast-hover:hover:not(:disabled):not([aria-disabled="true"]) {
@@ -591,15 +631,23 @@
     border-color: currentColor;
 }
 
+.button--lift:hover:not(:disabled):not([aria-disabled="true"]) {
+    transform: translateY(-1px);
+}
+
+.button--lift:active:not(:disabled):not([aria-disabled="true"]) {
+    transform: translateY(0);
+}
+
 /* ---------------------------------------------------------
-   11. LINK RESETS
+   12. LINK RESETS
 --------------------------------------------------------- */
 
 a.button,
 a.button:hover,
 a.button:focus,
 a.button:active {
-    color: inherit;
+    color: var(--button-text-color, var(--color-text));
     -webkit-text-decoration: none;
     text-decoration: none;
 }
@@ -614,67 +662,11 @@ a.button[aria-disabled="true"]:active {
     text-decoration: none;
 }
 
-a.button--primary,
-a.button--primary:hover,
-a.button--primary:focus,
-a.button--primary:active {
-    color: var(--color-on-accent);
-}
-
-a.button--secondary,
-a.button--secondary:hover,
-a.button--secondary:focus,
-a.button--secondary:active {
-    color: var(--color-accent-strong);
-}
-
-a.button--ghost,
-a.button--ghost:hover,
-a.button--ghost:focus,
-a.button--ghost:active {
-    color: var(--color-accent-soft);
-}
-
-a.button--subtle,
-a.button--subtle:hover,
-a.button--subtle:focus,
-a.button--subtle:active {
-    color: var(--color-text);
-}
-
-a.button--neutral,
-a.button--neutral:hover,
-a.button--neutral:focus,
-a.button--neutral:active {
-    color: var(--color-text-on-soft);
-}
-
-a.button--danger,
-a.button--danger:hover,
-a.button--danger:focus,
-a.button--danger:active {
-    color: var(--color-on-danger);
-}
-
-a.button--warning,
-a.button--warning:hover,
-a.button--warning:focus,
-a.button--warning:active {
-    color: var(--color-on-warning);
-}
-
-a.button--success,
-a.button--success:hover,
-a.button--success:focus,
-a.button--success:active {
-    color: var(--color-on-success);
-}
-
-a.button--info,
-a.button--info:hover,
-a.button--info:focus,
-a.button--info:active {
-    color: var(--color-on-info);
+a.button--link:hover,
+a.button--link:focus,
+a.button--link:active {
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
 }
 
 a.button:hover {

package/dist/components/buttons.min.css

@@ -1 +1 @@
-.button{align-items:center;background:var(--color-surface);border-color:var(--color-border-subtle);border-radius:var(--radius-md);border-style:solid;border-width:var(--border-width);color:var(--color-text);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--text-sm);font-weight:var(--font-weight-medium);gap:var(--space-2);justify-content:center;line-height:var(--line-height-xl-tight);padding:var(--space-2_5) var(--space-5);-webkit-text-decoration:none;text-decoration:none;transition:background-color var(--transition-normal),border-color var(--transition-normal),color var(--transition-normal),box-shadow var(--transition-normal),transform var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:normal}.button:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft));outline:none}.button:active:not(:disabled):not([aria-disabled=true]),.button:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-subtle,var(--color-muted-bg))}.button:active:not(:disabled):not([aria-disabled=true]){border-color:var(--color-border-strong,var(--color-border-subtle));transform:translateY(1px)}.button:disabled,.button[aria-disabled=true]{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle);box-shadow:none;color:var(--color-text-muted);cursor:not-allowed;opacity:.6;transform:none}.button--selected,.button[aria-pressed=true]{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--sm{padding:var(--space-1_5) var(--space-3)}.button--md{padding:var(--space-2_5) var(--space-5)}.button--lg{padding:var(--space-3_5) var(--space-7)}.button--nowrap{white-space:nowrap}.button--block{align-items:center;display:flex;justify-content:center;width:100%}.button--full-height{height:100%}.button--icon{border-radius:var(--radius-full);min-height:var(--space-8);min-width:var(--space-8);padding:var(--space-2)}.button__icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.button__icon--left{margin-right:var(--space-2)}.button__icon--right{margin-left:var(--space-2)}.button--primary{background:var(--color-accent);border-color:var(--color-accent-strong);color:var(--color-on-accent)}.button--primary:active:not(:disabled):not([aria-disabled=true]),.button--primary:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-accent-strong);border-color:var(--color-accent-strong)}.button--primary:focus-visible{box-shadow:0 0 0 1px var(--color-accent-strong),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--primary:active:focus-visible{box-shadow:0 0 0 1px var(--color-accent-strong),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--secondary{background:var(--color-surface);border-color:var(--color-border-subtle);color:var(--color-text)}.button--secondary:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-subtle,var(--color-muted-bg));border-color:var(--color-border-subtle)}.button--secondary:active:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-subtle,var(--color-muted-bg));border-color:var(--color-border-strong,var(--color-border-subtle))}.button--secondary:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--soft{background-color:var(--color-surface-subtle);border-color:var(--button-soft-border,var(--color-border-subtle));color:var(--button-soft-text,var(--color-text))}.button--soft:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-accent-soft-hover,var(--color-accent-soft));border-color:var(--button-soft-border-hover,var(--color-border-strong))}.button--soft:active:not(:disabled):not([aria-disabled=true]){background:var(--color-accent-soft-hover,var(--color-accent-soft));border-color:transparent}.button--soft:focus-visible{box-shadow:0 0 0 1px var(--color-accent-soft),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--ghost{background:transparent;border-color:transparent;color:var(--color-text)}.button--ghost:active:not(:disabled):not([aria-disabled=true]),.button--ghost:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-muted-bg);border-color:transparent}.button--ghost:focus-visible{box-shadow:0 0 0 1px var(--color-muted-bg),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--subtle{background:transparent;border-color:transparent;color:var(--color-text-muted)}.button--subtle:active:not(:disabled):not([aria-disabled=true]),.button--subtle:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-muted-bg);color:var(--color-text)}.button--subtle:focus-visible{box-shadow:0 0 0 1px var(--color-muted-bg),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--success{background:var(--color-success);border-color:var(--color-success-strong);color:var(--color-on-success)}.button--success:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--success-soft-surface-strong,var(--color-success-soft-hover));border-color:var(--color-success-strong);color:var(--success-soft-on)}.button--success:active:not(:disabled):not([aria-disabled=true]){background:var(--color-success-strong);border-color:var(--color-success-strong)}.button--success:focus-visible{box-shadow:0 0 0 1px var(--color-success-strong),0 0 0 3px var(--focus-ring-color,var(--color-success-soft))}.button--warning{background:var(--color-warning);border-color:var(--color-warning-strong);color:var(--color-on-warning)}.button--warning:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--warning-soft-surface-strong,var(--color-warning-soft-hover));border-color:var(--color-warning-strong);color:var(--warning-soft-on)}.button--warning:active:not(:disabled):not([aria-disabled=true]){background:var(--color-warning-strong);border-color:var(--color-warning-strong)}.button--warning:focus-visible{box-shadow:0 0 0 1px var(--color-warning-strong),0 0 0 3px var(--focus-ring-color,var(--color-warning-soft))}.button--info{background:var(--color-info);border-color:var(--color-info-strong);color:var(--color-on-info)}.button--info:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--info-soft-surface-strong,var(--color-info-soft-hover));border-color:var(--color-info-strong);color:var(--info-soft-on)}.button--info:active:not(:disabled):not([aria-disabled=true]){background:var(--color-info-strong);border-color:var(--color-info-strong)}.button--info:focus-visible{box-shadow:0 0 0 1px var(--color-info-strong),0 0 0 3px var(--focus-ring-color,var(--color-info-soft))}.button--danger{background:var(--color-danger);border-color:var(--color-danger-strong);color:var(--color-on-danger)}.button--danger:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--danger-soft-surface-strong,var(--color-danger-soft-hover));border-color:var(--color-danger-strong);color:var(--danger-soft-on)}.button--danger:active:not(:disabled):not([aria-disabled=true]){background:var(--color-danger-strong);border-color:var(--color-danger-strong)}.button--danger:focus-visible{box-shadow:0 0 0 1px var(--color-danger-strong),0 0 0 3px var(--focus-ring-color,var(--color-danger-soft))}.button--outline{background:transparent;border-color:var(--color-border-subtle);color:var(--color-text)}.button--outline:active:not(:disabled):not([aria-disabled=true]),.button--outline:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-subtle,var(--color-muted-bg));border-color:var(--color-border-strong,var(--color-border-subtle))}.button--outline:focus-visible{box-shadow:0 0 0 1px var(--color-border-strong,var(--color-border-subtle)),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--outline-accent{background:transparent;border-color:var(--color-accent);color:var(--color-accent)}.button--outline-accent:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--button-outline-accent-hover-bg);border-color:var(--button-outline-accent-hover-border,var(--color-accent-strong))}.button--outline-accent:active:not(:disabled):not([aria-disabled=true]){background:var(--color-accent-soft);border-color:var(--color-accent-strong)}.button--outline-accent:focus-visible{box-shadow:0 0 0 1px var(--color-accent-strong),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--outline-danger{background:transparent;border-color:var(--color-danger);color:var(--color-danger)}.button--outline-danger:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--button-outline-danger-hover-bg);border-color:var(--button-outline-danger-hover-border,var(--color-danger-strong))}.button--outline-danger:active:not(:disabled):not([aria-disabled=true]){background:var(--color-danger-soft);border-color:var(--color-danger-strong)}.button--outline-danger:focus-visible{box-shadow:0 0 0 1px var(--color-danger-strong),0 0 0 3px var(--focus-ring-color,var(--color-danger-soft))}.button--outline-success{background:transparent;border-color:var(--color-success);color:var(--color-success)}.button--outline-success:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--button-outline-success-hover-bg);border-color:var(--button-outline-success-hover-border,var(--color-success-strong))}.button--outline-success:active:not(:disabled):not([aria-disabled=true]){background:var(--color-success-soft);border-color:var(--color-success-strong)}.button--outline-success:focus-visible{box-shadow:0 0 0 1px var(--color-success-strong),0 0 0 3px var(--focus-ring-color,var(--color-success-soft))}.button--outline-warning{background:transparent;border-color:var(--color-warning);color:var(--color-warning)}.button--outline-warning:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--button-outline-warning-hover-bg);border-color:var(--button-outline-warning-hover-border,var(--color-warning-strong))}.button--outline-warning:active:not(:disabled):not([aria-disabled=true]){background:var(--color-warning-soft);border-color:var(--color-warning-strong)}.button--outline-warning:focus-visible{box-shadow:0 0 0 1px var(--color-warning-strong),0 0 0 3px var(--focus-ring-color,var(--color-warning-soft))}.button--outline-info{background:transparent;border-color:var(--color-info);color:var(--color-info)}.button--outline-info:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--button-outline-info-hover-bg);border-color:var(--button-outline-info-hover-border,var(--color-info-strong))}.button--outline-info:active:not(:disabled):not([aria-disabled=true]){background:var(--color-info-soft);border-color:var(--color-info-strong)}.button--outline-info:focus-visible{box-shadow:0 0 0 1px var(--color-info-strong),0 0 0 3px var(--focus-ring-color,var(--color-info-soft))}.button--link{background:transparent;border-color:transparent;color:var(--color-accent);font-weight:500;padding:0}.button--link:active:not(:disabled):not([aria-disabled=true]),.button--link:hover:not(:disabled):not([aria-disabled=true]){background:transparent;-webkit-text-decoration:underline;text-decoration:underline}.button--link:focus-visible{box-shadow:0 0 0 1px transparent,0 0 0 3px var(--focus-ring-color,var(--color-accent-soft));-webkit-text-decoration:underline;text-decoration:underline}.button--link:disabled,.button--link[aria-disabled=true]{cursor:not-allowed;opacity:.6;-webkit-text-decoration:none;text-decoration:none}.button--loading{pointer-events:none;position:relative}.button--loading>*{visibility:hidden}.button--loading:after{animation:button-spinner .8s linear infinite;border:2px solid;border-radius:50%;border-top:2px solid transparent;bottom:0;content:"";height:1em;left:0;margin:auto;position:absolute;right:0;top:0;width:1em}.button--loading:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}@keyframes button-spinner{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.button{transition:none}.button--loading:after{animation:none;border-top-color:currentColor}}.button--contrast-hover:hover:not(:disabled):not([aria-disabled=true]){background:rgba(0,0,0,.12);border-color:currentColor}a.button,a.button:active,a.button:focus,a.button:hover{color:inherit;-webkit-text-decoration:none;text-decoration:none}a.button[aria-disabled=true],a.button[aria-disabled=true]:active,a.button[aria-disabled=true]:focus,a.button[aria-disabled=true]:hover{color:var(--color-text-muted);pointer-events:none;-webkit-text-decoration:none;text-decoration:none}a.button--primary,a.button--primary:active,a.button--primary:focus,a.button--primary:hover{color:var(--color-on-accent)}a.button--secondary,a.button--secondary:active,a.button--secondary:focus,a.button--secondary:hover{color:var(--color-accent-strong)}a.button--ghost,a.button--ghost:active,a.button--ghost:focus,a.button--ghost:hover{color:var(--color-accent-soft)}a.button--subtle,a.button--subtle:active,a.button--subtle:focus,a.button--subtle:hover{color:var(--color-text)}a.button--neutral,a.button--neutral:active,a.button--neutral:focus,a.button--neutral:hover{color:var(--color-text-on-soft)}a.button--danger,a.button--danger:active,a.button--danger:focus,a.button--danger:hover{color:var(--color-on-danger)}a.button--warning,a.button--warning:active,a.button--warning:focus,a.button--warning:hover{color:var(--color-on-warning)}a.button--success,a.button--success:active,a.button--success:focus,a.button--success:hover{color:var(--color-on-success)}a.button--info,a.button--info:active,a.button--info:focus,a.button--info:hover{color:var(--color-on-info)}a.button:hover{-webkit-text-decoration:none;text-decoration:none}
+.button{--button-text-color:var(--color-text);align-items:center;background:var(--color-surface);border-color:var(--color-border-subtle);border-radius:var(--radius-md);border-style:solid;border-width:var(--border-width);color:var(--button-text-color);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--text-sm);font-weight:var(--font-weight-medium);gap:var(--space-2);justify-content:center;line-height:var(--line-height-xl-tight);padding:var(--space-2_5) var(--space-5);-webkit-text-decoration:none;text-decoration:none;transition:background-color var(--transition-normal),border-color var(--transition-normal),color var(--transition-normal),box-shadow var(--transition-normal),transform var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:normal}.button:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft));outline:none}.button:active:not(:disabled):not([aria-disabled=true]),.button:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-subtle,var(--color-muted-bg))}.button:active:not(:disabled):not([aria-disabled=true]){border-color:var(--color-border-strong,var(--color-border-subtle));transform:translateY(1px)}.button:disabled,.button[aria-disabled=true]{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle);box-shadow:none;color:var(--color-text-muted);cursor:not-allowed;opacity:.6;transform:none}.button--selected,.button[aria-pressed=true]{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--xs{border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);gap:var(--space-1_5);padding:var(--space-1_5) var(--space-2_5)}.button--sm{padding:var(--space-1_5) var(--space-3)}.button--md{padding:var(--space-2_5) var(--space-5)}.button--lg{padding:var(--space-3_5) var(--space-7)}.button--nowrap{white-space:nowrap}.button--block{align-items:center;display:flex;justify-content:center;width:100%}.button--full-height{height:100%}.button--icon,.button--icon-only{border-radius:var(--radius-full);min-height:var(--space-8);min-width:var(--space-8);padding:var(--space-2)}.button__icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}@supports not (gap:1rem){.button__icon--left{margin-right:var(--space-2)}.button__icon--right{margin-left:var(--space-2)}}.button--primary{--button-text-color:var(--color-on-accent);background:var(--color-accent);border-color:var(--color-accent-strong)}.button--primary:active:not(:disabled):not([aria-disabled=true]),.button--primary:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-accent-strong);border-color:var(--color-accent-strong)}.button--primary:focus-visible{box-shadow:0 0 0 1px var(--color-accent-strong),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--primary:active:focus-visible{box-shadow:0 0 0 1px var(--color-accent-strong),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--secondary{--button-text-color:var(--color-text);background:var(--color-surface);border-color:var(--color-border-subtle)}.button--secondary:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-subtle,var(--color-muted-bg));border-color:var(--color-border-subtle)}.button--secondary:active:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-subtle,var(--color-muted-bg));border-color:var(--color-border-strong,var(--color-border-subtle))}.button--secondary:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--soft{--button-text-color:var(--button-soft-text,var(--color-text));background-color:var(--color-surface-subtle);border-color:var(--button-soft-border,var(--color-border-subtle))}.button--soft:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-accent-soft-hover,var(--color-accent-soft));border-color:var(--button-soft-border-hover,var(--color-border-strong))}.button--soft:active:not(:disabled):not([aria-disabled=true]){background:var(--color-accent-soft-hover,var(--color-accent-soft));border-color:transparent}.button--soft:focus-visible{box-shadow:0 0 0 1px var(--color-accent-soft),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--ghost{--button-text-color:var(--color-text);background:transparent;border-color:transparent}.button--ghost:active:not(:disabled):not([aria-disabled=true]),.button--ghost:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-muted-bg);border-color:transparent}.button--ghost:focus-visible{box-shadow:0 0 0 1px var(--color-muted-bg),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--subtle{--button-text-color:var(--color-text-muted);background:transparent;border-color:transparent}.button--subtle:active:not(:disabled):not([aria-disabled=true]),.button--subtle:hover:not(:disabled):not([aria-disabled=true]){--button-text-color:var(--color-text);background:var(--color-muted-bg)}.button--subtle:focus-visible{box-shadow:0 0 0 1px var(--color-muted-bg),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--success{--button-text-color:var(--color-on-success);background:var(--color-success);border-color:var(--color-success-strong)}.button--success:hover:not(:disabled):not([aria-disabled=true]){--button-text-color:var(--success-soft-on);background-color:var(--success-soft-surface-strong,var(--color-success-soft-hover));border-color:var(--color-success-strong)}.button--success:active:not(:disabled):not([aria-disabled=true]){background:var(--color-success-strong);border-color:var(--color-success-strong)}.button--success:focus-visible{box-shadow:0 0 0 1px var(--color-success-strong),0 0 0 3px var(--focus-ring-color,var(--color-success-soft))}.button--warning{--button-text-color:var(--color-on-warning);background:var(--color-warning);border-color:var(--color-warning-strong)}.button--warning:hover:not(:disabled):not([aria-disabled=true]){--button-text-color:var(--warning-soft-on);background-color:var(--warning-soft-surface-strong,var(--color-warning-soft-hover));border-color:var(--color-warning-strong)}.button--warning:active:not(:disabled):not([aria-disabled=true]){background:var(--color-warning-strong);border-color:var(--color-warning-strong)}.button--warning:focus-visible{box-shadow:0 0 0 1px var(--color-warning-strong),0 0 0 3px var(--focus-ring-color,var(--color-warning-soft))}.button--info{--button-text-color:var(--color-on-info);background:var(--color-info);border-color:var(--color-info-strong)}.button--info:hover:not(:disabled):not([aria-disabled=true]){--button-text-color:var(--info-soft-on);background-color:var(--info-soft-surface-strong,var(--color-info-soft-hover));border-color:var(--color-info-strong)}.button--info:active:not(:disabled):not([aria-disabled=true]){background:var(--color-info-strong);border-color:var(--color-info-strong)}.button--info:focus-visible{box-shadow:0 0 0 1px var(--color-info-strong),0 0 0 3px var(--focus-ring-color,var(--color-info-soft))}.button--danger{--button-text-color:var(--color-on-danger);background:var(--color-danger);border-color:var(--color-danger-strong)}.button--danger:hover:not(:disabled):not([aria-disabled=true]){--button-text-color:var(--danger-soft-on);background-color:var(--danger-soft-surface-strong,var(--color-danger-soft-hover));border-color:var(--color-danger-strong)}.button--danger:active:not(:disabled):not([aria-disabled=true]){background:var(--color-danger-strong);border-color:var(--color-danger-strong)}.button--danger:focus-visible{box-shadow:0 0 0 1px var(--color-danger-strong),0 0 0 3px var(--focus-ring-color,var(--color-danger-soft))}.button--neutral{--button-text-color:var(--color-text-on-soft,var(--color-text));background:var(--color-surface-subtle);border-color:var(--color-border-subtle)}.button--neutral:active:not(:disabled):not([aria-disabled=true]),.button--neutral:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-hover);border-color:var(--color-border-strong,var(--color-border-subtle))}.button--neutral:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--outline{--button-text-color:var(--color-text);background:transparent;border-color:var(--color-border-subtle)}.button--outline:active:not(:disabled):not([aria-disabled=true]),.button--outline:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-subtle,var(--color-muted-bg));border-color:var(--color-border-strong,var(--color-border-subtle))}.button--outline:focus-visible{box-shadow:0 0 0 1px var(--color-border-strong,var(--color-border-subtle)),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--outline-accent{--button-text-color:var(--color-accent);background:transparent;border-color:var(--color-accent)}.button--outline-accent:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--button-outline-accent-hover-bg);border-color:var(--button-outline-accent-hover-border,var(--color-accent-strong))}.button--outline-accent:active:not(:disabled):not([aria-disabled=true]){background:var(--color-accent-soft);border-color:var(--color-accent-strong)}.button--outline-accent:focus-visible{box-shadow:0 0 0 1px var(--color-accent-strong),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--outline-danger{--button-text-color:var(--color-danger);background:transparent;border-color:var(--color-danger)}.button--outline-danger:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--button-outline-danger-hover-bg);border-color:var(--button-outline-danger-hover-border,var(--color-danger-strong))}.button--outline-danger:active:not(:disabled):not([aria-disabled=true]){background:var(--color-danger-soft);border-color:var(--color-danger-strong)}.button--outline-danger:focus-visible{box-shadow:0 0 0 1px var(--color-danger-strong),0 0 0 3px var(--focus-ring-color,var(--color-danger-soft))}.button--outline-success{--button-text-color:var(--color-success);background:transparent;border-color:var(--color-success)}.button--outline-success:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--button-outline-success-hover-bg);border-color:var(--button-outline-success-hover-border,var(--color-success-strong))}.button--outline-success:active:not(:disabled):not([aria-disabled=true]){background:var(--color-success-soft);border-color:var(--color-success-strong)}.button--outline-success:focus-visible{box-shadow:0 0 0 1px var(--color-success-strong),0 0 0 3px var(--focus-ring-color,var(--color-success-soft))}.button--outline-warning{--button-text-color:var(--color-warning);background:transparent;border-color:var(--color-warning)}.button--outline-warning:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--button-outline-warning-hover-bg);border-color:var(--button-outline-warning-hover-border,var(--color-warning-strong))}.button--outline-warning:active:not(:disabled):not([aria-disabled=true]){background:var(--color-warning-soft);border-color:var(--color-warning-strong)}.button--outline-warning:focus-visible{box-shadow:0 0 0 1px var(--color-warning-strong),0 0 0 3px var(--focus-ring-color,var(--color-warning-soft))}.button--outline-info{--button-text-color:var(--color-info);background:transparent;border-color:var(--color-info)}.button--outline-info:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--button-outline-info-hover-bg);border-color:var(--button-outline-info-hover-border,var(--color-info-strong))}.button--outline-info:active:not(:disabled):not([aria-disabled=true]){background:var(--color-info-soft);border-color:var(--color-info-strong)}.button--outline-info:focus-visible{box-shadow:0 0 0 1px var(--color-info-strong),0 0 0 3px var(--focus-ring-color,var(--color-info-soft))}.button--link{--button-text-color:var(--color-accent);background:transparent;border:0;font-weight:500;padding:0}.button--link:active:not(:disabled):not([aria-disabled=true]),.button--link:hover:not(:disabled):not([aria-disabled=true]){background:transparent;-webkit-text-decoration:underline;text-decoration:underline}.button--link:focus-visible{box-shadow:0 0 0 1px transparent,0 0 0 3px var(--focus-ring-color,var(--color-accent-soft));-webkit-text-decoration:underline;text-decoration:underline}.button--link:disabled,.button--link[aria-disabled=true]{cursor:not-allowed;opacity:.6;-webkit-text-decoration:none;text-decoration:none}.button--loading{pointer-events:none;position:relative}.button--loading>*{visibility:hidden}.button--loading:after{animation:button-spinner .8s linear infinite;border:2px solid;border-radius:50%;border-top:2px solid transparent;bottom:0;content:"";height:1em;left:0;margin:auto;position:absolute;right:0;top:0;width:1em}.button--loading:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}@keyframes button-spinner{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.button{transition:none}.button--loading:after{animation:none;border-top-color:currentColor}}.button--contrast-hover:hover:not(:disabled):not([aria-disabled=true]){background:rgba(0,0,0,.12);border-color:currentColor}.button--lift:hover:not(:disabled):not([aria-disabled=true]){transform:translateY(-1px)}.button--lift:active:not(:disabled):not([aria-disabled=true]){transform:translateY(0)}a.button,a.button:active,a.button:focus,a.button:hover{color:var(--button-text-color,var(--color-text));-webkit-text-decoration:none;text-decoration:none}a.button[aria-disabled=true],a.button[aria-disabled=true]:active,a.button[aria-disabled=true]:focus,a.button[aria-disabled=true]:hover{color:var(--color-text-muted);pointer-events:none;-webkit-text-decoration:none;text-decoration:none}a.button--link:active,a.button--link:focus,a.button--link:hover{-webkit-text-decoration:underline;text-decoration:underline}a.button:hover{-webkit-text-decoration:none;text-decoration:none}