@adia-ai/web-components 0.6.33 → 0.6.34

package/components/card/card.css

@@ -7,58 +7,58 @@
 @scope (card-ui) {
   :where(:scope) {
     /* ── Spacing ── */
-    --card-inset:             var(--a-inset);
-    --card-gap:               var(--a-gap);
-    --card-header-gap:        var(--a-space-2);
-    --card-footer-gap:        var(--a-space-2);
+    --card-inset-default:             var(--a-inset);
+    --card-gap-default:               var(--a-gap);
+    --card-header-gap-default:        var(--a-space-2);
+    --card-footer-gap-default:        var(--a-space-2);
 
     /* ── Radius ── */
-    --card-radius:            var(--a-radius-lg);
+    --card-radius-default:            var(--a-radius-lg);
 
     /* ── Typography ── */
-    --card-font-size:         var(--a-body-size);
-    --card-description-size:  var(--a-caption-size);
+    --card-font-size-default:         var(--a-body-size);
+    --card-description-size-default:  var(--a-caption-size);
 
     /* ── Colors ── */
-    --card-bg:                var(--a-canvas-1);
-    --card-bg-padded:         var(--a-canvas-0-scrim);
-    --card-fg:                var(--a-fg);
-    --card-heading-fg:        var(--a-fg-strong);
-    --card-description-fg:    var(--a-fg-subtle);
-    --card-border:            1px solid var(--a-border-subtle);
-    --card-divider:           var(--a-border-subtle);
-    --card-shadow:            var(--a-shadow-sm);
+    --card-bg-default:                var(--a-canvas-1);
+    --card-bg-padded-default:         var(--a-canvas-0-scrim);
+    --card-fg-default:                var(--a-fg);
+    --card-heading-fg-default:        var(--a-fg-strong);
+    --card-description-fg-default:    var(--a-fg-subtle);
+    --card-border-default:            1px solid var(--a-border-subtle);
+    --card-divider-default:           var(--a-border-subtle);
+    --card-shadow-default:            var(--a-shadow-sm);
 
     /* ── Loading ring ──
        The mask composition below uses an opaque source (masks are intensity-only,
        not theme-colored). `--a-chrome-light` is our theme-stable opaque white token.
        The visible ring color comes from the accent token. */
-    --card-loading-ring:      var(--a-accent-bg);
-    --card-loading-mask-color: var(--a-chrome-light);
+    --card-loading-ring-default:      var(--a-accent-bg);
+    --card-loading-mask-color-default: var(--a-chrome-light);
 
     /* ── Elevation ── */
-    --card-shadow-0:          none;
-    --card-shadow-1:          var(--a-shadow-sm);
-    --card-shadow-2:          var(--a-shadow-md);
-    --card-shadow-3:          var(--a-shadow-lg);
+    --card-shadow-0-default:          none;
+    --card-shadow-1-default:          var(--a-shadow-sm);
+    --card-shadow-2-default:          var(--a-shadow-md);
+    --card-shadow-3-default:          var(--a-shadow-lg);
 
     /* ── Loading motion ── */
-    --card-loading-duration:  1.5s;
-    --card-loading-easing:    linear;
+    --card-loading-duration-default:  1.5s;
+    --card-loading-easing-default:    linear;
 
     /* ── Draggable ── */
-    --card-drag-bg-active:    var(--a-accent-muted);
+    --card-drag-bg-active-default:    var(--a-accent-muted);
   }
 
   :scope {
     box-sizing: border-box;
     display: block;
-    border-radius: var(--card-radius);
-    background: var(--card-bg);
-    color: var(--card-fg);
-    font-size: var(--card-font-size);
-    border: var(--card-border);
-    box-shadow: var(--card-shadow);
+    border-radius: var(--card-radius, var(--card-radius-default));
+    background: var(--card-bg, var(--card-bg-default));
+    color: var(--card-fg, var(--card-fg-default));
+    font-size: var(--card-font-size, var(--card-font-size-default));
+    border: var(--card-border, var(--card-border-default));
+    box-shadow: var(--card-shadow, var(--card-shadow-default));
     overflow: hidden;
     corner-shape: superellipse(1.1);
     width: stretch;
@@ -67,33 +67,33 @@
   /* ═══════ Variants — token-only overrides ═══════ */
 
   :scope[variant="outlined"] {
-    --card-bg: transparent;
-    --card-shadow: none;
-    --card-border: 1px solid var(--a-border);
+    --card-bg-default: transparent;
+    --card-shadow-default: none;
+    --card-border-default: 1px solid var(--a-border);
   }
 
   :scope[variant="filled"] {
-    --card-shadow: none;
-    --card-border: none;
+    --card-shadow-default: none;
+    --card-border-default: none;
   }
 
   :scope[variant="ghost"] {
-    --card-bg: transparent;
-    --card-shadow: none;
-    --card-border: none;
+    --card-bg-default: transparent;
+    --card-shadow-default: none;
+    --card-border-default: none;
   }
 
   /* ═══════ Elevation — token override ═══════ */
 
-  :scope[elevation="0"] { --card-shadow: var(--card-shadow-0); }
-  :scope[elevation="1"] { --card-shadow: var(--card-shadow-1); }
-  :scope[elevation="2"] { --card-shadow: var(--card-shadow-2); }
-  :scope[elevation="3"] { --card-shadow: var(--card-shadow-3); }
+  :scope[elevation="0"] { --card-shadow-default: var(--card-shadow-0, var(--card-shadow-0-default)); }
+  :scope[elevation="1"] { --card-shadow-default: var(--card-shadow-1, var(--card-shadow-1-default)); }
+  :scope[elevation="2"] { --card-shadow-default: var(--card-shadow-2, var(--card-shadow-2-default)); }
+  :scope[elevation="3"] { --card-shadow-default: var(--card-shadow-3, var(--card-shadow-3-default)); }
 
   /* ═══════ Loading ═══════ */
 
   :scope[loading] {
-    --card-border: 1px solid transparent;
+    --card-border-default: 1px solid transparent;
     position: relative;
   }
 
@@ -106,14 +106,14 @@
     background: conic-gradient(
       from var(--_card-loading-angle, 0deg),
       transparent 0deg,
-      var(--card-loading-ring) 90deg,
+      var(--card-loading-ring, var(--card-loading-ring-default)) 90deg,
       transparent 180deg
     );
-    -webkit-mask: linear-gradient(var(--card-loading-mask-color) 0 0) content-box, linear-gradient(var(--card-loading-mask-color) 0 0);
-            mask: linear-gradient(var(--card-loading-mask-color) 0 0) content-box, linear-gradient(var(--card-loading-mask-color) 0 0);
+    -webkit-mask: linear-gradient(var(--card-loading-mask-color, var(--card-loading-mask-color-default)) 0 0) content-box, linear-gradient(var(--card-loading-mask-color, var(--card-loading-mask-color-default)) 0 0);
+            mask: linear-gradient(var(--card-loading-mask-color, var(--card-loading-mask-color-default)) 0 0) content-box, linear-gradient(var(--card-loading-mask-color, var(--card-loading-mask-color-default)) 0 0);
     -webkit-mask-composite: xor;
             mask-composite: exclude;
-    animation: card-loading-spin var(--card-loading-duration) var(--card-loading-easing) infinite;
+    animation: card-loading-spin var(--card-loading-duration, var(--card-loading-duration-default)) var(--card-loading-easing, var(--card-loading-easing-default)) infinite;
     pointer-events: none;
     z-index: 1;
   }
@@ -125,10 +125,10 @@
   /* ═══════ Raw (no chrome) — token overrides ═══════ */
 
   :scope[raw] {
-    --card-bg: none;
-    --card-border: none;
-    --card-radius: 0;
-    --card-shadow: none;
+    --card-bg-default: none;
+    --card-border-default: none;
+    --card-radius-default: 0;
+    --card-shadow-default: none;
   }
 
   /* ═══════ Draggable ═══════ */
@@ -141,7 +141,7 @@
   :scope[draggable]:active,
   :scope[draggable][data-draggable-dragging] {
     cursor: grabbing;
-    background: var(--card-drag-bg-active);
+    background: var(--card-drag-bg-active, var(--card-drag-bg-active-default));
   }
 
   /* ═══════ Header ═══════
@@ -151,7 +151,7 @@
 
   & > header {
     display: block;
-    margin: var(--card-inset);
+    margin: var(--card-inset, var(--card-inset-default));
   }
 
   /* Activate grid layout only when a DIRECT slotted child is present.
@@ -159,19 +159,19 @@
      [slot="icon"] inside an <avatar-ui>) from falsely activating the grid. */
   & > header:has(> [slot]) {
     display: grid;
-    gap: var(--card-header-gap);
+    gap: var(--card-header-gap, var(--card-header-gap-default));
     align-items: center;
   }
 
   & > header[padding] {
     margin: 0;
-    padding: var(--card-inset);
-    background: var(--card-bg-padded);
+    padding: var(--card-inset, var(--card-inset-default));
+    background: var(--card-bg-padded, var(--card-bg-padded-default));
   }
 
   & > header[divider] {
-    padding-bottom: var(--card-inset);
-    border-bottom: 1px solid var(--card-divider);
+    padding-bottom: var(--card-inset, var(--card-inset-default));
+    border-bottom: 1px solid var(--card-divider, var(--card-divider-default));
   }
 
   & > header[center] {
@@ -229,7 +229,7 @@
   & > header > [slot="heading"] {
     display: flex;
     align-items: center;
-    gap: var(--card-header-gap);
+    gap: var(--card-header-gap, var(--card-header-gap-default));
   }
   & > header:has(> [slot="icon"]) > :is([slot="heading"], h1, h2, h3, h4, h5, h6) { grid-column: 2; }
   & > header:not(:has(> [slot="icon"])) > :is([slot="heading"], h1, h2, h3, h4, h5, h6) { grid-column: 1; }
@@ -252,7 +252,7 @@
     grid-column: -2 / -1;
     display: flex;
     align-items: center;
-    gap: var(--card-header-gap);
+    gap: var(--card-header-gap, var(--card-header-gap-default));
     min-width: 0; /* allow flex children (segmented-ui, button) to shrink */
   }
 
@@ -262,13 +262,13 @@
      [bleed] removes all spacing for edge-to-edge content. */
 
   & > section {
-    margin: var(--card-inset);
+    margin: var(--card-inset, var(--card-inset-default));
   }
 
   & > section[padding] {
     margin: 0;
-    padding: var(--card-inset);
-    background: var(--card-bg-padded);
+    padding: var(--card-inset, var(--card-inset-default));
+    background: var(--card-bg-padded, var(--card-bg-padded-default));
   }
 
   & > section[bleed] {
@@ -299,7 +299,7 @@
 
   & > footer {
     display: block;
-    margin: var(--card-inset);
+    margin: var(--card-inset, var(--card-inset-default));
   }
 
   /* Activate flex layout when a direct slotted child or multiple children are
@@ -310,7 +310,7 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--card-footer-gap);
+    gap: var(--card-footer-gap, var(--card-footer-gap-default));
   }
 
   /* col-ui in footer takes full width (common for stacked footer: button + divider + social) */
@@ -321,15 +321,15 @@
   }
 
   & > footer[divider] {
-    margin-top: var(--card-inset);
-    padding-top: var(--card-inset);
-    border-top: 1px solid var(--card-divider);
+    margin-top: var(--card-inset, var(--card-inset-default));
+    padding-top: var(--card-inset, var(--card-inset-default));
+    border-top: 1px solid var(--card-divider, var(--card-divider-default));
   }
 
   & > footer[padding] {
     margin: 0;
-    padding: var(--card-inset);
-    background: var(--card-bg-padded);
+    padding: var(--card-inset, var(--card-inset-default));
+    background: var(--card-bg-padded, var(--card-bg-padded-default));
   }
 
   /* Footer with direct-child description + action = space-between */
@@ -338,8 +338,8 @@
   }
 
   & > footer :is([slot="description"], p, small) {
-    font-size: var(--card-description-size);
-    color: var(--card-description-fg);
+    font-size: var(--card-description-size, var(--card-description-size-default));
+    color: var(--card-description-fg, var(--card-description-fg-default));
     flex: 1;
     min-width: 0;
     margin: 0;
@@ -349,9 +349,9 @@
      Used for chart trend-footer patterns like "Trending up by 5.2% this month".
      Paired with [slot="description"] for a "Jan – Mar 2024" period caption. */
   & > footer > [slot="heading"] {
-    font-size: var(--card-font-size);
+    font-size: var(--card-font-size, var(--card-font-size-default));
     font-weight: var(--a-weight-medium);
-    color: var(--card-heading-fg);
+    color: var(--card-heading-fg, var(--card-heading-fg-default));
     line-height: 1.3;
     margin: 0;
     flex: 0 0 auto;
@@ -377,7 +377,7 @@
   & > footer [slot="action"] {
     margin-inline-start: auto;
     display: flex;
-    gap: var(--card-footer-gap);
+    gap: var(--card-footer-gap, var(--card-footer-gap-default));
   }
 
   /* Multiple direct action-slotted children (A2UI pattern):
@@ -392,7 +392,7 @@
   & > footer > [slot="action-leading"] {
     margin-inline-end: auto;
     display: flex;
-    gap: var(--card-footer-gap);
+    gap: var(--card-footer-gap, var(--card-footer-gap-default));
   }
 
   /* ═══════ Images ═══════ */
@@ -406,17 +406,17 @@
 
   & > img:first-child,
   & > [slot="media"]:first-child {
-    border-radius: var(--card-radius) var(--card-radius) 0 0;
+    border-radius: var(--card-radius, var(--card-radius-default)) var(--card-radius, var(--card-radius-default)) 0 0;
   }
 
   /* ═══════ Nested surface layering ═══════
      Step background up one canvas level per nesting depth.
      :scope card-ui has specificity (0,1,1) which beats the
      :where(:scope) initializer (0,0,0) in each inner scope. */
-  :scope card-ui                                     { --card-bg: var(--a-canvas-1); --card-border: 1px solid var(--a-border); --a-radius: var(--a-radius-md); }
-  :scope card-ui card-ui                              { --card-bg: var(--a-canvas-2); --a-radius: var(--a-radius-sm); }
-  :scope card-ui card-ui card-ui                       { --card-bg: var(--a-canvas-3); }
-  :scope card-ui card-ui card-ui card-ui                { --card-bg: var(--a-canvas-4); }
-  :scope card-ui card-ui card-ui card-ui card-ui         { --card-bg: var(--a-canvas-5); }
-  :scope card-ui card-ui card-ui card-ui card-ui card-ui  { --card-bg: var(--a-canvas-6); }
+  :scope card-ui                                     { --card-bg-default: var(--a-canvas-1); --card-border-default: 1px solid var(--a-border); --a-radius: var(--a-radius-md); }
+  :scope card-ui card-ui                              { --card-bg-default: var(--a-canvas-2); --a-radius: var(--a-radius-sm); }
+  :scope card-ui card-ui card-ui                       { --card-bg-default: var(--a-canvas-3); }
+  :scope card-ui card-ui card-ui card-ui                { --card-bg-default: var(--a-canvas-4); }
+  :scope card-ui card-ui card-ui card-ui card-ui         { --card-bg-default: var(--a-canvas-5); }
+  :scope card-ui card-ui card-ui card-ui card-ui card-ui  { --card-bg-default: var(--a-canvas-6); }
 }