@adia-ai/web-components 0.6.33 → 0.6.34

package/components/swiper/swiper.css

@@ -21,45 +21,45 @@
 @scope (swiper-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --swiper-gap:           var(--a-gap);
-    --swiper-peek:          var(--a-space-8);
-    --swiper-snap:          start;
-    --swiper-columns:       1;
+    --swiper-gap-default:           var(--a-gap);
+    --swiper-peek-default:          var(--a-space-8);
+    --swiper-snap-default:          start;
+    --swiper-columns-default:       1;
 
     /* ── Pagination dots ── */
     /* Component-intrinsic visual constant; no --a-space-* equivalent */
-    --swiper-dot-size:        6px;
+    --swiper-dot-size-default:        6px;
     /* Active dot is one space token (4px @ density=1) larger than the
        inactive dot — small, deliberate emphasis without rearranging
        the row. The hitbox stays at 1rem; only the visible circle grows. */
-    --swiper-dot-size-active: calc(var(--swiper-dot-size) + var(--a-space-1));
-    --swiper-dot-gap:         var(--a-space-2);
-    --swiper-dot-bg:          var(--a-border);
-    --swiper-dot-bg-active:   var(--a-fg);
-    --swiper-dot-radius:      var(--a-radius-full);
+    --swiper-dot-size-active-default: calc(var(--swiper-dot-size, var(--swiper-dot-size-default)) + var(--a-space-1));
+    --swiper-dot-gap-default:         var(--a-space-2);
+    --swiper-dot-bg-default:          var(--a-border);
+    --swiper-dot-bg-active-default:   var(--a-fg);
+    --swiper-dot-radius-default:      var(--a-radius-full);
 
     /* ── Host vertical rhythm ── */
-    --swiper-gap-vertical:  var(--a-space-3);
+    --swiper-gap-vertical-default:  var(--a-space-3);
 
     /* ── Paddle bottom offset ── */
-    --swiper-btn-bottom:    var(--a-space-3);
+    --swiper-btn-bottom-default:    var(--a-space-3);
 
     /* ── Autoplay pause button offset ── */
-    --swiper-pause-top:     var(--a-space-2);
-    --swiper-pause-right:   var(--a-space-2);
+    --swiper-pause-top-default:     var(--a-space-2);
+    --swiper-pause-right-default:   var(--a-space-2);
 
     /* ── Paddles ── */
-    --swiper-btn-size:      3rem;
-    --swiper-btn-bg:        transparent;
-    --swiper-btn-bg-hover:  var(--a-bg-muted);
-    --swiper-btn-fg:        var(--a-fg);
-    --swiper-btn-radius:    var(--a-radius-full);
-    --swiper-btn-shadow:    none;
-    --swiper-btn-offset:    var(--a-space-2);
+    --swiper-btn-size-default:      3rem;
+    --swiper-btn-bg-default:        transparent;
+    --swiper-btn-bg-hover-default:  var(--a-bg-muted);
+    --swiper-btn-fg-default:        var(--a-fg);
+    --swiper-btn-radius-default:    var(--a-radius-full);
+    --swiper-btn-shadow-default:    none;
+    --swiper-btn-offset-default:    var(--a-space-2);
 
     /* ── Motion ── */
-    --swiper-duration:      var(--a-duration);
-    --swiper-easing:        var(--a-easing);
+    --swiper-duration-default:      var(--a-duration);
+    --swiper-easing-default:        var(--a-easing);
   }
 
   /* ── Host: flex column so dots sit below the scroll track ── */
@@ -68,7 +68,7 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--swiper-gap-vertical);
+    gap: var(--swiper-gap-vertical, var(--swiper-gap-vertical-default));
     width: 100%;
     position: relative;
     /* Host is the container so @container queries below read the
@@ -84,7 +84,7 @@
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: calc(
-      (100% - (var(--swiper-columns) - 1) * var(--swiper-gap)) / var(--swiper-columns)
+      (100% - (var(--swiper-columns, var(--swiper-columns-default)) - 1) * var(--swiper-gap, var(--swiper-gap-default))) / var(--swiper-columns, var(--swiper-columns-default))
     );
     overflow-x: auto;
     overflow-y: hidden;
@@ -92,7 +92,7 @@
     scroll-behavior: smooth;
     scrollbar-width: none;
     -webkit-overflow-scrolling: touch;
-    gap: var(--swiper-gap);
+    gap: var(--swiper-gap, var(--swiper-gap-default));
   }
 
   :scope > [data-swiper-track]::-webkit-scrollbar { display: none; }
@@ -110,29 +110,29 @@
   /* ── Slides ── */
 
   :scope > [data-swiper-track] > * {
-    scroll-snap-align: var(--swiper-snap);
+    scroll-snap-align: var(--swiper-snap, var(--swiper-snap-default));
     scroll-snap-stop: always;
     min-width: 0;
   }
 
   /* ── Snap alignment ── */
 
-  :scope[snap="center"] { --swiper-snap: center; }
-  :scope[snap="end"]    { --swiper-snap: end; }
+  :scope[snap="center"] { --swiper-snap-default: center; }
+  :scope[snap="end"]    { --swiper-snap-default: end; }
 
   /* ── Peek: show partial adjacent slides ── */
 
   :scope[peek] > [data-swiper-track] {
-    padding-inline: var(--swiper-peek);
-    scroll-padding-inline: var(--swiper-peek);
+    padding-inline: var(--swiper-peek, var(--swiper-peek-default));
+    scroll-padding-inline: var(--swiper-peek, var(--swiper-peek-default));
   }
 
   /* ── Explicit slides-per-view ── */
 
-  :scope[slides-per-view="1"] { --swiper-columns: 1; }
-  :scope[slides-per-view="2"] { --swiper-columns: 2; }
-  :scope[slides-per-view="3"] { --swiper-columns: 3; }
-  :scope[slides-per-view="4"] { --swiper-columns: 4; }
+  :scope[slides-per-view="1"] { --swiper-columns-default: 1; }
+  :scope[slides-per-view="2"] { --swiper-columns-default: 2; }
+  :scope[slides-per-view="3"] { --swiper-columns-default: 3; }
+  :scope[slides-per-view="4"] { --swiper-columns-default: 4; }
 
   /* ── Responsive auto (container queries) ──
      The host IS the named `swiper` container, so @container queries
@@ -141,15 +141,15 @@
      the swiper's own width. */
 
   :scope:not([slides-per-view]) {
-    --swiper-columns: 1;
+    --swiper-columns-default: 1;
   }
 
   @container swiper (min-width: 640px) {
-    :scope:not([slides-per-view]) > [data-swiper-track] { --swiper-columns: 2; }
+    :scope:not([slides-per-view]) > [data-swiper-track] { --swiper-columns-default: 2; }
   }
 
   @container swiper (min-width: 960px) {
-    :scope:not([slides-per-view]) > [data-swiper-track] { --swiper-columns: 3; }
+    :scope:not([slides-per-view]) > [data-swiper-track] { --swiper-columns-default: 3; }
   }
 
   /* ══════════════════════════════════════════════════════════
@@ -162,16 +162,16 @@
   :scope > [data-swiper-btn] {
     position: absolute;
     top: 0;
-    bottom: var(--swiper-btn-bottom);
+    bottom: var(--swiper-btn-bottom, var(--swiper-btn-bottom-default));
     margin-block: auto;
     height: fit-content;
     z-index: 2;
-    --button-size: var(--swiper-btn-size);
-    --button-radius: var(--swiper-btn-radius);
+    --button-size: var(--swiper-btn-size, var(--swiper-btn-size-default));
+    --button-radius: var(--swiper-btn-radius, var(--swiper-btn-radius-default));
   }
 
-  :scope > [data-swiper-prev] { left: var(--swiper-btn-offset); }
-  :scope > [data-swiper-next] { right: var(--swiper-btn-offset); }
+  :scope > [data-swiper-prev] { left: var(--swiper-btn-offset, var(--swiper-btn-offset-default)); }
+  :scope > [data-swiper-next] { right: var(--swiper-btn-offset, var(--swiper-btn-offset-default)); }
 
   /* ══════════════════════════════════════════════════════════
      JS-stamped pagination dots
@@ -182,7 +182,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: var(--swiper-dot-gap);
+    gap: var(--swiper-dot-gap, var(--swiper-dot-gap-default));
     min-height: 1.5rem;
   }
 
@@ -192,16 +192,16 @@
      for the active one (one space token larger). Padding is computed
      from the size so the dot stays centered in the hitbox. */
   :scope [data-swiper-dots] > button {
-    width: var(--swiper-dot-size);
-    height: var(--swiper-dot-size);
-    border-radius: var(--swiper-dot-radius);
-    background: var(--swiper-dot-bg);
+    width: var(--swiper-dot-size, var(--swiper-dot-size-default));
+    height: var(--swiper-dot-size, var(--swiper-dot-size-default));
+    border-radius: var(--swiper-dot-radius, var(--swiper-dot-radius-default));
+    background: var(--swiper-dot-bg, var(--swiper-dot-bg-default));
     border: none;
-    padding: calc((1rem - var(--swiper-dot-size)) / 2);
+    padding: calc((1rem - var(--swiper-dot-size, var(--swiper-dot-size-default))) / 2);
     background-clip: content-box;
     box-sizing: content-box;
     cursor: pointer;
-    transition: background var(--swiper-duration) var(--swiper-easing);
+    transition: background var(--swiper-duration, var(--swiper-duration-default)) var(--swiper-easing, var(--swiper-easing-default));
   }
 
   /* Long-hand `background-color` (not the `background` shorthand!) so
@@ -209,7 +209,7 @@
      its initial `border-box` value — the colored area would otherwise
      fill the full 1rem hitbox and turn into a huge circle. */
   :scope [data-swiper-dots] > button:hover {
-    background-color: var(--swiper-dot-bg-active);
+    background-color: var(--swiper-dot-bg-active, var(--swiper-dot-bg-active-default));
   }
 
   /* Focus ring is rendered INSIDE the padding area (inset shadow), so
@@ -220,10 +220,10 @@
   }
 
   :scope [data-swiper-dots] > button[aria-current="true"] {
-    background-color: var(--swiper-dot-bg-active);
-    width: var(--swiper-dot-size-active);
-    height: var(--swiper-dot-size-active);
-    padding: calc((1rem - var(--swiper-dot-size-active)) / 2);
+    background-color: var(--swiper-dot-bg-active, var(--swiper-dot-bg-active-default));
+    width: var(--swiper-dot-size-active, var(--swiper-dot-size-active-default));
+    height: var(--swiper-dot-size-active, var(--swiper-dot-size-active-default));
+    padding: calc((1rem - var(--swiper-dot-size-active, var(--swiper-dot-size-active-default))) / 2);
   }
 
   /* ══════════════════════════════════════════════════════════
@@ -271,8 +271,8 @@
 
   :scope[autoplay] > [data-swiper-pause] {
     position: absolute;
-    top: var(--swiper-pause-top);
-    right: var(--swiper-pause-right);
+    top: var(--swiper-pause-top, var(--swiper-pause-top-default));
+    right: var(--swiper-pause-right, var(--swiper-pause-right-default));
     z-index: 1;
   }
 

package/components/switch/switch.css

@@ -2,64 +2,64 @@
    token-block (Flavor B — attribute-removal restyle) both fail inside
    `@scope`. Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
 switch-ui:not([disabled]):hover {
-  --switch-track-bg: var(--switch-track-bg-hover);
-  --switch-track-border: var(--switch-track-border-hover);
+  --switch-track-bg-default: var(--switch-track-bg-hover, var(--switch-track-bg-hover-default));
+  --switch-track-border-default: var(--switch-track-border-hover, var(--switch-track-border-hover-default));
 }
 switch-ui[checked]:not([disabled]):hover {
-  --switch-track-bg: var(--switch-track-bg-checked-hover);
-  --switch-track-border: var(--switch-track-border-checked-hover);
+  --switch-track-bg-default: var(--switch-track-bg-checked-hover, var(--switch-track-bg-checked-hover-default));
+  --switch-track-border-default: var(--switch-track-border-checked-hover, var(--switch-track-border-checked-hover-default));
 }
 switch-ui[checked] {
-  --switch-track-bg: var(--switch-track-bg-checked);
-  --switch-track-border: var(--switch-track-border-checked);
-  --switch-thumb-bg: var(--switch-thumb-bg-checked);
+  --switch-track-bg-default: var(--switch-track-bg-checked, var(--switch-track-bg-checked-default));
+  --switch-track-border-default: var(--switch-track-border-checked, var(--switch-track-border-checked-default));
+  --switch-thumb-bg-default: var(--switch-thumb-bg-checked, var(--switch-thumb-bg-checked-default));
 }
 switch-ui[checked] [slot="thumb"] {
-  transform: translateX(var(--switch-thumb-travel));
+  transform: translateX(var(--switch-thumb-travel, var(--switch-thumb-travel-default)));
 }
 
 @scope (switch-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --switch-gap:                  var(--a-space-2);
-    --switch-radius:               var(--a-radius-full);
+    --switch-gap-default:                  var(--a-space-2);
+    --switch-radius-default:               var(--a-radius-full);
 
     /* ── Typography ── */
-    --switch-font-size:            var(--a-ui-size);
+    --switch-font-size-default:            var(--a-ui-size);
 
     /* ── Colors ── */
-    --switch-track-bg-hover:       var(--a-bg-muted);
-    --switch-track-bg-checked-hover: var(--a-primary-hover);
-    --switch-track-border-checked-hover: var(--a-primary-hover);
-    --switch-thumb-shadow:         var(--a-shadow-sm);
+    --switch-track-bg-hover-default:       var(--a-bg-muted);
+    --switch-track-bg-checked-hover-default: var(--a-primary-hover);
+    --switch-track-border-checked-hover-default: var(--a-primary-hover);
+    --switch-thumb-shadow-default:         var(--a-shadow-sm);
 
     /* ── Transition ── */
-    --switch-duration:             var(--a-duration-fast);
-    --switch-easing:               var(--a-easing);
+    --switch-duration-default:             var(--a-duration-fast);
+    --switch-easing-default:               var(--a-easing);
 
     /* ── Focus ── */
-    --switch-focus-ring:           var(--a-focus-ring);
+    --switch-focus-ring-default:           var(--a-focus-ring);
 
     /* ── Track ── (sizes scale with universal [size] attribute via --a-toggle-size) */
-    --switch-track-height:         var(--a-toggle-size);
-    --switch-track-width:          calc(var(--a-toggle-size) * 1.8);
-    --switch-track-bg:             var(--a-ui-bg);
-    --switch-track-border:         var(--a-ui-border);
-    --switch-track-border-hover:   var(--a-fg-subtle);
+    --switch-track-height-default:         var(--a-toggle-size);
+    --switch-track-width-default:          calc(var(--a-toggle-size) * 1.8);
+    --switch-track-bg-default:             var(--a-ui-bg);
+    --switch-track-border-default:         var(--a-ui-border);
+    --switch-track-border-hover-default:   var(--a-fg-subtle);
 
     /* ── Track: checked ── */
-    --switch-track-bg-checked:     var(--a-primary);
-    --switch-track-border-checked: var(--a-primary);
+    --switch-track-bg-checked-default:     var(--a-primary);
+    --switch-track-border-checked-default: var(--a-primary);
 
     /* ── Thumb ── (derived from track; inset accounts for border + visual gap) */
-    --switch-thumb-inset:          2px;
-    --switch-thumb-size:           calc(var(--a-toggle-size) - 2 * var(--switch-thumb-inset) - 2px); /* -2px for 1px border each side */
-    --switch-thumb-bg:             var(--a-fg-muted);
-    --switch-thumb-bg-checked:     var(--a-chrome-light);
-    --switch-thumb-travel:         calc(var(--switch-track-width) - var(--switch-thumb-size) - 2 * var(--switch-thumb-inset) - 2px);
+    --switch-thumb-inset-default:          2px;
+    --switch-thumb-size-default:           calc(var(--a-toggle-size) - 2 * var(--switch-thumb-inset, var(--switch-thumb-inset-default)) - 2px); /* -2px for 1px border each side */
+    --switch-thumb-bg-default:             var(--a-fg-muted);
+    --switch-thumb-bg-checked-default:     var(--a-chrome-light);
+    --switch-thumb-travel-default:         calc(var(--switch-track-width, var(--switch-track-width-default)) - var(--switch-thumb-size, var(--switch-thumb-size-default)) - 2 * var(--switch-thumb-inset, var(--switch-thumb-inset-default)) - 2px);
 
     /* ── State: disabled ── */
-    --switch-fg-disabled:          var(--a-ui-text-disabled);
+    --switch-fg-disabled-default:          var(--a-ui-text-disabled);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -68,43 +68,43 @@ switch-ui[checked] [slot="thumb"] {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
-    gap: var(--switch-gap);
+    gap: var(--switch-gap, var(--switch-gap-default));
     cursor: pointer;
     user-select: none;
-    font-size: var(--switch-font-size);
+    font-size: var(--switch-font-size, var(--switch-font-size-default));
   }
-  :scope[disabled] { cursor: not-allowed; color: var(--switch-fg-disabled); }
+  :scope[disabled] { cursor: not-allowed; color: var(--switch-fg-disabled, var(--switch-fg-disabled-default)); }
 
   [slot="track"] {
     position: relative;
-    width: var(--switch-track-width);
-    height: var(--switch-track-height);
-    border-radius: var(--switch-radius);
-    background: var(--switch-track-bg);
-    border: 1px solid var(--switch-track-border);
+    width: var(--switch-track-width, var(--switch-track-width-default));
+    height: var(--switch-track-height, var(--switch-track-height-default));
+    border-radius: var(--switch-radius, var(--switch-radius-default));
+    background: var(--switch-track-bg, var(--switch-track-bg-default));
+    border: 1px solid var(--switch-track-border, var(--switch-track-border-default));
     flex-shrink: 0;
     transition:
-      background var(--switch-duration) var(--switch-easing),
-      border-color var(--switch-duration) var(--switch-easing);
+      background var(--switch-duration, var(--switch-duration-default)) var(--switch-easing, var(--switch-easing-default)),
+      border-color var(--switch-duration, var(--switch-duration-default)) var(--switch-easing, var(--switch-easing-default));
   }
   /* hover + [checked] rules moved outside @scope — see Safari 17.x bug note at top. */
 
   [slot="thumb"] {
     position: absolute;
-    top: var(--switch-thumb-inset);
-    left: var(--switch-thumb-inset);
-    width: var(--switch-thumb-size);
-    height: var(--switch-thumb-size);
-    border-radius: var(--switch-radius);
-    background: var(--switch-thumb-bg);
-    box-shadow: var(--switch-thumb-shadow);
+    top: var(--switch-thumb-inset, var(--switch-thumb-inset-default));
+    left: var(--switch-thumb-inset, var(--switch-thumb-inset-default));
+    width: var(--switch-thumb-size, var(--switch-thumb-size-default));
+    height: var(--switch-thumb-size, var(--switch-thumb-size-default));
+    border-radius: var(--switch-radius, var(--switch-radius-default));
+    background: var(--switch-thumb-bg, var(--switch-thumb-bg-default));
+    box-shadow: var(--switch-thumb-shadow, var(--switch-thumb-shadow-default));
     transition:
-      transform  var(--switch-duration) var(--switch-easing),
-      background var(--switch-duration) var(--switch-easing);
+      transform  var(--switch-duration, var(--switch-duration-default)) var(--switch-easing, var(--switch-easing-default)),
+      background var(--switch-duration, var(--switch-duration-default)) var(--switch-easing, var(--switch-easing-default));
   }
   /* :scope[checked] [slot="thumb"] moved outside @scope — see Safari 17.x bug note at top. */
 
-  [slot="label"] { font-size: var(--switch-font-size); }
+  [slot="label"] { font-size: var(--switch-font-size, var(--switch-font-size-default)); }
 
   /* ── Hint (§184, v0.5.5, FEEDBACK-08 §7) ──
      Caption beneath the toggle row; wired to aria-describedby on host. */
@@ -117,7 +117,7 @@ switch-ui[checked] [slot="thumb"] {
   }
 
   :scope:focus-visible { outline: none; }
-  :scope:focus-visible [slot="track"] { box-shadow: var(--switch-focus-ring); }
+  :scope:focus-visible [slot="track"] { box-shadow: var(--switch-focus-ring, var(--switch-focus-ring-default)); }
 
   /* Size handled by universal [size] attribute system. */
 }