@adia-ai/web-components 0.6.33 → 0.6.35

package/components/chart/chart.js

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

package/components/chart-legend/chart-legend.css

@@ -1,37 +1,37 @@
 @scope (chart-legend-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --chart-legend-gap:         var(--a-space-2);
-    --chart-legend-row-gap:     var(--a-space-1);
-    --chart-legend-py:          var(--a-space-1);
-    --chart-legend-px:          0;
+    --chart-legend-gap-default:         var(--a-space-2);
+    --chart-legend-row-gap-default:     var(--a-space-1);
+    --chart-legend-py-default:          var(--a-space-1);
+    --chart-legend-px-default:          0;
 
     /* ── Swatch ── */
-    --chart-legend-swatch-size: var(--a-space-2-5);
-    --chart-legend-line-w:      2px;
+    --chart-legend-swatch-size-default: var(--a-space-2-5);
+    --chart-legend-line-w-default:      2px;
 
     /* ── Typography ── */
-    --chart-legend-font-size:   var(--a-ui-tiny);
-    --chart-legend-fg:          var(--a-fg-subtle);
-    --chart-legend-fg-inactive: var(--a-fg-muted);
+    --chart-legend-font-size-default:   var(--a-ui-tiny);
+    --chart-legend-fg-default:          var(--a-fg-subtle);
+    --chart-legend-fg-inactive-default: var(--a-fg-muted);
 
     /* ── Interaction ── */
-    --chart-legend-row-radius:  var(--a-radius-sm);
-    --chart-legend-row-hover:   var(--a-canvas-2);
-    --chart-legend-row-fg-hover: var(--a-fg);
+    --chart-legend-row-radius-default:  var(--a-radius-sm);
+    --chart-legend-row-hover-default:   var(--a-canvas-2);
+    --chart-legend-row-fg-hover-default: var(--a-fg);
 
     /* ── Focus ── */
-    --chart-legend-focus-ring:  var(--a-focus-ring);
+    --chart-legend-focus-ring-default:  var(--a-focus-ring);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
-    gap: var(--chart-legend-gap);
-    padding: var(--chart-legend-py) var(--chart-legend-px);
-    font-size: var(--chart-legend-font-size);
-    color: var(--chart-legend-fg);
+    gap: var(--chart-legend-gap, var(--chart-legend-gap-default));
+    padding: var(--chart-legend-py, var(--chart-legend-py-default)) var(--chart-legend-px, var(--chart-legend-px-default));
+    font-size: var(--chart-legend-font-size, var(--chart-legend-font-size-default));
+    color: var(--chart-legend-fg, var(--chart-legend-fg-default));
   }
 
   /* Position variants — drive flex-direction. DOM placement still wins for
@@ -55,12 +55,12 @@
      font-size, line-height) comes from badge-ui itself. */
   badge-ui[data-row] {
     --badge-bg: transparent;
-    --badge-fg: var(--chart-legend-fg);
-    --badge-radius: var(--chart-legend-row-radius);
+    --badge-fg: var(--chart-legend-fg, var(--chart-legend-fg-default));
+    --badge-radius: var(--chart-legend-row-radius, var(--chart-legend-row-radius-default));
     --badge-px: var(--a-space-1);
-    --badge-py: var(--chart-legend-py);
-    --badge-gap: var(--chart-legend-row-gap);
-    --badge-font-size: var(--chart-legend-font-size);
+    --badge-py: var(--chart-legend-py, var(--chart-legend-py-default));
+    --badge-gap: var(--chart-legend-row-gap, var(--chart-legend-row-gap-default));
+    --badge-font-size: var(--chart-legend-font-size, var(--chart-legend-font-size-default));
     cursor: pointer;
     transition: background var(--a-duration-fast) var(--a-easing),
                 color var(--a-duration-fast) var(--a-easing);
@@ -72,19 +72,19 @@
   }
 
   badge-ui[data-row][role="button"]:hover {
-    --badge-bg: var(--chart-legend-row-hover);
-    --badge-fg: var(--chart-legend-row-fg-hover);
+    --badge-bg: var(--chart-legend-row-hover, var(--chart-legend-row-hover-default));
+    --badge-fg: var(--chart-legend-row-fg-hover, var(--chart-legend-row-fg-hover-default));
   }
 
   badge-ui[data-row][role="button"]:focus-visible {
     outline: none;
-    box-shadow: var(--chart-legend-focus-ring);
+    box-shadow: var(--chart-legend-focus-ring, var(--chart-legend-focus-ring-default));
   }
 
   /* Inactive (toggled-off) rows — dim the swatch + fade label. Drives
      badge-ui's --badge-fg so the label fades alongside the swatch. */
   badge-ui[data-row]:not([data-active]) {
-    --badge-fg: var(--chart-legend-fg-inactive);
+    --badge-fg: var(--chart-legend-fg-inactive, var(--chart-legend-fg-inactive-default));
   }
   badge-ui[data-row]:not([data-active]) swatch-ui {
     opacity: 0.4;

package/components/chart-legend/chart-legend.js

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

package/components/chat-thread/chat-input.a2ui.json

@@ -62,7 +62,7 @@
     "composes": [],
     "events": {
       "submit": {
-        "description": "Fires when the user presses Enter (without Shift) in the textarea OR clicks the built-in send button. The composer suppresses submission while `[loading]` is set.",
+        "description": "Fires when the user presses Enter (without Shift) in the textarea OR clicks the built-in send button. Unconditional — there is no [submit-on-enter] opt-in or opt-out attribute; Enter→submit is delegated from the inner <textarea-ui> which always emits a `submit` event on Enter without Shift. The composer suppresses submission while `[loading]` is set.",
         "detail": {
           "model": {
             "description": "Currently selected model value (empty if no model picker).",

package/components/chat-thread/chat-input.js

@@ -29,7 +29,12 @@ import { UIElement } from '../../core/element.js';
  *                  can draft a follow-up while the model is still responding.
  *
  * Events:
- *   submit   — user pressed Enter or clicked send (detail: { text, model })
+ *   submit   — user pressed Enter (without Shift) in the textarea or
+ *              clicked the built-in send button (detail: { text, model,
+ *              attachments }). Unconditional — Enter→submit is delegated
+ *              from the inner <textarea-ui> which always emits a
+ *              `submit` event on Enter without Shift. There is no
+ *              [submit-on-enter] opt-in/opt-out attribute.
  *
  * Note:
  *   Composite wrapper, not a form field itself. The inner textarea-ui is

package/components/chat-thread/chat-input.yaml

@@ -101,7 +101,10 @@ events:
   submit:
     description: >-
       Fires when the user presses Enter (without Shift) in the textarea
-      OR clicks the built-in send button. The composer suppresses
+      OR clicks the built-in send button. Unconditional — there is no
+      [submit-on-enter] opt-in or opt-out attribute; Enter→submit is
+      delegated from the inner <textarea-ui> which always emits a
+      `submit` event on Enter without Shift. The composer suppresses
       submission while `[loading]` is set.
     detail:
       text:

package/components/chat-thread/chat-thread.js

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

package/components/check/check.css

@@ -4,63 +4,63 @@
    Safari leaves the visual stuck — selectors moved out as plain
    `tagname[attr]` rules. See docs/BROWSER-COMPAT.md §3a. */
 check-ui:not([disabled]):hover [slot="box"] {
-  border-color: var(--check-border-hover);
-  background: var(--check-bg-hover);
+  border-color: var(--check-border-hover, var(--check-border-hover-default));
+  background: var(--check-bg-hover, var(--check-bg-hover-default));
 }
 check-ui[checked]:not([disabled]):hover [slot="box"],
 check-ui[indeterminate]:not([disabled]):hover [slot="box"] {
-  background: var(--check-bg-checked-hover);
-  border-color: var(--check-bg-checked-hover);
+  background: var(--check-bg-checked-hover, var(--check-bg-checked-hover-default));
+  border-color: var(--check-bg-checked-hover, var(--check-bg-checked-hover-default));
 }
 check-ui[checked] [slot="box"],
 check-ui[indeterminate] [slot="box"] {
-  background: var(--check-bg-checked);
-  border-color: var(--check-border-checked);
+  background: var(--check-bg-checked, var(--check-bg-checked-default));
+  border-color: var(--check-border-checked, var(--check-border-checked-default));
 }
 check-ui[checked] {
-  --_icon-w:         calc(var(--check-size) * 0.3);
-  --_icon-h:         calc(var(--check-size) * 0.55);
-  --_icon-border:    solid var(--check-fg-checked);
-  --_icon-bw:        0 calc(var(--check-size) * 0.12) calc(var(--check-size) * 0.12) 0;
+  --_icon-w:         calc(var(--check-size, var(--check-size-default)) * 0.3);
+  --_icon-h:         calc(var(--check-size, var(--check-size-default)) * 0.55);
+  --_icon-border:    solid var(--check-fg-checked, var(--check-fg-checked-default));
+  --_icon-bw:        0 calc(var(--check-size, var(--check-size-default)) * 0.12) calc(var(--check-size, var(--check-size-default)) * 0.12) 0;
   --_icon-transform: rotate(45deg) translate(-1px, -1px);
 }
 check-ui[indeterminate] {
-  --_dash-bg: var(--check-fg-checked);
-  --_icon-w:  calc(var(--check-size) * 0.5);
-  --_icon-h:  calc(var(--check-size) * 0.12);
+  --_dash-bg: var(--check-fg-checked, var(--check-fg-checked-default));
+  --_icon-w:  calc(var(--check-size, var(--check-size-default)) * 0.5);
+  --_icon-h:  calc(var(--check-size, var(--check-size-default)) * 0.12);
 }
 
 @scope (check-ui) {
   :where(:scope) {
     /* ── Tokens ── (size scales with universal [size] attribute via --a-toggle-size) */
-    --check-size:             var(--a-toggle-size);
-    --check-gap:              var(--a-space-2);
-    --check-font-size:        var(--a-ui-size);
-    --check-radius:           min(var(--a-radius-md), var(--a-space-1-5));
+    --check-size-default:             var(--a-toggle-size);
+    --check-gap-default:              var(--a-space-2);
+    --check-font-size-default:        var(--a-ui-size);
+    --check-radius-default:           min(var(--a-radius-md), var(--a-space-1-5));
 
     /* ── State: default ── */
-    --check-bg:               var(--a-ui-bg);
-    --check-border:           var(--a-ui-border);
-    --check-border-hover:     var(--a-fg-subtle);
+    --check-bg-default:               var(--a-ui-bg);
+    --check-border-default:           var(--a-ui-border);
+    --check-border-hover-default:     var(--a-fg-subtle);
 
     /* ── Transitions ── */
-    --check-duration:         var(--a-duration-fast);
-    --check-easing:           var(--a-easing);
+    --check-duration-default:         var(--a-duration-fast);
+    --check-easing-default:           var(--a-easing);
 
     /* ── Focus ── */
-    --check-focus-ring:       var(--a-focus-ring);
+    --check-focus-ring-default:       var(--a-focus-ring);
 
     /* ── State: default hover ── */
-    --check-bg-hover:         var(--a-bg-muted);
+    --check-bg-hover-default:         var(--a-bg-muted);
 
     /* ── State: checked ── */
-    --check-bg-checked:       var(--a-primary);
-    --check-border-checked:   var(--a-primary);
-    --check-fg-checked:       var(--a-chrome-light);
-    --check-bg-checked-hover: var(--a-primary-hover);
+    --check-bg-checked-default:       var(--a-primary);
+    --check-border-checked-default:   var(--a-primary);
+    --check-fg-checked-default:       var(--a-chrome-light);
+    --check-bg-checked-hover-default: var(--a-primary-hover);
 
     /* ── State: disabled ── */
-    --check-fg-disabled:      var(--a-ui-text-disabled);
+    --check-fg-disabled-default:      var(--a-ui-text-disabled);
 
     /* ── Check icon (CSS border trick, no SVG) ── */
     --_icon-w:    0;
@@ -81,28 +81,28 @@ check-ui[indeterminate] {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
-    gap: var(--check-gap);
+    gap: var(--check-gap, var(--check-gap-default));
     cursor: pointer;
     user-select: none;
-    font-size: var(--check-font-size);
+    font-size: var(--check-font-size, var(--check-font-size-default));
     outline: none;
   }
-  :scope[disabled] { cursor: not-allowed; color: var(--check-fg-disabled); }
+  :scope[disabled] { cursor: not-allowed; color: var(--check-fg-disabled, var(--check-fg-disabled-default)); }
 
   /* Box */
   [slot="box"] {
     flex-shrink: 0;
-    width: var(--check-size);
-    height: var(--check-size);
-    border: 1.5px solid var(--check-border);
-    border-radius: var(--check-radius);
-    background: var(--check-bg);
+    width: var(--check-size, var(--check-size-default));
+    height: var(--check-size, var(--check-size-default));
+    border: 1.5px solid var(--check-border, var(--check-border-default));
+    border-radius: var(--check-radius, var(--check-radius-default));
+    background: var(--check-bg, var(--check-bg-default));
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition:
-      background var(--check-duration) var(--check-easing),
-      border-color var(--check-duration) var(--check-easing);
+      background var(--check-duration, var(--check-duration-default)) var(--check-easing, var(--check-easing-default)),
+      border-color var(--check-duration, var(--check-duration-default)) var(--check-easing, var(--check-easing-default));
   }
 
   /* Icon (checkmark or dash) */
@@ -123,7 +123,7 @@ check-ui[indeterminate] {
   :scope[label]::after { content: attr(label); }
 
   /* Focus */
-  :scope:focus-visible [slot="box"] { box-shadow: var(--check-focus-ring); }
+  :scope:focus-visible [slot="box"] { box-shadow: var(--check-focus-ring, var(--check-focus-ring-default)); }
 
   /* Size handled by universal [size] attribute system. */
 }

package/components/check/check.js

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