@adia-ai/web-components 0.8.9 → 0.8.10

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.10] — 2026-07-20
+
+### Added
+- **`<tag-ui>` gains an `accent` variant** (`components/tag/tag.{yaml,css}`; gh#372) — the brand-primary-colored option for non-semantic labels (filter chips, taxonomy tags) that shouldn't imply a success/warning/danger state, mirroring `<badge-ui>`'s existing `accent` variant token-for-token across all three `tone` values. `tag-ui`'s enum was `default | info | success | warning | danger`; `badge-ui`'s parallel enum already had `accent` — the two sibling components' variant vocabularies had drifted apart.
+
+### Fixed
+- **`calendar-grid-ui` in-range highlight now extends across month boundaries** (`components/calendar-grid/calendar-grid.class.js`; gh#368) — a selected range spanning two months previously broke visual continuity at the boundary: the previous/next-month "filler" day loops rendered `data-outside` cells with no date comparison at all, so they could never carry `data-in-range`. Consolidated the per-day predicate logic into a shared `dayCell(date, day, outside)` closure used by all three day-loops; filler days stay exactly as unselectable as before — a pure visual-continuity fix, selection value unaffected.
+- **Dialog-class backdrops (`modal-ui`, `drawer-ui`, `tour-ui`) read black at ~80% opacity, not mid-gray at 50%** (`styles/colors/semantics/{aliases,features}.css`; gh#373) — a self-documented regression from the 2026-07-14 "Material Phase 5" migration, which repointed the dialog scrim onto the shared neutral-500 static ladder (a mid-tone tint, never black; its darkest tier topped out at 60%). Added a purpose-built `--a-chrome-scrim-dialog: oklch(0 0 0 / 0.8)` token (matching the existing non-adaptive black/white CHROME-tier pattern) and repointed `--a-scrim-dialog` to it, leaving the shared ladder's other four roles (hover-wash, toast-veil, generic-overlay, heaviest-veil) untouched.
+- **`<card-ui>`'s `width: stretch` no longer squashes unequal-content flex siblings to identical widths** (`components/card/card.css`; gh#380) — when several `card-ui` KPI tiles (e.g. stat-ui) sit as flex siblings without explicit sizing, `stretch` gave every card an identical flex-basis regardless of content, so `flex-shrink` divided the deficit equally — squeezing a long-title/large-value card to the same pixel width as a trivial short one, which then triggered `stat-ui`'s own (correct) ellipsis truncation. Changed to `flex: 1 1 auto`, which still lets a lone card fill its row but sizes flex-basis from content so unequal siblings shrink proportionally. No effect in block/grid contexts (this repo's canonical KPI-row pattern).
+- **`table.yaml`'s `[raw]` a2ui rule no longer describes non-existent "demo seed data" behavior** (`components/table/table.yaml`; gh#385) — the rule dated to before v0.6.33 and described a data-lifecycle toggle that no longer exists; `[raw]` unconditionally short-circuits the entire data lifecycle (no header injection, no `.data`/`.columns` reconciliation, no aggregation/pagination footers), regardless of whether `.columns`/`.data` are set. Rewritten to match `render()`'s actual `if (this.raw) return;` early-return and every real consumer's usage (spreadsheet/inline-edit style patterns wrapping consumer-owned body markup).
+
+### Maintenance
+- **`dist/` bundles rebuilt** (`web-components.{min.css,min.js,sheet.js}`, `host.{min.css,sheet.js}`, `theme-provider.min.js`) — regenerated from the source changes described above, not independent edits.
+
 ## [0.8.9] — 2026-07-19
 
 ### Added

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

@@ -181,36 +181,39 @@ export class UICalendarGrid extends UIElement {
     const daysInMonth  = new Date(year, month + 1, 0).getDate();
     const daysInPrev   = new Date(year, month, 0).getDate();
 
-    h += '<div data-cal-grid>';
-
-    // Previous-month trailing days (outside, disabled)
-    for (let i = firstDay - 1; i >= 0; i--) {
-      const day = daysInPrev - i;
-      h += `<button-ui variant="ghost" data-cal-day data-outside disabled tabindex="-1" text="${day}"></button-ui>`;
-    }
-
-    // Current-month days
-    for (let d = 1; d <= daysInMonth; d++) {
-      const date       = new Date(year, month, d);
-      const iso        = toISO(year, month, d);
-      const isToday    = sameDay(date, today);
-      const isSelected = selected && sameDay(date, selected);
-      const isDisabled = (minDate && date < minDate) || (maxDate && date > maxDate);
-      const isFocused  = this.#focusedDay === d;
+    // <button-ui variant="ghost" text="…"> (gh issue 276 wave 4) — the day
+    // number moves from element text content to the `text` attribute, which
+    // button-ui renders via CSS attr(text) on its ::after.
+    //
+    // Shared by all three day-loops (prev-month filler / current-month /
+    // next-month filler) so today/selected/in-range predicates stay
+    // consistent across a month boundary (gh#368) — a range spanning two
+    // months must show a continuous in-range band through the filler days
+    // representing the adjacent month, not just within each month's own
+    // cells. Filler days pass `outside: true`, which forces them
+    // disabled/unfocusable/unclickable regardless of the computed
+    // predicates — this only affects the highlight band's visual
+    // continuity, never selectability.
+    const dayCell = (date, day, outside) => {
+      const iso = toISO(date.getFullYear(), date.getMonth(), date.getDate());
+      const isToday      = sameDay(date, today);
+      const isSelected   = !!(selected && sameDay(date, selected));
       // In-range: strictly between rangeStart and rangeEnd (endpoints
       // themselves render as `[data-selected]` via the `value` prop;
       // marking them in-range too would double-up the styling).
-      const isInRange = !!(rangeFrom && rangeTo
+      const isInRange    = !!(rangeFrom && rangeTo
         && date > rangeFrom && date < rangeTo);
       // Range endpoint flags — let CSS render the start/end cell with
-      // half-pill caps so the in-range strip reads as a continuous
-      // band when displayed next to the in-range cells.
+      // half-pill caps so the in-range strip reads as a continuous band
+      // when displayed next to the in-range cells.
       const isRangeStart = !!(rangeFrom && sameDay(date, rangeFrom));
       const isRangeEnd   = !!(rangeTo   && sameDay(date, rangeTo));
+      const isDisabled   = outside || (minDate && date < minDate) || (maxDate && date > maxDate);
+      const isFocused    = !outside && this.#focusedDay === day;
 
       const attrs = [
         'data-cal-day',
-        `data-date="${iso}"`,
+        outside ? 'data-outside' : `data-date="${iso}"`,
         isToday      ? 'data-today' : '',
         isSelected   ? 'data-selected' : '',
         isInRange    ? 'data-in-range' : '',
@@ -221,17 +224,31 @@ export class UICalendarGrid extends UIElement {
         `tabindex="${isFocused ? '0' : '-1'}"`,
       ].filter(Boolean).join(' ');
 
-      // <button-ui variant="ghost" text="…"> (gh issue 276 wave 4) — the day
-      // number moves from element text content to the `text` attribute,
-      // which button-ui renders via CSS attr(text) on its ::after.
-      h += `<button-ui variant="ghost" ${attrs} text="${d}"></button-ui>`;
+      return `<button-ui variant="ghost" ${attrs} text="${day}"></button-ui>`;
+    };
+
+    h += '<div data-cal-grid>';
+
+    // Previous-month trailing days (outside, disabled)
+    const prevMonth = month === 0 ? 11 : month - 1;
+    const prevYear  = month === 0 ? year - 1 : year;
+    for (let i = firstDay - 1; i >= 0; i--) {
+      const day = daysInPrev - i;
+      h += dayCell(new Date(prevYear, prevMonth, day), day, true);
+    }
+
+    // Current-month days
+    for (let d = 1; d <= daysInMonth; d++) {
+      h += dayCell(new Date(year, month, d), d, false);
     }
 
     // Next-month leading days
     const totalCells = firstDay + daysInMonth;
     const remaining  = (7 - (totalCells % 7)) % 7;
+    const nextMonth = month === 11 ? 0 : month + 1;
+    const nextYear  = month === 11 ? year + 1 : year;
     for (let d = 1; d <= remaining; d++) {
-      h += `<button-ui variant="ghost" data-cal-day data-outside disabled tabindex="-1" text="${d}"></button-ui>`;
+      h += dayCell(new Date(nextYear, nextMonth, d), d, true);
     }
 
     h += '</div>';

package/components/card/card.css

@@ -61,7 +61,7 @@
     box-shadow: var(--card-shadow);
     overflow: hidden;
     corner-shape: superellipse(1.1);
-    width: stretch;
+    flex: 1 1 auto;
   }
 
   /* ═══════ Variants — token-only overrides ═══════ */

package/components/table/table.yaml

@@ -269,9 +269,15 @@ a2ui:
       multiline, or per-cell with [data-wrap] on a single column /
       cell.
     - >-
-      Use [raw] in production app consumers — it disables the demo
-      seed data so the table renders only consumer-provided rows /
-      columns / data props.
+      [raw] is a visual-and-lifecycle chrome reset for consumer-owned
+      body markup — render()'s early return (`if (this.raw) return;`)
+      is unconditional: no header injection, no .data/.columns
+      reconciliation, no empty/loading overlays, no aggregation or
+      pagination footers, even if .columns and .data are set. Reach
+      for it only when the consumer authors 100% of the body
+      (spreadsheet / inline-edit style patterns wrapping a native
+      <table>) — never to "keep the data lifecycle but skip demo
+      seeding."
     - >-
       Listen for the `sort` event with detail.key + detail.dir (NOT
       .column / .direction). `cell-click` detail carries {key, row,

package/components/tag/tag.a2ui.json

@@ -55,10 +55,11 @@
       "default": "solid"
     },
     "variant": {
-      "description": "Semantic variant — `default | info | success | warning | danger`.",
+      "description": "Semantic variant — `default | accent | info | success | warning | danger`. `accent` is brand-primary emphasis for non-semantic labels — a filter chip or taxonomy tag that shouldn't imply a success/warning/danger state. Mirrors <badge-ui>'s `accent` variant token-for-token.",
       "type": "string",
       "enum": [
         "default",
+        "accent",
         "info",
         "success",
         "warning",

package/components/tag/tag.css

@@ -93,6 +93,15 @@ tag-ui[removable]:not([disabled]):hover {
      text, near-white in both schemes by design). Reads as a status pill
      where the chip IS the state. Opt out per-tag via [tone="muted"] for
      metadata-chip surfaces in dense lists. */
+  /* `accent` is brand-primary emphasis for non-semantic labels — mirrors
+     <badge-ui>'s `accent` variant token-for-token (--a-primary-bg /
+     on-primary for the solid fill), applied to tag-ui's own solid-default
+     tone shape. Not a status color — no success/warning/danger implication. */
+  :scope[variant="accent"] {
+    --tag-bg: var(--a-primary-bg);
+    --tag-fg: var(--md-sys-color-primary-on-primary);
+  }
+
   :scope[variant="info"] {
     --tag-bg: var(--a-info-bg);
     --tag-fg: var(--md-sys-color-info-on-info);
@@ -149,11 +158,21 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-bg: var(--md-sys-color-danger-container);
     --tag-fg: var(--md-sys-color-danger-on-surface);
   }
+  /* Mirrors <badge-ui>'s default (muted) accent pair —
+     --md-sys-color-primary-container / -on-surface. */
+  :scope[tone="muted"][variant="accent"] {
+    --tag-bg: var(--md-sys-color-primary-container);
+    --tag-fg: var(--md-sys-color-primary-on-surface);
+  }
 
   /* `[tone="solid"]` on the neutral default (or no variant) inverts the
      chrome — solid fg-color bg with bg-color text. High-contrast neutral
-     stamp. Explicit opt-in; the variant-less default stays quiet chrome. */
-  :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]) {
+     stamp. Explicit opt-in; the variant-less default stays quiet chrome.
+     [variant="accent"] is excluded — it already has an explicit solid
+     pair above (the plain [variant="accent"] rule) that this higher-
+     specificity fallback would otherwise clobber when tone="solid" is
+     set explicitly alongside it. */
+  :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]) {
     --tag-bg: var(--md-sys-color-neutral-on-surface);
     --tag-fg: var(--md-sys-color-neutral-background);
   }
@@ -182,8 +201,15 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-fg:     var(--md-sys-color-danger-on-surface);
     --tag-border: var(--md-sys-color-danger-outline);
   }
-  /* Outline on neutral (no family) — fg-muted text + subtle border. */
-  :scope[tone="outline"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]) {
+  /* Mirrors <badge-ui>'s outline accent pair —
+     --md-sys-color-primary-on-surface / -primary-outline. */
+  :scope[tone="outline"][variant="accent"] {
+    --tag-fg:     var(--md-sys-color-primary-on-surface);
+    --tag-border: var(--md-sys-color-primary-outline);
+  }
+  /* Outline on neutral (no family) — fg-muted text + subtle border.
+     [variant="accent"] excluded — see the [tone="solid"] fallback note above. */
+  :scope[tone="outline"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]) {
     --tag-fg:     var(--a-fg-muted);
     --tag-border: var(--md-sys-color-neutral-outline);
   }

package/components/tag/tag.d.ts

@@ -54,8 +54,8 @@ tone unless `tone="solid"` is set explicitly (high-contrast neutral
 inverse), or `tone="outline"` (fg-muted text + subtle border).
  */
   tone: 'solid' | 'muted' | 'outline';
-  /** Semantic variant — `default | info | success | warning | danger`. */
-  variant: 'default' | 'info' | 'success' | 'warning' | 'danger';
+  /** Semantic variant — `default | accent | info | success | warning | danger`. `accent` is brand-primary emphasis for non-semantic labels — a filter chip or taxonomy tag that shouldn't imply a success/warning/danger state. Mirrors <badge-ui>'s `accent` variant token-for-token. */
+  variant: 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
 
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,

package/components/tag/tag.yaml

@@ -45,11 +45,15 @@ props:
     type: string
     dynamic: true
   variant:
-    description: Semantic variant — `default | info | success | warning | danger`.
+    description: Semantic variant — `default | accent | info | success | warning | danger`.
+      `accent` is brand-primary emphasis for non-semantic labels — a filter chip
+      or taxonomy tag that shouldn't imply a success/warning/danger state. Mirrors
+      <badge-ui>'s `accent` variant token-for-token.
     type: string
     default: default
     enum:
       - default
+      - accent
       - info
       - success
       - warning