@adia-ai/web-components 0.6.33 → 0.6.35

package/components/noodles/noodles.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UINoodles } from './class.js';
+import { UINoodles } from './noodles.class.js';
 
 defineIfFree('noodles-ui', UINoodles);
 

package/components/option-card/option-card.css

@@ -2,83 +2,83 @@
    (Flavor B — attribute-removal restyle) both fail inside `@scope`.
    Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
 option-card-ui:not([checked]):not([disabled]):hover {
-  background: var(--option-card-bg-hover);
-  border-color: var(--option-card-border-hover);
+  background: var(--option-card-bg-hover, var(--option-card-bg-hover-default));
+  border-color: var(--option-card-border-hover, var(--option-card-border-hover-default));
 }
 option-card-ui[checked] > :not([slot]) {
   display: block;
 }
 option-card-ui[checked] {
-  background: var(--option-card-bg-checked);
-  border-color: var(--option-card-border-checked);
+  background: var(--option-card-bg-checked, var(--option-card-bg-checked-default));
+  border-color: var(--option-card-border-checked, var(--option-card-border-checked-default));
 }
 option-card-ui[checked]::before {
-  border-color: var(--option-card-radio-fill);
+  border-color: var(--option-card-radio-fill, var(--option-card-radio-fill-default));
   background:
     radial-gradient(
       circle,
-      var(--option-card-radio-dot) 0 30%,
-      var(--option-card-radio-fill) 30% 100%
+      var(--option-card-radio-dot, var(--option-card-radio-dot-default)) 0 30%,
+      var(--option-card-radio-fill, var(--option-card-radio-fill-default)) 30% 100%
     );
 }
 option-card-ui[checked] > [slot="heading"] {
-  color: var(--option-card-heading-color-checked);
+  color: var(--option-card-heading-color-checked, var(--option-card-heading-color-checked-default));
 }
 option-card-ui[checked] > [slot="icon"] {
-  color: var(--option-card-icon-color-checked);
+  color: var(--option-card-icon-color-checked, var(--option-card-icon-color-checked-default));
 }
 
 @scope (option-card-ui) {
   :where(:scope) {
     /* ── Container ── */
-    --option-card-padding-block:    var(--a-space-3);
-    --option-card-padding-inline:   var(--a-space-4);
-    --option-card-radius:           var(--a-radius-md);
-    --option-card-bg:               var(--a-bg);
-    --option-card-border:           var(--a-border);
-    --option-card-gap-x:            var(--a-space-3);
-    --option-card-gap-y:            var(--a-space-1);
+    --option-card-padding-block-default:    var(--a-space-3);
+    --option-card-padding-inline-default:   var(--a-space-4);
+    --option-card-radius-default:           var(--a-radius-md);
+    --option-card-bg-default:               var(--a-bg);
+    --option-card-border-default:           var(--a-border);
+    --option-card-gap-x-default:            var(--a-space-3);
+    --option-card-gap-y-default:            var(--a-space-1);
 
     /* ── State: hover ── */
-    --option-card-bg-hover:         var(--a-bg-muted);
-    --option-card-border-hover:     var(--a-fg-subtle);
+    --option-card-bg-hover-default:         var(--a-bg-muted);
+    --option-card-border-hover-default:     var(--a-fg-subtle);
 
     /* ── State: checked ── */
-    --option-card-bg-checked:       var(--a-accent-muted);
-    --option-card-border-checked:   var(--a-accent);
+    --option-card-bg-checked-default:       var(--a-accent-muted);
+    --option-card-border-checked-default:   var(--a-accent);
 
     /* ── Indicator (CSS radio circle, same size + recipe as <radio-ui>). */
-    --option-card-radio-size:       var(--a-toggle-size);
-    --option-card-radio-bg:         var(--a-bg);
-    --option-card-radio-border:     var(--a-border);
-    --option-card-radio-fill:       var(--a-accent);
+    --option-card-radio-size-default:       var(--a-toggle-size);
+    --option-card-radio-bg-default:         var(--a-bg);
+    --option-card-radio-border-default:     var(--a-border);
+    --option-card-radio-fill-default:       var(--a-accent);
     /* Mirror radio.css's --radio-fg-checked recipe: an always-light
        token rather than --a-accent-fg, which can flip dark depending
        on theme/scheme combos and produce a near-black inner dot
        against the accent disc. */
-    --option-card-radio-dot:        var(--a-chrome-light);
+    --option-card-radio-dot-default:        var(--a-chrome-light);
 
     /* ── Typography ── */
-    --option-card-heading-color:          var(--a-fg);
-    --option-card-heading-color-checked:  var(--a-fg-strong);
-    --option-card-heading-weight:         var(--a-weight-medium);
-    --option-card-heading-size:           var(--a-ui-size);
-    --option-card-desc-color:             var(--a-fg-muted);
-    --option-card-desc-size:              var(--a-ui-sm);
-    --option-card-desc-line-height:       1.4;
-    --option-card-icon-color:             var(--a-fg-subtle);
-    --option-card-icon-color-checked:     var(--a-fg-strong);
-    --option-card-icon-size:              1.5rem;
+    --option-card-heading-color-default:          var(--a-fg);
+    --option-card-heading-color-checked-default:  var(--a-fg-strong);
+    --option-card-heading-weight-default:         var(--a-weight-medium);
+    --option-card-heading-size-default:           var(--a-ui-size);
+    --option-card-desc-color-default:             var(--a-fg-muted);
+    --option-card-desc-size-default:              var(--a-ui-sm);
+    --option-card-desc-line-height-default:       1.4;
+    --option-card-icon-color-default:             var(--a-fg-subtle);
+    --option-card-icon-color-checked-default:     var(--a-fg-strong);
+    --option-card-icon-size-default:              1.5rem;
 
     /* ── State: disabled ── */
-    --option-card-disabled-opacity: 0.6;
+    --option-card-disabled-opacity-default: 0.6;
 
     /* ── Focus ── */
-    --option-card-focus-ring:       var(--a-focus-ring);
+    --option-card-focus-ring-default:       var(--a-focus-ring);
 
     /* ── Transitions ── */
-    --option-card-duration:         var(--a-duration-fast);
-    --option-card-easing:           var(--a-easing);
+    --option-card-duration-default:         var(--a-duration-fast);
+    --option-card-easing-default:           var(--a-easing);
   }
 
   /* ── Base — grid: indicator | (heading + description). Optional icon
@@ -90,19 +90,19 @@ option-card-ui[checked] > [slot="icon"] {
     grid-template-areas:
       "indicator heading"
       "indicator description";
-    column-gap: var(--option-card-gap-x);
-    row-gap: var(--option-card-gap-y);
-    padding: var(--option-card-padding-block) var(--option-card-padding-inline);
-    border: 1px solid var(--option-card-border);
-    border-radius: var(--option-card-radius);
-    background: var(--option-card-bg);
+    column-gap: var(--option-card-gap-x, var(--option-card-gap-x-default));
+    row-gap: var(--option-card-gap-y, var(--option-card-gap-y-default));
+    padding: var(--option-card-padding-block, var(--option-card-padding-block-default)) var(--option-card-padding-inline, var(--option-card-padding-inline-default));
+    border: 1px solid var(--option-card-border, var(--option-card-border-default));
+    border-radius: var(--option-card-radius, var(--option-card-radius-default));
+    background: var(--option-card-bg, var(--option-card-bg-default));
     cursor: pointer;
     user-select: none;
     outline: none;
     transition:
-      background var(--option-card-duration) var(--option-card-easing),
-      border-color var(--option-card-duration) var(--option-card-easing),
-      box-shadow var(--option-card-duration) var(--option-card-easing);
+      background var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default)),
+      border-color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default)),
+      box-shadow var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
   }
 
   /* When an icon slot is present, insert a third column for it
@@ -116,41 +116,41 @@ option-card-ui[checked] > [slot="icon"] {
   :scope > [slot="icon"] {
     grid-area: icon;
     align-self: start;
-    color: var(--option-card-icon-color);
-    --a-icon-size: var(--option-card-icon-size);
-    transition: color var(--option-card-duration) var(--option-card-easing);
+    color: var(--option-card-icon-color, var(--option-card-icon-color-default));
+    --a-icon-size: var(--option-card-icon-size, var(--option-card-icon-size-default));
+    transition: color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
   }
 
   /* ── Indicator — pure CSS radio circle, no separate <radio-ui>. */
   :scope::before {
     content: '';
     grid-area: indicator;
-    width: var(--option-card-radio-size);
-    height: var(--option-card-radio-size);
-    border: 1.5px solid var(--option-card-radio-border);
+    width: var(--option-card-radio-size, var(--option-card-radio-size-default));
+    height: var(--option-card-radio-size, var(--option-card-radio-size-default));
+    border: 1.5px solid var(--option-card-radio-border, var(--option-card-radio-border-default));
     border-radius: var(--a-radius-full);
-    background: var(--option-card-radio-bg);
+    background: var(--option-card-radio-bg, var(--option-card-radio-bg-default));
     align-self: start;
     margin-block-start: 0.125rem;
     flex-shrink: 0;
     transition:
-      background var(--option-card-duration) var(--option-card-easing),
-      border-color var(--option-card-duration) var(--option-card-easing);
+      background var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default)),
+      border-color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
   }
 
   /* ── Slots — heading + description ── */
   :scope > [slot="heading"] {
     grid-area: heading;
-    color: var(--option-card-heading-color);
-    font-weight: var(--option-card-heading-weight);
-    font-size: var(--option-card-heading-size);
-    transition: color var(--option-card-duration) var(--option-card-easing);
+    color: var(--option-card-heading-color, var(--option-card-heading-color-default));
+    font-weight: var(--option-card-heading-weight, var(--option-card-heading-weight-default));
+    font-size: var(--option-card-heading-size, var(--option-card-heading-size-default));
+    transition: color var(--option-card-duration, var(--option-card-duration-default)) var(--option-card-easing, var(--option-card-easing-default));
   }
   :scope > [slot="description"] {
     grid-area: description;
-    color: var(--option-card-desc-color);
-    font-size: var(--option-card-desc-size);
-    line-height: var(--option-card-desc-line-height);
+    color: var(--option-card-desc-color, var(--option-card-desc-color-default));
+    font-size: var(--option-card-desc-size, var(--option-card-desc-size-default));
+    line-height: var(--option-card-desc-line-height, var(--option-card-desc-line-height-default));
   }
 
   /* ── Default slot — "spillover" content revealed when checked.
@@ -179,8 +179,8 @@ option-card-ui[checked] > [slot="icon"] {
       "icon       indicator"
       "heading    heading"
       "description description";
-    column-gap: var(--option-card-gap-x);
-    row-gap: var(--option-card-gap-y);
+    column-gap: var(--option-card-gap-x, var(--option-card-gap-x-default));
+    row-gap: var(--option-card-gap-y, var(--option-card-gap-y-default));
     padding: var(--a-space-4);
     align-items: start;
   }
@@ -188,7 +188,7 @@ option-card-ui[checked] > [slot="icon"] {
     grid-area: icon;
     justify-self: start;
     align-self: start;
-    --option-card-icon-size: 1.75rem;
+    --option-card-icon-size-default: 1.75rem;
   }
   :scope[layout="tile"]::before {
     grid-area: indicator;
@@ -206,11 +206,11 @@ option-card-ui[checked] > [slot="icon"] {
   /* ── State: disabled ── */
   :scope[disabled] {
     cursor: not-allowed;
-    opacity: var(--option-card-disabled-opacity);
+    opacity: var(--option-card-disabled-opacity, var(--option-card-disabled-opacity-default));
   }
 
   /* ── Focus ── */
   :scope:focus-visible {
-    box-shadow: var(--option-card-focus-ring);
+    box-shadow: var(--option-card-focus-ring, var(--option-card-focus-ring-default));
   }
 }

package/components/option-card/option-card.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIOptionCard } from './class.js';
+import { UIOptionCard } from './option-card.class.js';
 
 defineIfFree('option-card-ui', UIOptionCard);
 

package/components/otp-input/otp-input.css

@@ -1,23 +1,23 @@
 @scope (otp-input-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --otp-input-size:         var(--a-size);
-    --otp-input-gap:          var(--a-space-2);
-    --otp-input-radius:       var(--a-radius-md);
-    --otp-input-border:       var(--a-ui-border);
-    --otp-input-border-hover: var(--a-ui-border-hover);
-    --otp-input-border-focus: var(--a-accent);
-    --otp-input-bg-disabled:  var(--a-ui-bg-disabled);
-    --otp-input-fg-disabled:  var(--a-ui-text-disabled);
-    --otp-input-border-disabled: var(--a-ui-border-disabled);
-    --otp-input-font:         var(--a-font-family-code);
-    --otp-input-font-size:    var(--a-body-md);
-    --otp-input-bg:           var(--a-ui-bg);
-    --otp-input-fg:           var(--a-ui-text);
+    --otp-input-size-default:         var(--a-size);
+    --otp-input-gap-default:          var(--a-space-2);
+    --otp-input-radius-default:       var(--a-radius-md);
+    --otp-input-border-default:       var(--a-ui-border);
+    --otp-input-border-hover-default: var(--a-ui-border-hover);
+    --otp-input-border-focus-default: var(--a-accent);
+    --otp-input-bg-disabled-default:  var(--a-ui-bg-disabled);
+    --otp-input-fg-disabled-default:  var(--a-ui-text-disabled);
+    --otp-input-border-disabled-default: var(--a-ui-border-disabled);
+    --otp-input-font-default:         var(--a-font-family-code);
+    --otp-input-font-size-default:    var(--a-body-md);
+    --otp-input-bg-default:           var(--a-ui-bg);
+    --otp-input-fg-default:           var(--a-ui-text);
 
     /* ── Transitions ── */
-    --otp-input-duration:     var(--a-duration-fast);
-    --otp-input-easing:       var(--a-easing);
+    --otp-input-duration-default:     var(--a-duration-fast);
+    --otp-input-easing-default:       var(--a-easing);
   }
 
   :scope {
@@ -25,24 +25,24 @@
     box-sizing: border-box;
     display: flex;
     justify-content: space-around;
-    gap: var(--otp-input-gap);
+    gap: var(--otp-input-gap, var(--otp-input-gap-default));
   }
 
   /* ── Digit inputs ── */
   [slot="digit"] {
     box-sizing: border-box;
-    width: var(--otp-input-size);
-    height: var(--otp-input-size);
+    width: var(--otp-input-size, var(--otp-input-size-default));
+    height: var(--otp-input-size, var(--otp-input-size-default));
     text-align: center;
-    border: 1px solid var(--otp-input-border);
-    border-radius: var(--otp-input-radius);
-    background: var(--otp-input-bg);
-    color: var(--otp-input-fg);
-    font-family: var(--otp-input-font);
-    font-size: var(--otp-input-font-size);
+    border: 1px solid var(--otp-input-border, var(--otp-input-border-default));
+    border-radius: var(--otp-input-radius, var(--otp-input-radius-default));
+    background: var(--otp-input-bg, var(--otp-input-bg-default));
+    color: var(--otp-input-fg, var(--otp-input-fg-default));
+    font-family: var(--otp-input-font, var(--otp-input-font-default));
+    font-size: var(--otp-input-font-size, var(--otp-input-font-size-default));
     line-height: 1;
     outline: none;
-    transition: border-color var(--otp-input-duration) var(--otp-input-easing);
+    transition: border-color var(--otp-input-duration, var(--otp-input-duration-default)) var(--otp-input-easing, var(--otp-input-easing-default));
     /* Hide number spinner */
     -moz-appearance: textfield;
   }
@@ -53,11 +53,11 @@
   }
 
   [slot="digit"]:hover:not(:disabled) {
-    border-color: var(--otp-input-border-hover);
+    border-color: var(--otp-input-border-hover, var(--otp-input-border-hover-default));
   }
 
   [slot="digit"]:focus {
-    border-color: var(--otp-input-border-focus);
+    border-color: var(--otp-input-border-focus, var(--otp-input-border-focus-default));
   }
 
   /* ── Disabled ── */
@@ -65,13 +65,13 @@
     pointer-events: none;
   }
   :scope[disabled] [slot="digit"] {
-    background: var(--otp-input-bg-disabled);
-    color: var(--otp-input-fg-disabled);
+    background: var(--otp-input-bg-disabled, var(--otp-input-bg-disabled-default));
+    color: var(--otp-input-fg-disabled, var(--otp-input-fg-disabled-default));
     /* Dashed border rendered via SVG border-image for consistent ~8px
        dashes across browsers (native `border-style: dashed` is too short
        and varies by engine). The border-color fallback is used when
        border-image isn't supported. */
-    border: 1px dashed var(--otp-input-border-disabled);
+    border: 1px dashed var(--otp-input-border-disabled, var(--otp-input-border-disabled-default));
     border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' preserveAspectRatio='none'><rect x='0.5' y='0.5' width='27' height='27' fill='none' stroke='%23999' stroke-width='1' stroke-dasharray='8 6'/></svg>") 1 repeat;
     cursor: not-allowed;
   }

package/components/otp-input/otp-input.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIOtpInput } from './class.js';
+import { UIOtpInput } from './otp-input.class.js';
 
 defineIfFree('otp-input-ui', UIOtpInput);
 

package/components/page/page.css

@@ -1,37 +1,37 @@
 @scope (page-ui) {
   :where(:scope) {
     /* ── Max-width clamps ── */
-    --page-max-width-prose:  65ch;
-    --page-max-width-narrow: 80ch;
-    --page-max-width-wide:   1080px;
-    --page-max-width-full:   100%;
+    --page-max-width-prose-default:  65ch;
+    --page-max-width-narrow-default: 80ch;
+    --page-max-width-wide-default:   1080px;
+    --page-max-width-full-default:   100%;
 
     /* ── Padding default (when [padding] is set without a value) ── */
     --page-padding-default:  var(--a-space-6);
 
     /* ── Surfaces ── */
-    --page-bg:               var(--a-canvas-0);
-    --page-fg:               var(--a-fg);
+    --page-bg-default:               var(--a-canvas-0);
+    --page-fg-default:               var(--a-fg);
 
     /* ── Sticky-header chrome (when [data-header-stuck]) ── */
-    --page-sticky-bg:        var(--a-canvas-0);
-    --page-sticky-border:    1px solid var(--a-border-subtle);
-    --page-sticky-shadow:    var(--a-shadow-sm);
+    --page-sticky-bg-default:        var(--a-canvas-0);
+    --page-sticky-border-default:    1px solid var(--a-border-subtle);
+    --page-sticky-shadow-default:    var(--a-shadow-sm);
   }
 
   :scope {
     box-sizing: border-box;
     display: block;
     width: 100%;
-    background: var(--page-bg);
-    color: var(--page-fg);
+    background: var(--page-bg, var(--page-bg-default));
+    color: var(--page-fg, var(--page-fg-default));
   }
 
   /* ── max-width clamps ── */
-  :scope[max-width="prose"]  { max-width: var(--page-max-width-prose);  margin-inline: auto; }
-  :scope[max-width="narrow"] { max-width: var(--page-max-width-narrow); margin-inline: auto; }
-  :scope[max-width="wide"]   { max-width: var(--page-max-width-wide);   margin-inline: auto; }
-  :scope[max-width="full"]   { max-width: var(--page-max-width-full); }
+  :scope[max-width="prose"]  { max-width: var(--page-max-width-prose, var(--page-max-width-prose-default));  margin-inline: auto; }
+  :scope[max-width="narrow"] { max-width: var(--page-max-width-narrow, var(--page-max-width-narrow-default)); margin-inline: auto; }
+  :scope[max-width="wide"]   { max-width: var(--page-max-width-wide, var(--page-max-width-wide-default));   margin-inline: auto; }
+  :scope[max-width="full"]   { max-width: var(--page-max-width-full, var(--page-max-width-full-default)); }
 
   /* ── Padding scale (mirrors --a-space-N) ── */
   :scope[padding=""]  { padding: var(--page-padding-default); }
@@ -57,12 +57,12 @@
     position: sticky;
     top: 0;
     z-index: 1;
-    background: var(--page-sticky-bg);
+    background: var(--page-sticky-bg, var(--page-sticky-bg-default));
     transition: border-color var(--a-duration-fast) var(--a-easing), box-shadow var(--a-duration-fast) var(--a-easing);
   }
 
   :scope[data-header-stuck] > :where(header, header-ui) {
-    border-block-end: var(--page-sticky-border);
-    box-shadow: var(--page-sticky-shadow);
+    border-block-end: var(--page-sticky-border, var(--page-sticky-border-default));
+    box-shadow: var(--page-sticky-shadow, var(--page-sticky-shadow-default));
   }
 }

package/components/page/page.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIPage } from './class.js';
+import { UIPage } from './page.class.js';
 
 defineIfFree('page-ui', UIPage);