@adia-ai/web-components 0.6.34 → 0.6.36

package/components/calendar-grid/calendar-grid.js

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

package/components/calendar-grid/calendar-grid.yaml

@@ -42,6 +42,26 @@ props:
     type: boolean
     default: false
     reflect: true
+  rangeStart:
+    description: >-
+      Start of a date range (ISO YYYY-MM-DD). When both rangeStart and
+      rangeEnd are set + ordered, day cells strictly between the
+      endpoints get `[data-in-range]` stamped for visual continuity.
+      Used by `<date-range-picker-ui>` which pushes the same from/to
+      onto both calendar panes. Endpoints themselves render via the
+      `value` prop's `[data-selected]` state.
+    type: string
+    default: ''
+    reflect: true
+    attribute: range-start
+  rangeEnd:
+    description: >-
+      End of a date range (ISO YYYY-MM-DD). See `rangeStart` for the
+      full contract.
+    type: string
+    default: ''
+    reflect: true
+    attribute: range-end
 events:
   change:
     description: User selected a date. detail.value is the ISO string.

package/components/calendar-picker/calendar-picker.js

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

package/components/card/card.js

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

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.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.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.css

@@ -130,11 +130,23 @@
     line-height: 1.4;
     white-space: nowrap;
     overflow: hidden;
+    /* Positioning context for the [data-empty]::before placeholder pseudo
+       (kept out of inline flow so the caret renders at content-start). */
+    position: relative;
   }
+  /* Empty-state placeholder. Absolutely positioned (NOT inline) so an
+     in-flow pseudo box doesn't push the caret-at-position-0 to the right
+     of the placeholder text after type-then-delete. Same pattern
+     input-ui + textarea-ui + tags-input-ui use. */
   [data-input][data-empty]::before {
     content: attr(data-placeholder);
     color: var(--combobox-placeholder-fg, var(--combobox-placeholder-fg-default));
     pointer-events: none;
+    position: absolute;
+    inset: 0;
+    padding: inherit;
+    display: flex;
+    align-items: center;
   }
 
   [data-clear] {

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
@@ -469,7 +485,7 @@ export class UIDateRangePicker extends UIFormElement {
           // Matches select-ui + calendar-picker-ui's anchorPopover pattern.
           this.#anchorCleanup?.();
           this.#anchorCleanup = anchorPopover(this.#triggerRef, this.#popoverRef, {
-            placement: this.getAttribute('placement') || 'bottom-start',
+            placement: this.getAttribute('placement') || 'bottom',
             gap: 4,
           });
           document.addEventListener('pointerdown', this.#onOutside);
@@ -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);
 
@@ -46,19 +62,52 @@
   }
 
   /* ── Block 2 — BASE ── */
+  /* Host is a transparent inline wrapper — trigger button-ui paints its
+     own surface. Mirrors the datetime-picker decision (2026-05-24): a host
+     background paint creates an off-axis rectangle inside field-ui because
+     the field-ui's value-cell expands beyond the inline-block host. */
   :scope {
     box-sizing: border-box;
     position: relative;
     display: inline-block;
-    background: var(--date-range-picker-bg, var(--date-range-picker-bg-default));
     color: var(--date-range-picker-fg, var(--date-range-picker-fg-default));
     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.css

@@ -38,11 +38,17 @@
   }
 
   /* ── Block 2 — BASE ── */
+  /* Host is a transparent inline wrapper. Painting `background` on the host
+     used to create an off-axis rectangle behind the trigger when the host
+     sat inside a field-ui (the field-ui's value-cell expanded but the
+     inline-block host only sized to its child). Trigger button-ui paints
+     its own surface — host stays transparent.
+     2026-05-24 QA: "odd background colors and block element container for
+     inline trigger" — consumer report on /site/components/datetime-picker. */
   :scope {
     box-sizing: border-box;
     position: relative;
     display: inline-block;
-    background: var(--datetime-picker-bg, var(--datetime-picker-bg-default));
     color: var(--datetime-picker-fg, var(--datetime-picker-fg-default));
     font-size: var(--a-ui-size);
   }

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';