@adia-ai/web-components 0.6.34 → 0.6.35

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.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);
 

package/components/code/code.js

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

package/components/col/col.js

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

package/components/color-input/color-input.js

@@ -19,7 +19,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIColorInput } from './class.js';
+import { UIColorInput } from './color-input.class.js';
 
 defineIfFree('color-input-ui', UIColorInput);
 

package/components/color-picker/color-picker.js

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

package/components/combobox/combobox.js

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

package/components/command/command.js

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

package/components/date-range-picker/{class.js → date-range-picker.class.js}

@@ -338,7 +338,7 @@ export class UIDateRangePicker extends UIFormElement {
       this.#triggerRef.addEventListener('click', this.#onTriggerClick);
       // Register keydown in CAPTURE phase so we set the keyboard-origin
       // flag BEFORE <button-ui>'s own keydown handler synthesizes a
-      // click via `this.click()` (see button/class.js:148).
+      // click via `this.click()` (see button/button.class.js:148).
       this.#triggerRef.addEventListener('keydown', this.#onTriggerKey, true);
       this.#popoverRef.addEventListener('click', this.#onPopoverClick);
       this.#popoverRef.addEventListener('keydown', this.#onPopoverKey);
@@ -433,15 +433,31 @@ export class UIDateRangePicker extends UIFormElement {
     // Cascade min/max + selection state into the calendar panes.
     const range = parseRange(this.value);
     const pending = this.#pending;
+    // Effective endpoints — pending (mid-click) takes precedence over
+    // value. Push the SAME from/to onto BOTH grids so each independently
+    // lights up its in-range cells via `[data-in-range]`. Without this,
+    // only the two endpoint cells got `[data-selected]` and the days
+    // between them rendered as plain background — the "fill the cells
+    // between start and end dates" trap.
+    const effFrom = pending?.from || range?.from || '';
+    const effTo   = pending?.to   || range?.to   || '';
+    const setRangeAttrs = (cal) => {
+      if (effFrom) cal.setAttribute('range-start', effFrom);
+      else cal.removeAttribute('range-start');
+      if (effTo) cal.setAttribute('range-end', effTo);
+      else cal.removeAttribute('range-end');
+    };
     if (this.#calFromRef) {
       if (this.min) this.#calFromRef.setAttribute('min', this.min);
       if (this.max) this.#calFromRef.setAttribute('max', this.max);
       this.#calFromRef.value = pending?.from || range?.from || '';
+      setRangeAttrs(this.#calFromRef);
     }
     if (this.#calToRef) {
       if (this.min) this.#calToRef.setAttribute('min', this.min);
       if (this.max) this.#calToRef.setAttribute('max', this.max);
       this.#calToRef.value = pending?.to || range?.to || '';
+      setRangeAttrs(this.#calToRef);
     }
 
     // Render the preset rail (unless overridden by [slot="presets"] or
@@ -544,7 +560,7 @@ export class UIDateRangePicker extends UIFormElement {
 
   // Flag set by #onTriggerKey to mark the *next* click as keyboard-originated.
   // <button-ui> calls `this.click()` from its own Enter/Space keydown handler
-  // (see button/class.js:148), so the click that follows a keyboard press is
+  // (see button/button.class.js:148), so the click that follows a keyboard press is
   // synthetic. We use this flag to disambiguate the `trigger:` field on the
   // `open` event.
   #keyboardOpen = false;

package/components/date-range-picker/date-range-picker.css

@@ -33,10 +33,26 @@
     --date-range-picker-selected-fg-default:      var(--a-accent-fg);
     --date-range-picker-preview-bg-default:       var(--a-accent-muted);
 
-    /* Trigger */
+    /* Trigger — mirrors the canonical trigger surface used by
+       <select-ui> and <calendar-picker-ui> so consumers see a
+       consistent open-picker chrome across the input/picker family.
+       The values are deliberately the same tokens select/calendar
+       cascade onto their own `--*-trigger-*` aliases. */
     --date-range-picker-trigger-min-width-default: 14em;
-
-    /* Padding */
+    --date-range-picker-trigger-height-default:    var(--a-size);
+    --date-range-picker-trigger-px-default:        var(--a-ui-px);
+    --date-range-picker-trigger-gap-default:       var(--a-space-1);
+    --date-range-picker-trigger-radius-default:    var(--a-radius);
+    --date-range-picker-trigger-bg-default:        var(--a-ui-bg);
+    --date-range-picker-trigger-bg-hover-default:  var(--a-ui-bg-hover);
+    --date-range-picker-trigger-fg-default:        var(--a-ui-text-subtle);
+    --date-range-picker-trigger-border-default:    var(--a-ui-border);
+    --date-range-picker-trigger-border-hover-default: var(--a-ui-border-hover);
+    --date-range-picker-trigger-focus-ring-default:   var(--a-focus-ring);
+
+    /* Popover-internal padding (NOT the trigger — kept distinct from
+       --date-range-picker-trigger-px to avoid the historical conflation
+       that made the trigger render with --a-space-3 vertical inflation). */
     --date-range-picker-px-default:               var(--a-space-3);
     --date-range-picker-py-default:               var(--a-space-2);
 
@@ -55,10 +71,40 @@
     font-size: var(--a-ui-size);
   }
 
-  /* Default trigger sizing — composes button-ui's surface; just
-     stretches the min-width so the formatted-range label fits. */
+  /* ── Trigger ──
+     Canonical trigger surface matching <select-ui> + <calendar-picker-ui>:
+     flex row, --a-size min-height, --a-ui-px padding, --a-radius corner,
+     --a-ui-border outline. The trigger is a <button-ui slot="trigger">
+     stamped by date-range-picker.class.js — these rules override button-ui's defaults at
+     equal specificity so the picker trigger reads as part of the
+     input/picker family rather than a generic button. */
   :scope > [slot="trigger"] {
     min-width: var(--date-range-picker-trigger-min-width, var(--date-range-picker-trigger-min-width-default));
+    min-height: var(--date-range-picker-trigger-height, var(--date-range-picker-trigger-height-default));
+    padding: 0 var(--date-range-picker-trigger-px, var(--date-range-picker-trigger-px-default));
+    gap: var(--date-range-picker-trigger-gap, var(--date-range-picker-trigger-gap-default));
+    border-radius: var(--date-range-picker-trigger-radius, var(--date-range-picker-trigger-radius-default));
+    border: 1px solid var(--date-range-picker-trigger-border, var(--date-range-picker-trigger-border-default));
+    background: var(--date-range-picker-trigger-bg, var(--date-range-picker-trigger-bg-default));
+    color: var(--date-range-picker-trigger-fg, var(--date-range-picker-trigger-fg-default));
+    /* Justify content so leading icon + label sit at start, trailing
+       caret at end — same shape select-ui's trigger uses via
+       `justify-content: space-between` on a [leading|display|caret]
+       slot triplet. button-ui's natural alignment is `center`; our
+       leading+text+trailing layout reads better as space-between. */
+    justify-content: space-between;
+    line-height: 1;
+    transition:
+      border-color var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default)),
+      background   var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default));
+  }
+  :scope > [slot="trigger"]:hover {
+    border-color: var(--date-range-picker-trigger-border-hover, var(--date-range-picker-trigger-border-hover-default));
+    background: var(--date-range-picker-trigger-bg-hover, var(--date-range-picker-trigger-bg-hover-default));
+  }
+  :scope:focus-visible { outline: none; }
+  :scope:focus-visible > [slot="trigger"] {
+    box-shadow: var(--date-range-picker-trigger-focus-ring, var(--date-range-picker-trigger-focus-ring-default));
   }
 
   /* States */

package/components/date-range-picker/date-range-picker.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIDateRangePicker } from './class.js';
+import { UIDateRangePicker } from './date-range-picker.class.js';
 
 defineIfFree('date-range-picker-ui', UIDateRangePicker);
 

package/components/datetime-picker/{class.js → datetime-picker.class.js}

@@ -293,7 +293,7 @@ export class UIDatetimePicker extends UIFormElement {
       this.#ensureParts();
       this.#triggerRef.addEventListener('click', this.#onTriggerClick);
       // Capture-phase so we flag keyboard-origin BEFORE <button-ui>'s
-      // own keydown synthesizes the click (button/class.js:148).
+      // own keydown synthesizes the click (button/button.class.js:148).
       this.#triggerRef.addEventListener('keydown', this.#onTriggerKey, true);
       this.#popoverRef.addEventListener('click', this.#onPopoverClick);
       this.#popoverRef.addEventListener('keydown', this.#onPopoverKey);

package/components/datetime-picker/datetime-picker.js

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

package/components/demo-toggle/demo-toggle.js

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

package/components/description-list/description-list.js

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

package/components/divider/divider.js

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

package/components/drawer/drawer.js

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

package/components/embed/embed.js

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

package/components/empty-state/empty-state.js

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

package/components/feed/feed.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIFeedContainer, UIFeedItem, UIFeed } from './class.js';
+import { UIFeedContainer, UIFeedItem, UIFeed } from './feed.class.js';
 
 defineIfFree('feed-ui', UIFeedContainer);
 defineIfFree('feed-item-ui', UIFeedItem);

package/components/field/field.js

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

package/components/field/field.test.js

@@ -201,7 +201,7 @@ describe('field-ui', () => {
     // The CSS rule must be present in the source; this test documents intent
     // rather than measuring computed style (which requires a real browser for @scope).
     const fieldCssSource = document.head.innerHTML + document.body.innerHTML;
-    // Accept if either the stylesheet is found OR the class.js property is declared.
+    // Accept if either the stylesheet is found OR the field.class.js property is declared.
     const hasAlignProp = f => f.align !== undefined;
     const f = mount('<field-ui label="X"><input /></field-ui>');
     expect(hasAlignProp(f)).toBe(true);

package/components/fields/fields.js

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

package/components/grid/grid.js

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

package/components/heatmap/heatmap.js

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

package/components/icon/icon.js

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

package/components/image/image.js

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

package/components/index.js

@@ -62,7 +62,9 @@ export { UIProgress } from './progress/progress.js';
 export { UIStepProgress } from './step-progress/step-progress.js';
 export { UISkeleton } from './skeleton/skeleton.js';
 export { UISpinner } from './spinner/spinner.js';
+export { UILoadingOverlay } from './loading-overlay/loading-overlay.js';
 export { UIAlert } from './alert/alert.js';
+export { UIInlineMessage } from './inline-message/inline-message.js';
 export { UIKbd } from './kbd/kbd.js';
 export { UITag } from './tag/tag.js';
 export { UISwatch } from './swatch/swatch.js';
@@ -90,6 +92,7 @@ export { UIOtpInput } from './otp-input/otp-input.js';
 export { UIImage } from './image/image.js';
 export { UISearch } from './search/search.js';
 export { UICombobox } from './combobox/combobox.js';
+export { UITagsInput } from './tags-input/tags-input.js';
 export { UIStat } from './stat/stat.js';
 export { UIProgressRow } from './progress-row/progress-row.js';
 export { UIActionList, UIActionItem } from './action-list/action-list.js';

package/components/inline-message/inline-message.a2ui.json

@@ -0,0 +1,143 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/InlineMessage.json",
+  "title": "InlineMessage",
+  "description": "In-flow message glyph + text used in form-field rows for validation\nfeedback, hint copy, and inline confirmations. Distinguished from\n<alert-ui> (banner / surface-bearing notice) by carrying no surface\nfill, no border, no padding box — severity is foreground color +\nicon only. Variants map to severity (info / success / warning /\ndanger). Nests inside <field-ui>, <col-ui>, <row-ui> without\nbreaking field rhythm. Non-interactive annotation only.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "InlineMessage"
+    },
+    "icon": {
+      "description": "Phosphor glyph override; each [variant] ships a sensible default (info / check-circle / warning / x-circle).",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    },
+    "live": {
+      "description": "Sets `aria-live` on the host for dynamic message updates. Empty = no live region (static annotation).",
+      "type": "string",
+      "enum": [
+        "",
+        "polite",
+        "assertive"
+      ],
+      "default": ""
+    },
+    "text": {
+      "description": "Single-line message text. Default-slot content wins when present.",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    },
+    "variant": {
+      "description": "Semantic severity tone — drives icon + foreground color. Default carries no leading icon (pure hint copy).",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "feedback",
+    "composes": [
+      "icon-ui"
+    ],
+    "events": {},
+    "examples": [
+      {
+        "description": "Email field with a danger inline-message under the input.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Field\",\n    \"label\": \"Email\",\n    \"children\": [\n      \"input\",\n      \"msg\"\n    ]\n  },\n  {\n    \"id\": \"input\",\n    \"component\": \"Input\",\n    \"type\": \"email\"\n  },\n  {\n    \"id\": \"msg\",\n    \"component\": \"InlineMessage\",\n    \"variant\": \"danger\",\n    \"text\": \"Email address is required\"\n  }\n]",
+        "name": "field-validation"
+      },
+      {
+        "description": "Password field with a muted hint (default variant, no icon).",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Field\",\n    \"label\": \"Password\",\n    \"children\": [\n      \"input\",\n      \"hint\"\n    ]\n  },\n  {\n    \"id\": \"input\",\n    \"component\": \"Input\",\n    \"type\": \"password\"\n  },\n  {\n    \"id\": \"hint\",\n    \"component\": \"InlineMessage\",\n    \"text\": \"At least 8 characters\"\n  }\n]",
+        "name": "password-hint"
+      },
+      {
+        "description": "Username field with a polite live-region success confirmation.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Field\",\n    \"label\": \"Username\",\n    \"children\": [\n      \"input\",\n      \"msg\"\n    ]\n  },\n  {\n    \"id\": \"input\",\n    \"component\": \"Input\"\n  },\n  {\n    \"id\": \"msg\",\n    \"component\": \"InlineMessage\",\n    \"variant\": \"success\",\n    \"live\": \"polite\",\n    \"text\": \"Username is available\"\n  }\n]",
+        "name": "username-success"
+      }
+    ],
+    "keywords": [
+      "inline",
+      "message",
+      "hint",
+      "helper",
+      "validation",
+      "error",
+      "field-error",
+      "helper-text",
+      "error-text",
+      "form-feedback",
+      "status",
+      "notice"
+    ],
+    "name": "UIInlineMessage",
+    "related": [
+      "alert",
+      "field",
+      "input",
+      "text"
+    ],
+    "slots": {
+      "default": {
+        "description": "Message body — text or inline DOM (e.g. <link-ui>, <kbd-ui>). Wins over the [text] attribute when present. Stays inline so the message reads as one annotation line under the field."
+      },
+      "leading": {
+        "description": "Leading icon slot. Stamped automatically from [icon] or the variant's default glyph. Consumer-provided <icon-ui slot=\"leading\"> is preserved across [variant] changes (never overwritten)."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for screen-reader pickup.",
+        "name": "idle"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "error": [
+        "error",
+        "alert",
+        "validation"
+      ],
+      "helper": [
+        "hint",
+        "help",
+        "tooltip"
+      ],
+      "hint": [
+        "hint",
+        "tooltip",
+        "help"
+      ],
+      "message": [
+        "alert",
+        "notification",
+        "hint"
+      ],
+      "notice": [
+        "alert",
+        "banner",
+        "hint"
+      ],
+      "validation": [
+        "validation",
+        "error",
+        "alert"
+      ]
+    },
+    "tag": "inline-message-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}