@adia-ai/web-components 0.6.33 → 0.6.35

package/components/pipeline-status/pipeline-status.css

@@ -5,51 +5,51 @@
      ───────────────────────────────────────────── */
   :where(:scope) {
     /* Layout */
-    --pipeline-status-gap:             var(--a-space-1);
-    --pipeline-status-column-gap:      var(--a-space-1);
-    --pipeline-status-py:              var(--a-space-2);
-    --pipeline-status-px:              var(--a-space-2);
-    --pipeline-status-current-min-h:   1.5em;
-    --pipeline-status-history-pt:      var(--a-space-1);
-    --pipeline-status-history-pad-y:   var(--a-space-0);
-    --pipeline-status-log-pt:          var(--a-space-1);
-    --pipeline-status-log-gap:         var(--a-space-0);
+    --pipeline-status-gap-default:             var(--a-space-1);
+    --pipeline-status-column-gap-default:      var(--a-space-1);
+    --pipeline-status-py-default:              var(--a-space-2);
+    --pipeline-status-px-default:              var(--a-space-2);
+    --pipeline-status-current-min-h-default:   1.5em;
+    --pipeline-status-history-pt-default:      var(--a-space-1);
+    --pipeline-status-history-pad-y-default:   var(--a-space-0);
+    --pipeline-status-log-pt-default:          var(--a-space-1);
+    --pipeline-status-log-gap-default:         var(--a-space-0);
 
     /* Dot sizing (aliased to spacing tokens to avoid raw px ≥ 3) */
-    --pipeline-status-dot-size:        var(--a-space-2);    /*  8px at d=1 */
-    --pipeline-status-log-dot-size:    var(--a-space-1-5);  /*  6px at d=1 */
+    --pipeline-status-dot-size-default:        var(--a-space-2);    /*  8px at d=1 */
+    --pipeline-status-log-dot-size-default:    var(--a-space-1-5);  /*  6px at d=1 */
 
     /* Typography */
-    --pipeline-status-font-family:     var(--a-font-family);
-    --pipeline-status-font-size:       var(--a-ui-sm);
-    --pipeline-status-history-size:    var(--a-ui-tiny);
-    --pipeline-status-log-size:        var(--a-ui-tiny);
-    --pipeline-status-label-weight:    var(--a-weight-medium);
+    --pipeline-status-font-family-default:     var(--a-font-family);
+    --pipeline-status-font-size-default:       var(--a-ui-sm);
+    --pipeline-status-history-size-default:    var(--a-ui-tiny);
+    --pipeline-status-log-size-default:        var(--a-ui-tiny);
+    --pipeline-status-label-weight-default:    var(--a-weight-medium);
 
     /* Colors — keep aliases referenced via semantic tokens */
-    --pipeline-status-fg:              var(--a-fg-subtle);
-    --pipeline-status-label-fg:        var(--a-fg);
-    --pipeline-status-msg-fg:          var(--a-fg-subtle);
-    --pipeline-status-history-fg:      var(--a-fg-subtle);
-    --pipeline-status-log-fg:          var(--a-fg-subtle);
+    --pipeline-status-fg-default:              var(--a-fg-subtle);
+    --pipeline-status-label-fg-default:        var(--a-fg);
+    --pipeline-status-msg-fg-default:          var(--a-fg-subtle);
+    --pipeline-status-history-fg-default:      var(--a-fg-subtle);
+    --pipeline-status-log-fg-default:          var(--a-fg-subtle);
 
-    --pipeline-status-dot-bg:          var(--a-border);
-    --pipeline-status-dot-bg-active:   var(--a-accent);
-    --pipeline-status-dot-bg-complete: var(--a-success-strong);
+    --pipeline-status-dot-bg-default:          var(--a-border);
+    --pipeline-status-dot-bg-active-default:   var(--a-accent);
+    --pipeline-status-dot-bg-complete-default: var(--a-success-strong);
 
-    --pipeline-status-history-border:  var(--a-border-subtle);
-    --pipeline-status-border-thin:     1px;
+    --pipeline-status-history-border-default:  var(--a-border-subtle);
+    --pipeline-status-border-thin-default:     1px;
 
     /* Motion */
-    --pipeline-status-duration:        var(--a-duration);
-    --pipeline-status-easing:          var(--a-easing);
+    --pipeline-status-duration-default:        var(--a-duration);
+    --pipeline-status-easing-default:          var(--a-easing);
     /* Infinite-pulse durations don't map to motion scale */
-    --pipeline-status-pulse-duration:  1.2s;
-    --pipeline-status-pulse-easing:    ease-in-out;
+    --pipeline-status-pulse-duration-default:  1.2s;
+    --pipeline-status-pulse-easing-default:    ease-in-out;
 
     /* Variant targets */
-    --pipeline-status-complete-fg:     var(--a-success-strong);
-    --pipeline-status-complete-border: var(--a-success-strong);
+    --pipeline-status-complete-fg-default:     var(--a-success-strong);
+    --pipeline-status-complete-border-default: var(--a-success-strong);
   }
 
   /* ─────────────────────────────────────────────
@@ -57,47 +57,47 @@
      ───────────────────────────────────────────── */
   :scope {
     display:             block;
-    font-family:         var(--pipeline-status-font-family);
-    font-size:           var(--pipeline-status-font-size);
-    color:               var(--pipeline-status-fg);
+    font-family:         var(--pipeline-status-font-family, var(--pipeline-status-font-family-default));
+    font-size:           var(--pipeline-status-font-size, var(--pipeline-status-font-size-default));
+    color:               var(--pipeline-status-fg, var(--pipeline-status-fg-default));
   }
 
   [data-pipeline-status] {
     display:             flex;
     flex-direction:      column;
-    gap:                 var(--pipeline-status-gap);
-    padding:             var(--pipeline-status-py) var(--pipeline-status-px);
+    gap:                 var(--pipeline-status-gap, var(--pipeline-status-gap-default));
+    padding:             var(--pipeline-status-py, var(--pipeline-status-py-default)) var(--pipeline-status-px, var(--pipeline-status-px-default));
   }
 
   /* Current stage */
   [data-pipeline-current] {
     display:             flex;
     align-items:         center;
-    gap:                 var(--pipeline-status-column-gap);
-    min-height:          var(--pipeline-status-current-min-h);
+    gap:                 var(--pipeline-status-column-gap, var(--pipeline-status-column-gap-default));
+    min-height:          var(--pipeline-status-current-min-h, var(--pipeline-status-current-min-h-default));
   }
 
   [data-pipeline-label] {
-    font-weight:         var(--pipeline-status-label-weight);
-    color:               var(--pipeline-status-label-fg);
+    font-weight:         var(--pipeline-status-label-weight, var(--pipeline-status-label-weight-default));
+    color:               var(--pipeline-status-label-fg, var(--pipeline-status-label-fg-default));
   }
 
   [data-pipeline-msg] {
-    color:               var(--pipeline-status-msg-fg);
+    color:               var(--pipeline-status-msg-fg, var(--pipeline-status-msg-fg-default));
   }
 
   /* Dot indicator */
   [data-pipeline-dot] {
     flex-shrink:         0;
-    width:               var(--pipeline-status-dot-size);
-    height:              var(--pipeline-status-dot-size);
+    width:               var(--pipeline-status-dot-size, var(--pipeline-status-dot-size-default));
+    height:              var(--pipeline-status-dot-size, var(--pipeline-status-dot-size-default));
     border-radius:       50%;
-    background:          var(--pipeline-status-dot-bg);
-    transition:          background var(--pipeline-status-duration) var(--pipeline-status-easing);
+    background:          var(--pipeline-status-dot-bg, var(--pipeline-status-dot-bg-default));
+    transition:          background var(--pipeline-status-duration, var(--pipeline-status-duration-default)) var(--pipeline-status-easing, var(--pipeline-status-easing-default));
   }
 
   [data-pipeline-dot="active"] {
-    animation:           pipeline-pulse var(--pipeline-status-pulse-duration) var(--pipeline-status-pulse-easing) infinite;
+    animation:           pipeline-pulse var(--pipeline-status-pulse-duration, var(--pipeline-status-pulse-duration-default)) var(--pipeline-status-pulse-easing, var(--pipeline-status-pulse-easing-default)) infinite;
   }
 
   [data-pipeline-dot="complete"] {
@@ -111,14 +111,14 @@
 
   /* Complete state — override tokens only */
   :scope[status="completed"] {
-    --pipeline-status-label-fg:       var(--pipeline-status-complete-fg);
-    --pipeline-status-history-border: var(--pipeline-status-complete-border);
+    --pipeline-status-label-fg-default:       var(--pipeline-status-complete-fg, var(--pipeline-status-complete-fg-default));
+    --pipeline-status-history-border-default: var(--pipeline-status-complete-border, var(--pipeline-status-complete-border-default));
   }
 
   /* History (expandable) */
   [data-pipeline-history] {
-    border-top:          var(--pipeline-status-border-thin) solid var(--pipeline-status-history-border);
-    padding-top:         var(--pipeline-status-history-pt);
+    border-top:          var(--pipeline-status-border-thin, var(--pipeline-status-border-thin-default)) solid var(--pipeline-status-history-border, var(--pipeline-status-history-border-default));
+    padding-top:         var(--pipeline-status-history-pt, var(--pipeline-status-history-pt-default));
   }
 
   [data-pipeline-history][hidden] {
@@ -127,19 +127,19 @@
 
   [data-pipeline-history] summary {
     cursor:              pointer;
-    font-size:           var(--pipeline-status-history-size);
-    color:               var(--pipeline-status-history-fg);
+    font-size:           var(--pipeline-status-history-size, var(--pipeline-status-history-size-default));
+    color:               var(--pipeline-status-history-fg, var(--pipeline-status-history-fg-default));
     user-select:         none;
-    padding:             var(--pipeline-status-history-pad-y) var(--a-space-1);
+    padding:             var(--pipeline-status-history-pad-y, var(--pipeline-status-history-pad-y-default)) var(--a-space-1);
     margin-inline:       calc(var(--a-space-1) * -1);
     border-radius:       var(--a-radius-sm);
-    transition:          background var(--pipeline-status-duration) var(--pipeline-status-easing),
-                         color      var(--pipeline-status-duration) var(--pipeline-status-easing);
+    transition:          background var(--pipeline-status-duration, var(--pipeline-status-duration-default)) var(--pipeline-status-easing, var(--pipeline-status-easing-default)),
+                         color      var(--pipeline-status-duration, var(--pipeline-status-duration-default)) var(--pipeline-status-easing, var(--pipeline-status-easing-default));
   }
 
   [data-pipeline-history] summary:hover {
     background:          var(--a-bg-subtle);
-    color:               var(--pipeline-status-label-fg);
+    color:               var(--pipeline-status-label-fg, var(--pipeline-status-label-fg-default));
   }
 
   [data-pipeline-history] summary:focus-visible {
@@ -148,29 +148,29 @@
   }
 
   [data-pipeline-history] summary::marker {
-    color:               var(--pipeline-status-history-fg);
+    color:               var(--pipeline-status-history-fg, var(--pipeline-status-history-fg-default));
   }
 
   /* Log list */
   [data-pipeline-log] {
     list-style:          none;
     margin:              0;
-    padding:             var(--pipeline-status-log-pt) 0 0 0;
+    padding:             var(--pipeline-status-log-pt, var(--pipeline-status-log-pt-default)) 0 0 0;
     display:             flex;
     flex-direction:      column;
-    gap:                 var(--pipeline-status-log-gap);
+    gap:                 var(--pipeline-status-log-gap, var(--pipeline-status-log-gap-default));
   }
 
   [data-pipeline-log] li {
     display:             flex;
     align-items:         center;
-    gap:                 var(--pipeline-status-column-gap);
-    font-size:           var(--pipeline-status-log-size);
-    color:               var(--pipeline-status-log-fg);
+    gap:                 var(--pipeline-status-column-gap, var(--pipeline-status-column-gap-default));
+    font-size:           var(--pipeline-status-log-size, var(--pipeline-status-log-size-default));
+    color:               var(--pipeline-status-log-fg, var(--pipeline-status-log-fg-default));
   }
 
   [data-pipeline-log] [data-pipeline-dot] {
-    width:               var(--pipeline-status-log-dot-size);
-    height:              var(--pipeline-status-log-dot-size);
+    width:               var(--pipeline-status-log-dot-size, var(--pipeline-status-log-dot-size-default));
+    height:              var(--pipeline-status-log-dot-size, var(--pipeline-status-log-dot-size-default));
   }
 }

package/components/pipeline-status/pipeline-status.js

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

package/components/popover/popover.a2ui.json

@@ -91,7 +91,14 @@
       "button",
       "divider"
     ],
-    "slots": {},
+    "slots": {
+      "content": {
+        "description": "Popover body — any interactive content. Hoisted to the top-layer via :popover-open when shown. Positioned via the Popover API + CSS Anchor Positioning per [placement] / [gap]; no manual positioning required."
+      },
+      "trigger": {
+        "description": "Focusable element that opens the popover when activated. Typically <button-ui>, but any focusable element works (button, a link with href). MUST be focusable for keyboard accessibility — bare <span> or <div> children will not respond to keyboard activation. Positioned at the anchor point per [placement]."
+      }
+    },
     "states": [
       {
         "description": "Default, ready for interaction.",

package/components/popover/popover.css

@@ -1,19 +1,19 @@
 @scope (popover-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --popover-px:      var(--a-space-3);
-    --popover-py:      var(--a-space-2);
-    --popover-radius:  var(--a-radius-lg);
+    --popover-px-default:      var(--a-space-3);
+    --popover-py-default:      var(--a-space-2);
+    --popover-radius-default:  var(--a-radius-lg);
 
     /* ── Colors ── */
-    --popover-bg:      var(--a-bg-subtle);
-    --popover-border:  var(--a-border-subtle);
-    --popover-shadow:  var(--a-shadow-lg);
-    --popover-fg:      var(--a-fg);
+    --popover-bg-default:      var(--a-bg-subtle);
+    --popover-border-default:  var(--a-border-subtle);
+    --popover-shadow-default:  var(--a-shadow-lg);
+    --popover-fg-default:      var(--a-fg);
 
     /* ── Typography ── */
-    --popover-font:    var(--a-font-family);
-    --popover-font-size: var(--a-ui-size);
+    --popover-font-default:    var(--a-font-family);
+    --popover-font-size-default: var(--a-ui-size);
   }
 
   :scope {
@@ -37,14 +37,14 @@
   [slot="content"] {
     box-sizing: border-box;
     margin: 0;
-    padding: var(--popover-py) var(--popover-px);
-    background: var(--popover-bg);
-    border: 1px solid var(--popover-border);
-    border-radius: var(--popover-radius);
-    box-shadow: var(--popover-shadow);
-    font-family: var(--popover-font);
-    font-size: var(--popover-font-size);
-    color: var(--popover-fg);
+    padding: var(--popover-py, var(--popover-py-default)) var(--popover-px, var(--popover-px-default));
+    background: var(--popover-bg, var(--popover-bg-default));
+    border: 1px solid var(--popover-border, var(--popover-border-default));
+    border-radius: var(--popover-radius, var(--popover-radius-default));
+    box-shadow: var(--popover-shadow, var(--popover-shadow-default));
+    font-family: var(--popover-font, var(--popover-font-default));
+    font-size: var(--popover-font-size, var(--popover-font-size-default));
+    color: var(--popover-fg, var(--popover-fg-default));
     max-height: calc(100vh - 3rem);
     overflow-y: auto;
     /* Fade + lift in on first paint. @starting-style is the initial frame

package/components/popover/popover.js

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

package/components/popover/popover.yaml

@@ -40,7 +40,20 @@ props:
       - hover
       - manual
 events: {}
-slots: {}
+slots:
+  trigger:
+    description: >-
+      Focusable element that opens the popover when activated.
+      Typically <button-ui>, but any focusable element works (button,
+      a link with href). MUST be focusable for keyboard accessibility —
+      bare <span> or <div> children will not respond to keyboard
+      activation. Positioned at the anchor point per [placement].
+  content:
+    description: >-
+      Popover body — any interactive content. Hoisted to the top-layer
+      via :popover-open when shown. Positioned via the Popover API +
+      CSS Anchor Positioning per [placement] / [gap]; no manual
+      positioning required.
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/progress/progress.css

@@ -1,18 +1,18 @@
 @scope (progress-ui) {
   :where(:scope) {
     /* -- Tokens -- */
-    --progress-track:    var(--a-bg-muted);
-    --progress-fill:     var(--a-accent);
-    --progress-height:   0.375rem;
-    --progress-radius:   var(--a-radius-full);
-    --progress-duration: var(--a-duration);
-    --progress-easing:   var(--a-easing);
+    --progress-track-default:    var(--a-bg-muted);
+    --progress-fill-default:     var(--a-accent);
+    --progress-height-default:   0.375rem;
+    --progress-radius-default:   var(--a-radius-full);
+    --progress-duration-default: var(--a-duration);
+    --progress-easing-default:   var(--a-easing);
 
     /* -- Indeterminate motion -- */
-    --progress-shimmer-duration: 1.5s;
-    --progress-shimmer-easing:   ease-in-out;
-    --progress-spin-duration:    0.6s;
-    --progress-spin-easing:      linear;
+    --progress-shimmer-duration-default: 1.5s;
+    --progress-shimmer-easing-default:   ease-in-out;
+    --progress-spin-duration-default:    0.6s;
+    --progress-spin-easing-default:      linear;
   }
 
   :scope {
@@ -26,17 +26,17 @@
 
   [slot="track"] {
     width: 100%;
-    height: var(--progress-height);
-    border-radius: var(--progress-radius);
-    background: var(--progress-track);
+    height: var(--progress-height, var(--progress-height-default));
+    border-radius: var(--progress-radius, var(--progress-radius-default));
+    background: var(--progress-track, var(--progress-track-default));
     overflow: hidden;
   }
 
   [slot="fill"] {
     height: 100%;
-    border-radius: var(--progress-radius);
-    background: var(--progress-fill);
-    transition: width var(--progress-duration) var(--progress-easing);
+    border-radius: var(--progress-radius, var(--progress-radius-default));
+    background: var(--progress-fill, var(--progress-fill-default));
+    transition: width var(--progress-duration, var(--progress-duration-default)) var(--progress-easing, var(--progress-easing-default));
 
     /* Enter animation: paint the fill at 0 on first frame, then transition
        to the inline width set by JS — so a freshly-mounted determinate bar
@@ -53,12 +53,12 @@
     width: 100% !important;
     background: linear-gradient(
       90deg,
-      var(--progress-track) 0%,
-      var(--progress-fill) 50%,
-      var(--progress-track) 100%
+      var(--progress-track, var(--progress-track-default)) 0%,
+      var(--progress-fill, var(--progress-fill-default)) 50%,
+      var(--progress-track, var(--progress-track-default)) 100%
     );
     background-size: 200% 100%;
-    animation: progress-shimmer var(--progress-shimmer-duration) var(--progress-shimmer-easing) infinite;
+    animation: progress-shimmer var(--progress-shimmer-duration, var(--progress-shimmer-duration-default)) var(--progress-shimmer-easing, var(--progress-shimmer-easing-default)) infinite;
   }
 
   @keyframes progress-shimmer {
@@ -84,10 +84,10 @@
     display: block;
     width: 100%;
     height: 100%;
-    border: 2px solid var(--progress-fill);
+    border: 2px solid var(--progress-fill, var(--progress-fill-default));
     border-top-color: transparent;
-    border-radius: var(--progress-radius);
-    animation: progress-spin var(--progress-spin-duration) var(--progress-spin-easing) infinite;
+    border-radius: var(--progress-radius, var(--progress-radius-default));
+    animation: progress-spin var(--progress-spin-duration, var(--progress-spin-duration-default)) var(--progress-spin-easing, var(--progress-spin-easing-default)) infinite;
   }
 
   @keyframes progress-spin {

package/components/progress/progress.js

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

package/components/progress-row/progress-row.css

@@ -1,15 +1,15 @@
 @scope (progress-row-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --progress-row-gap:           var(--a-space-1);
-    --progress-row-column-gap:    var(--a-space-2);
-    --progress-row-label-size:    var(--a-ui-size);
-    --progress-row-label-fg:      var(--a-fg);
-    --progress-row-meta-size:     var(--a-ui-sm);
-    --progress-row-meta-fg:       var(--a-fg-muted);
+    --progress-row-gap-default:           var(--a-space-1);
+    --progress-row-column-gap-default:    var(--a-space-2);
+    --progress-row-label-size-default:    var(--a-ui-size);
+    --progress-row-label-fg-default:      var(--a-fg);
+    --progress-row-meta-size-default:     var(--a-ui-sm);
+    --progress-row-meta-fg-default:       var(--a-fg-muted);
 
     /* Fill color piped into nested progress-ui via its own token */
-    --progress-row-fill-bg:       var(--a-accent-bg);
+    --progress-row-fill-bg-default:       var(--a-accent-bg);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -20,15 +20,15 @@
     grid-template-areas:
       "label meta"
       "bar   bar";
-    column-gap: var(--progress-row-column-gap);
-    row-gap: var(--progress-row-gap);
+    column-gap: var(--progress-row-column-gap, var(--progress-row-column-gap-default));
+    row-gap: var(--progress-row-gap, var(--progress-row-gap-default));
     align-items: baseline;
   }
 
   [slot="label"] {
     grid-area: label;
-    font-size: var(--progress-row-label-size);
-    color: var(--progress-row-label-fg);
+    font-size: var(--progress-row-label-size, var(--progress-row-label-size-default));
+    color: var(--progress-row-label-fg, var(--progress-row-label-fg-default));
     line-height: 1.4;
     min-width: 0;
     overflow: hidden;
@@ -38,8 +38,8 @@
 
   [slot="meta"] {
     grid-area: meta;
-    font-size: var(--progress-row-meta-size);
-    color: var(--progress-row-meta-fg);
+    font-size: var(--progress-row-meta-size, var(--progress-row-meta-size-default));
+    color: var(--progress-row-meta-fg, var(--progress-row-meta-fg-default));
     font-variant-numeric: tabular-nums;
     justify-self: end;
     line-height: 1.4;
@@ -48,11 +48,11 @@
   progress-ui {
     grid-area: bar;
     /* Pipe our component token into the nested progress component's token */
-    --progress-fill-bg: var(--progress-row-fill-bg);
+    --progress-fill-bg: var(--progress-row-fill-bg, var(--progress-row-fill-bg-default));
   }
 
   /* Variants — remap own tokens only; the nested progress inherits via --progress-row-fill-bg. */
-  :scope[variant="success"] { --progress-row-fill-bg: var(--a-success-bg); }
-  :scope[variant="warning"] { --progress-row-fill-bg: var(--a-warning-bg); }
-  :scope[variant="danger"]  { --progress-row-fill-bg: var(--a-danger-bg); }
+  :scope[variant="success"] { --progress-row-fill-bg-default: var(--a-success-bg); }
+  :scope[variant="warning"] { --progress-row-fill-bg-default: var(--a-warning-bg); }
+  :scope[variant="danger"]  { --progress-row-fill-bg-default: var(--a-danger-bg); }
 }

package/components/progress-row/progress-row.js

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