@adia-ai/web-components 0.6.33 → 0.6.35

package/components/toggle-group/toggle-group.js

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

package/components/toggle-group/toggle-option.yaml

@@ -1,7 +1,7 @@
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 #
 # §228 (v0.5.9): authored to close the §229 baseline class-export-undeclared
-# drift for UIToggleOption. Ships as a sibling class in toggle-group/class.js
+# drift for UIToggleOption. Ships as a sibling class in toggle-group/toggle-group.class.js
 # + is registered alongside UIToggleGroup.
 
 # Child component of <toggle-group-ui>. Surface only inside that parent.

package/components/toggle-scheme/toggle-scheme.css

@@ -1,6 +1,6 @@
 @scope (toggle-scheme-ui) {
   :where(:scope) {
-    --toggle-scheme-icon-transition: var(--a-duration-fast) var(--a-easing);
+    --toggle-scheme-icon-transition-default: var(--a-duration-fast) var(--a-easing);
   }
 
   :scope {
@@ -15,6 +15,6 @@
   }
 
   :scope > [part="button"] {
-    transition: color var(--toggle-scheme-icon-transition);
+    transition: color var(--toggle-scheme-icon-transition, var(--toggle-scheme-icon-transition-default));
   }
 }

package/components/toggle-scheme/toggle-scheme.js

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

package/components/toolbar/toolbar-group.yaml

@@ -1,7 +1,7 @@
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 #
 # §228 (v0.5.9): authored to close the §229 baseline class-export-undeclared
-# drift for UIToolbarGroup. Ships as a sibling class in toolbar/class.js
+# drift for UIToolbarGroup. Ships as a sibling class in toolbar/toolbar.class.js
 # + is registered alongside UIToolbar.
 
 # Child component of <toolbar-ui>. Groups a set of action buttons inside

package/components/toolbar/toolbar.css

@@ -1,15 +1,15 @@
 @scope (toolbar-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --toolbar-gap:    var(--a-space-1);
-    --toolbar-radius: var(--a-radius-md);
-    --toolbar-px:     var(--a-space-1);
-    --toolbar-py:     var(--a-space-1);
+    --toolbar-gap-default:    var(--a-space-1);
+    --toolbar-radius-default: var(--a-radius-md);
+    --toolbar-px-default:     var(--a-space-1);
+    --toolbar-py-default:     var(--a-space-1);
 
     /* ── Colors ── */
-    --toolbar-bg:     transparent;
-    --toolbar-fg:     var(--a-fg);
-    --toolbar-border: var(--a-border-subtle);
+    --toolbar-bg-default:     transparent;
+    --toolbar-fg-default:     var(--a-fg);
+    --toolbar-border-default: var(--a-border-subtle);
   }
 
   /* ── Base ── */
@@ -18,10 +18,10 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: var(--toolbar-gap);
-    padding: var(--toolbar-py) var(--toolbar-px);
-    border-radius: var(--toolbar-radius);
-    color: var(--toolbar-fg);
+    gap: var(--toolbar-gap, var(--toolbar-gap-default));
+    padding: var(--toolbar-py, var(--toolbar-py-default)) var(--toolbar-px, var(--toolbar-px-default));
+    border-radius: var(--toolbar-radius, var(--toolbar-radius-default));
+    color: var(--toolbar-fg, var(--toolbar-fg-default));
     min-width: 0;        /* allow shrinking within flex/grid parents */
     overflow: hidden;    /* prevent pre-measurement flash before reflow */
   }
@@ -34,14 +34,14 @@
 
   /* ── Bordered ── */
   :scope[bordered] {
-    border: 1px solid var(--toolbar-border);
-    background: var(--toolbar-bg);
+    border: 1px solid var(--toolbar-border, var(--toolbar-border-default));
+    background: var(--toolbar-bg, var(--toolbar-bg-default));
   }
 
   /* ── Gap variants ── */
-  :scope[gap="sm"] { --toolbar-gap: var(--a-space-1); }
-  :scope[gap="md"] { --toolbar-gap: var(--a-space-2); }
-  :scope[gap="lg"] { --toolbar-gap: var(--a-space-3); }
+  :scope[gap="sm"] { --toolbar-gap-default: var(--a-space-1); }
+  :scope[gap="md"] { --toolbar-gap-default: var(--a-space-2); }
+  :scope[gap="lg"] { --toolbar-gap-default: var(--a-space-3); }
 
   /* ── Align ── */
   :scope[align="start"]         { justify-content: flex-start; }
@@ -104,7 +104,7 @@ toolbar-ui [data-toolbar-spillover-menu]:popover-open {
   min-width: 10rem;
   font-family: inherit;
   font-size: var(--a-ui-size);
-  color: var(--toolbar-fg);
+  color: var(--toolbar-fg, var(--toolbar-fg-default));
   /* Stack overflow items as rows (each row can be a group with its own gap). */
   display: flex;
   flex-direction: column;

package/components/toolbar/toolbar.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIToolbar, UIToolbarGroup } from './class.js';
+import { UIToolbar, UIToolbarGroup } from './toolbar.class.js';
 
 defineIfFree('toolbar-ui', UIToolbar);
 defineIfFree('toolbar-group-ui', UIToolbarGroup);

package/components/tooltip/tooltip.css

@@ -3,12 +3,12 @@
     /* Host (anchor) tokens. The popover itself escapes to top-layer and
        cannot inherit these — top-layer rules below reference --a-*
        directly per documented exception. */
-    --tooltip-host-display: inline-flex;
+    --tooltip-host-display-default: inline-flex;
   }
   :scope {
     /* ── Base ── */
     box-sizing: border-box;
-    display: var(--tooltip-host-display);
+    display: var(--tooltip-host-display, var(--tooltip-host-display-default));
     position: relative;
   }
 }

package/components/tooltip/tooltip.js

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

package/components/tree/tree-item.yaml

@@ -2,7 +2,7 @@
 #
 # §184 (v0.5.5): authored to close FEEDBACK-08 §1 — tree-item-ui badge
 # attribute + general orphan-class catalog gap. tree-item-ui has shipped
-# since v0.0.x co-located in tree/class.js (UITreeItem) but never had its
+# since v0.0.x co-located in tree/tree.class.js (UITreeItem) but never had its
 # own catalog entry. With §172 sibling-yaml scanner, this file is picked
 # up next to the parent yaml. Mirrors the v0.5.5 §176 sibling-yaml
 # baseline-orphan closure pattern.

package/components/tree/tree.css

@@ -1,30 +1,30 @@
 @scope (tree-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --tree-row-height:      var(--a-size);
-    --tree-row-radius:      var(--a-radius-sm);
-    --tree-row-px:          var(--a-space-1);
-    --tree-row-gap:         var(--a-space-1);
-    --tree-actions-gap:     var(--a-space-0-5);
-    --tree-indent:          var(--a-space-4);
-    --tree-chevron-size:    var(--a-space-2);
-    --tree-icon-size:       var(--a-space-3);
+    --tree-row-height-default:      var(--a-size);
+    --tree-row-radius-default:      var(--a-radius-sm);
+    --tree-row-px-default:          var(--a-space-1);
+    --tree-row-gap-default:         var(--a-space-1);
+    --tree-actions-gap-default:     var(--a-space-0-5);
+    --tree-indent-default:          var(--a-space-4);
+    --tree-chevron-size-default:    var(--a-space-2);
+    --tree-icon-size-default:       var(--a-space-3);
 
     /* ── Typography ── */
-    --tree-font-size:       var(--a-ui-size);
+    --tree-font-size-default:       var(--a-ui-size);
 
     /* ── Colors ── */
-    --tree-fg:              var(--a-fg);
-    --tree-fg-muted:        var(--a-fg-muted);
-    --tree-bg-hover:        var(--a-bg-muted);
-    --tree-bg-selected:     var(--a-bg-hover);
+    --tree-fg-default:              var(--a-fg);
+    --tree-fg-muted-default:        var(--a-fg-muted);
+    --tree-bg-hover-default:        var(--a-bg-muted);
+    --tree-bg-selected-default:     var(--a-bg-hover);
 
     /* ── Transition ── */
-    --tree-duration:        var(--a-duration-fast);
-    --tree-easing:          var(--a-easing);
+    --tree-duration-default:        var(--a-duration-fast);
+    --tree-easing-default:          var(--a-easing);
 
     /* ── State ── */
-    --tree-focus-ring:      var(--a-focus-ring);
+    --tree-focus-ring-default:      var(--a-focus-ring);
   }
 
   :scope {
@@ -32,8 +32,8 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    font-size: var(--tree-font-size);
-    color: var(--tree-fg);
+    font-size: var(--tree-font-size, var(--tree-font-size-default));
+    color: var(--tree-fg, var(--tree-fg-default));
   }
 }
 
@@ -69,35 +69,35 @@
   [slot="row"] {
     display: flex;
     align-items: center;
-    gap: var(--tree-row-gap);
-    height: var(--tree-row-height);
-    padding-inline-end: var(--tree-row-px);
-    border-radius: var(--tree-row-radius);
+    gap: var(--tree-row-gap, var(--tree-row-gap-default));
+    height: var(--tree-row-height, var(--tree-row-height-default));
+    padding-inline-end: var(--tree-row-px, var(--tree-row-px-default));
+    border-radius: var(--tree-row-radius, var(--tree-row-radius-default));
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
     transition:
-      background var(--tree-duration) var(--tree-easing),
-      color var(--tree-duration) var(--tree-easing);
+      background var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default)),
+      color var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default));
     outline: none;
   }
 
   [slot="row"]:hover {
-    background: var(--tree-bg-hover);
+    background: var(--tree-bg-hover, var(--tree-bg-hover-default));
   }
 
   [slot="row"]:focus-visible {
-    box-shadow: var(--tree-focus-ring);
+    box-shadow: var(--tree-focus-ring, var(--tree-focus-ring-default));
   }
 
   /* :scope[selected] rules moved outside @scope — see tree-ui Safari note at end of file. */
 
   /* ── Chevron ── */
   [slot="chevron"] {
-    --a-icon-size: var(--tree-chevron-size);
+    --a-icon-size: var(--tree-chevron-size, var(--tree-chevron-size-default));
     flex-shrink: 0;
-    color: var(--tree-fg-muted);
-    transition: transform var(--tree-duration) var(--tree-easing);
+    color: var(--tree-fg-muted, var(--tree-fg-muted-default));
+    transition: transform var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default));
     transform: rotate(90deg);
   }
 
@@ -112,8 +112,8 @@
 
   /* ── Icon ── */
   [slot="icon"] {
-    --a-icon-size: var(--tree-icon-size);
-    color: var(--tree-fg-muted);
+    --a-icon-size: var(--tree-icon-size, var(--tree-icon-size-default));
+    color: var(--tree-fg-muted, var(--tree-fg-muted-default));
     flex-shrink: 0;
   }
 
@@ -134,7 +134,7 @@
   [slot="badge"] {
     flex-shrink: 0;
     font-size: var(--tree-badge-size, var(--a-ui-xs));
-    color: var(--tree-badge-fg, var(--tree-fg-muted));
+    color: var(--tree-badge-fg, var(--tree-fg-muted, var(--tree-fg-muted-default)));
     background: var(--tree-badge-bg, transparent);
     padding: 0 var(--tree-badge-px, var(--a-space-1));
     border-radius: var(--tree-badge-radius, var(--a-radius-sm));
@@ -149,10 +149,10 @@
   [slot="actions"] {
     display: flex;
     align-items: center;
-    gap: var(--tree-actions-gap);
+    gap: var(--tree-actions-gap, var(--tree-actions-gap-default));
     margin-inline-start: auto;
     opacity: 0;
-    transition: opacity var(--tree-duration) var(--tree-easing);
+    transition: opacity var(--tree-duration, var(--tree-duration-default)) var(--tree-easing, var(--tree-easing-default));
   }
 
   [slot="row"]:hover [slot="actions"] {
@@ -173,11 +173,11 @@
    `:where(:scope)` still resolve via inheritance. See
    docs/BROWSER-COMPAT.md §3a. */
 tree-ui[selected] > [slot="row"] {
-  background: var(--tree-bg-selected);
-  color: var(--tree-fg);
+  background: var(--tree-bg-selected, var(--tree-bg-selected-default));
+  color: var(--tree-fg, var(--tree-fg-default));
 }
 tree-ui[selected] > [slot="row"] [slot="icon"] {
-  color: var(--tree-fg);
+  color: var(--tree-fg, var(--tree-fg-default));
 }
 tree-ui[selected] > [slot="row"] [slot="actions"] {
   opacity: 1;

package/components/tree/tree.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UITree, UITreeItem } from './class.js';
+import { UITree, UITreeItem } from './tree.class.js';
 
 defineIfFree('tree-ui', UITree);
 defineIfFree('tree-item-ui', UITreeItem);

package/components/upload/upload.css

@@ -1,48 +1,48 @@
 @scope (upload-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --upload-gap:              var(--a-space-2);
-    --upload-radius:           var(--a-radius-md);
-    --upload-font:             var(--a-ui-size);
-    --upload-border:           var(--a-border-subtle);
-    --upload-border-hover:     var(--a-accent);
-    --upload-border-dragover:  var(--a-accent-bg);
-    --upload-bg-dragover:      var(--a-accent-muted);
-    --upload-fg:               var(--a-fg-subtle);
-    --upload-fg-hover:         var(--a-accent);
-    --upload-label-fg:         var(--a-fg);
-    --upload-label-weight:     var(--a-weight-medium);
-    --upload-label-size:       var(--a-label-size);
-    --upload-hint-fg:          var(--a-fg-muted);
-    --upload-hint-size:        var(--a-ui-sm);
-    --upload-bg-disabled:      var(--a-ui-bg-disabled);
-    --upload-fg-disabled:      var(--a-ui-text-disabled);
-    --upload-border-disabled:  var(--a-ui-border-disabled);
-    --upload-focus-ring:       var(--a-focus-ring);
-    --upload-focus-ring-invalid: var(--a-focus-ring-invalid);
+    --upload-gap-default:              var(--a-space-2);
+    --upload-radius-default:           var(--a-radius-md);
+    --upload-font-default:             var(--a-ui-size);
+    --upload-border-default:           var(--a-border-subtle);
+    --upload-border-hover-default:     var(--a-accent);
+    --upload-border-dragover-default:  var(--a-accent-bg);
+    --upload-bg-dragover-default:      var(--a-accent-muted);
+    --upload-fg-default:               var(--a-fg-subtle);
+    --upload-fg-hover-default:         var(--a-accent);
+    --upload-label-fg-default:         var(--a-fg);
+    --upload-label-weight-default:     var(--a-weight-medium);
+    --upload-label-size-default:       var(--a-label-size);
+    --upload-hint-fg-default:          var(--a-fg-muted);
+    --upload-hint-size-default:        var(--a-ui-sm);
+    --upload-bg-disabled-default:      var(--a-ui-bg-disabled);
+    --upload-fg-disabled-default:      var(--a-ui-text-disabled);
+    --upload-border-disabled-default:  var(--a-ui-border-disabled);
+    --upload-focus-ring-default:       var(--a-focus-ring);
+    --upload-focus-ring-invalid-default: var(--a-focus-ring-invalid);
 
     /* ── Spacing ── */
-    --upload-dropzone-pad:     var(--a-space-6);
+    --upload-dropzone-pad-default:     var(--a-space-6);
 
     /* ── Transitions ── */
-    --upload-duration:         var(--a-duration-fast);
-    --upload-easing:           var(--a-easing);
+    --upload-duration-default:         var(--a-duration-fast);
+    --upload-easing-default:           var(--a-easing);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--upload-gap);
-    font-size: var(--upload-font);
+    gap: var(--upload-gap, var(--upload-gap-default));
+    font-size: var(--upload-font, var(--upload-font-default));
   }
 
   /* Label via ::before */
   :scope::before {
     content: attr(label);
-    font-size: var(--upload-label-size);
-    font-weight: var(--upload-label-weight);
-    color: var(--upload-label-fg);
+    font-size: var(--upload-label-size, var(--upload-label-size-default));
+    font-weight: var(--upload-label-weight, var(--upload-label-weight-default));
+    color: var(--upload-label-fg, var(--upload-label-fg-default));
   }
   :scope:not([label])::before,
   :scope[label=""]::before {
@@ -54,38 +54,38 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--upload-dropzone-pad);
-    border: 2px dashed var(--upload-border);
-    border-radius: var(--upload-radius);
-    color: var(--upload-fg);
-    font-size: var(--upload-font);
+    padding: var(--upload-dropzone-pad, var(--upload-dropzone-pad-default));
+    border: 2px dashed var(--upload-border, var(--upload-border-default));
+    border-radius: var(--upload-radius, var(--upload-radius-default));
+    color: var(--upload-fg, var(--upload-fg-default));
+    font-size: var(--upload-font, var(--upload-font-default));
     text-align: center;
     cursor: pointer;
     transition:
-      border-color var(--upload-duration) var(--upload-easing),
-      background var(--upload-duration) var(--upload-easing),
-      color var(--upload-duration) var(--upload-easing),
-      box-shadow var(--upload-duration) var(--upload-easing);
+      border-color var(--upload-duration, var(--upload-duration-default)) var(--upload-easing, var(--upload-easing-default)),
+      background var(--upload-duration, var(--upload-duration-default)) var(--upload-easing, var(--upload-easing-default)),
+      color var(--upload-duration, var(--upload-duration-default)) var(--upload-easing, var(--upload-easing-default)),
+      box-shadow var(--upload-duration, var(--upload-duration-default)) var(--upload-easing, var(--upload-easing-default));
   }
   [data-dropzone]:hover {
-    border-color: var(--upload-border-hover);
-    color: var(--upload-fg-hover);
+    border-color: var(--upload-border-hover, var(--upload-border-hover-default));
+    color: var(--upload-fg-hover, var(--upload-fg-hover-default));
   }
   [data-dropzone]:focus-visible {
     /* Canonical ring via L3 token (see semantics.css FOCUS block). */
     outline: none;
-    box-shadow: var(--upload-focus-ring);
+    box-shadow: var(--upload-focus-ring, var(--upload-focus-ring-default));
   }
   [data-dropzone][data-dragover] {
-    border-color: var(--upload-border-dragover);
-    background: var(--upload-bg-dragover);
+    border-color: var(--upload-border-dragover, var(--upload-border-dragover-default));
+    background: var(--upload-bg-dragover, var(--upload-bg-dragover-default));
   }
 
   /* Hint via ::after on span */
   span[hint]::after {
     content: attr(hint);
-    font-size: var(--upload-hint-size);
-    color: var(--upload-hint-fg);
+    font-size: var(--upload-hint-size, var(--upload-hint-size-default));
+    color: var(--upload-hint-fg, var(--upload-hint-fg-default));
   }
   span[hint=""]::after {
     display: none;
@@ -98,8 +98,8 @@
   [data-filelist] {
     display: flex;
     flex-direction: column;
-    gap: var(--upload-gap);
-    font-size: var(--upload-font);
+    gap: var(--upload-gap, var(--upload-gap-default));
+    font-size: var(--upload-font, var(--upload-font-default));
   }
   [data-filelist]:empty {
     display: none;
@@ -108,12 +108,12 @@
   /* Disabled */
   :scope[disabled] {
     pointer-events: none;
-    color: var(--upload-fg-disabled);
+    color: var(--upload-fg-disabled, var(--upload-fg-disabled-default));
   }
   :scope[disabled] [data-dropzone] {
-    background: var(--upload-bg-disabled);
-    border-color: var(--upload-border-disabled);
-    color: var(--upload-fg-disabled);
+    background: var(--upload-bg-disabled, var(--upload-bg-disabled-default));
+    border-color: var(--upload-border-disabled, var(--upload-border-disabled-default));
+    color: var(--upload-fg-disabled, var(--upload-fg-disabled-default));
     cursor: not-allowed;
   }
 }

package/components/upload/upload.js

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