@adia-ai/web-components 0.6.33 → 0.6.35

package/components/breadcrumb/breadcrumb.css

@@ -1,39 +1,39 @@
 @scope (breadcrumb-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --breadcrumb-gap:          var(--a-space-1);
-    --breadcrumb-max-width:    12rem;
+    --breadcrumb-gap-default:          var(--a-space-1);
+    --breadcrumb-max-width-default:    12rem;
 
     /* ── Typography ── */
-    --breadcrumb-font-size:    var(--a-ui-size);
-    --breadcrumb-current-weight: var(--a-weight-medium);
+    --breadcrumb-font-size-default:    var(--a-ui-size);
+    --breadcrumb-current-weight-default: var(--a-weight-medium);
 
     /* ── Colors ── */
-    --breadcrumb-fg:           var(--a-fg-subtle);
-    --breadcrumb-fg-hover:     var(--a-fg);
-    --breadcrumb-separator-fg: var(--a-fg-muted);
-    --breadcrumb-current-fg:   var(--a-fg-strong);
+    --breadcrumb-fg-default:           var(--a-fg-subtle);
+    --breadcrumb-fg-hover-default:     var(--a-fg);
+    --breadcrumb-separator-fg-default: var(--a-fg-muted);
+    --breadcrumb-current-fg-default:   var(--a-fg-strong);
 
     /* ── Transition ── */
-    --breadcrumb-duration:     var(--a-duration-fast);
-    --breadcrumb-easing:       var(--a-easing);
+    --breadcrumb-duration-default:     var(--a-duration-fast);
+    --breadcrumb-easing-default:       var(--a-easing);
 
     /* ── Link ── */
-    --breadcrumb-link-radius:  var(--a-radius-sm);
-    --breadcrumb-link-focus-ring: var(--a-focus-ring);
+    --breadcrumb-link-radius-default:  var(--a-radius-sm);
+    --breadcrumb-link-focus-ring-default: var(--a-focus-ring);
   }
 
   :scope {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
-    gap: var(--breadcrumb-gap);
-    font-size: var(--breadcrumb-font-size);
+    gap: var(--breadcrumb-gap, var(--breadcrumb-gap-default));
+    font-size: var(--breadcrumb-font-size, var(--breadcrumb-font-size-default));
   }
 
   /* Separator — standalone span, never inside <a> */
   [data-sep] {
-    color: var(--breadcrumb-separator-fg);
+    color: var(--breadcrumb-separator-fg, var(--breadcrumb-separator-fg-default));
     flex-shrink: 0;
     pointer-events: none;
     user-select: none;
@@ -46,32 +46,32 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: var(--breadcrumb-max-width);
-    color: var(--breadcrumb-fg);
+    max-width: var(--breadcrumb-max-width, var(--breadcrumb-max-width-default));
+    color: var(--breadcrumb-fg, var(--breadcrumb-fg-default));
   }
 
   /* Links */
   a[data-item] {
     text-decoration: none;
-    border-radius: var(--breadcrumb-link-radius);
-    transition: color var(--breadcrumb-duration) var(--breadcrumb-easing);
+    border-radius: var(--breadcrumb-link-radius, var(--breadcrumb-link-radius-default));
+    transition: color var(--breadcrumb-duration, var(--breadcrumb-duration-default)) var(--breadcrumb-easing, var(--breadcrumb-easing-default));
   }
 
   a[data-item]:hover {
-    color: var(--breadcrumb-fg-hover);
+    color: var(--breadcrumb-fg-hover, var(--breadcrumb-fg-hover-default));
     text-decoration: underline;
     text-underline-offset: 2px;
   }
 
   a[data-item]:focus-visible {
     outline: none;
-    box-shadow: var(--breadcrumb-link-focus-ring);
+    box-shadow: var(--breadcrumb-link-focus-ring, var(--breadcrumb-link-focus-ring-default));
   }
 
   /* Current (last item) */
   [data-item][aria-current] {
-    color: var(--breadcrumb-current-fg);
-    font-weight: var(--breadcrumb-current-weight);
+    color: var(--breadcrumb-current-fg, var(--breadcrumb-current-fg-default));
+    font-weight: var(--breadcrumb-current-weight, var(--breadcrumb-current-weight-default));
     pointer-events: none;
     text-decoration: none;
   }

package/components/breadcrumb/breadcrumb.js

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

package/components/button/button.css

@@ -6,70 +6,76 @@ button-ui:active { transform: scale(0.97); }
 
 button-ui:not([disabled]):hover,
 button-ui[variant="primary"]:not([disabled]):hover {
-  --button-bg: var(--button-bg-hover);
-  --button-fg: var(--button-fg-hover);
-  --button-border: var(--button-border-hover);
+  --button-bg-default: var(--button-bg-hover, var(--button-bg-hover-default));
+  --button-fg-default: var(--button-fg-hover, var(--button-fg-hover-default));
+  --button-border-default: var(--button-border-hover, var(--button-border-hover-default));
 }
 button-ui[variant="ghost"]:not([disabled]):hover {
-  --button-bg: var(--button-bg-ghost-hover);
-  --button-fg: var(--button-fg-ghost-hover);
-  --button-border: var(--button-border-ghost-hover);
+  --button-bg-default: var(--button-bg-ghost-hover, var(--button-bg-ghost-hover-default));
+  --button-fg-default: var(--button-fg-ghost-hover, var(--button-fg-ghost-hover-default));
+  --button-border-default: var(--button-border-ghost-hover, var(--button-border-ghost-hover-default));
 }
 button-ui[variant="outline"]:not([disabled]):hover {
-  --button-fg: var(--button-fg-hover);
-  --button-border: var(--button-border-hover);
+  --button-fg-default: var(--button-fg-hover, var(--button-fg-hover-default));
+  --button-border-default: var(--button-border-hover, var(--button-border-hover-default));
 }
 button-ui[color="danger"]:not([disabled]):hover {
-  --button-bg: var(--button-bg-hover);
-  --button-fg: var(--button-fg-hover);
-  --button-border: var(--button-border-hover);
+  --button-bg-default: var(--button-bg-hover, var(--button-bg-hover-default));
+  --button-fg-default: var(--button-fg-hover, var(--button-fg-hover-default));
+  --button-border-default: var(--button-border-hover, var(--button-border-hover-default));
 }
 
 @scope (button-ui) {
   :where(:scope) {
-    --button-bg:               var(--a-ui-bg);
-    --button-fg:               var(--a-ui-text);
-    --button-border:           transparent;
-    --button-height:           var(--a-size);
-    --button-px:               var(--a-ui-px);
-    --button-radius:           var(--a-radius);
-    --button-font-size:        var(--a-ui-size);
-    --button-font-weight:      var(--a-ui-weight);
-    --button-gap:              var(--a-space-1);
-    --button-bg-hover:         var(--a-ui-bg-hover);
-    --button-fg-hover:         var(--a-ui-text-hover);
-    --button-border-hover:     transparent;
-    --button-bg-primary:       var(--a-primary);
-    --button-fg-primary:       var(--a-chrome-light);
-    --button-bg-outline:       transparent;
-    --button-fg-outline:       var(--a-fg);
-    --button-border-outline:   var(--a-ui-border);
-    --button-bg-ghost:         transparent;
-    --button-fg-ghost:         var(--a-fg-subtle);
-    --button-fg-ghost-hover:   var(--a-fg-strong);
-    --button-bg-ghost-hover:   var(--a-bg-hover);
-    --button-border-ghost:     transparent;
-    --button-border-ghost-hover: transparent;
-    --button-bg-danger:        var(--a-danger);
-    --button-fg-danger:        var(--a-danger-fg);
-    --button-bg-hover-danger:  var(--a-danger);
-    --button-bg-disabled:      var(--a-ui-bg-disabled);
-    --button-fg-disabled:      var(--a-ui-text-disabled);
-    --button-border-disabled:  transparent;
+    /* OD-5 token-shadowing fix: `-default` suffix on internal-target
+       tokens so the un-suffixed name (--button-bg / --button-fg /
+       --button-border) is reserved as a consumer-extension point.
+       Use sites read `var(--name, var(--name-default))` so a
+       surface-ancestor declaration of --button-bg can win over the
+       button's own state/variant cascade. Spec: docs/specs/genui-css-channel.md OD-5. */
+    --button-bg-default:       var(--a-ui-bg);
+    --button-fg-default:       var(--a-ui-text);
+    --button-border-default:   transparent;
+    --button-height-default:           var(--a-size);
+    --button-px-default:               var(--a-ui-px);
+    --button-radius-default:           var(--a-radius);
+    --button-font-size-default:        var(--a-ui-size);
+    --button-font-weight-default:      var(--a-ui-weight);
+    --button-gap-default:              var(--a-space-1);
+    --button-bg-hover-default:         var(--a-ui-bg-hover);
+    --button-fg-hover-default:         var(--a-ui-text-hover);
+    --button-border-hover-default:     transparent;
+    --button-bg-primary-default:       var(--a-primary);
+    --button-fg-primary-default:       var(--a-chrome-light);
+    --button-bg-outline-default:       transparent;
+    --button-fg-outline-default:       var(--a-fg);
+    --button-border-outline-default:   var(--a-ui-border);
+    --button-bg-ghost-default:         transparent;
+    --button-fg-ghost-default:         var(--a-fg-subtle);
+    --button-fg-ghost-hover-default:   var(--a-fg-strong);
+    --button-bg-ghost-hover-default:   var(--a-bg-hover);
+    --button-border-ghost-default:     transparent;
+    --button-border-ghost-hover-default: transparent;
+    --button-bg-danger-default:        var(--a-danger);
+    --button-fg-danger-default:        var(--a-danger-fg);
+    --button-bg-hover-danger-default:  var(--a-danger);
+    --button-bg-disabled-default:      var(--a-ui-bg-disabled);
+    --button-fg-disabled-default:      var(--a-ui-text-disabled);
+    --button-border-disabled-default:  transparent;
 
     /* ── Transition ── */
-    --button-duration:         var(--a-duration-fast);
-    --button-easing:           var(--a-easing);
+    --button-duration-default:         var(--a-duration-fast);
+    --button-easing-default:           var(--a-easing);
 
     /* ── State ── */
-    --button-focus-ring:       var(--a-focus-ring);
+    --button-focus-ring-default:       var(--a-focus-ring);
 
     /* ── Trailing slot ── */
-    --button-trailing-font-size:  var(--a-ui-sm);
-    --button-trailing-fg:         var(--a-fg-muted);
-    --button-trailing-border:     var(--a-border-subtle);
-    --button-trailing-radius:     var(--a-radius-sm);
-    --button-trailing-px:         var(--a-space-0-5);
+    --button-trailing-font-size-default:  var(--a-ui-sm);
+    --button-trailing-fg-default:         var(--a-fg-muted);
+    --button-trailing-border-default:     var(--a-border-subtle);
+    --button-trailing-radius-default:     var(--a-radius-sm);
+    --button-trailing-px-default:         var(--a-space-0-5);
   }
 
   :scope {
@@ -77,27 +83,27 @@ button-ui[color="danger"]:not([disabled]):hover {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--button-gap);
-    min-width: var(--button-height);   /* keep button at least as wide as it is tall */
-    min-height: var(--button-height);
+    gap: var(--button-gap, var(--button-gap-default));
+    min-width: var(--button-height, var(--button-height-default));   /* keep button at least as wide as it is tall */
+    min-height: var(--button-height, var(--button-height-default));
     overflow: hidden;
-    padding-inline: var(--button-px);
-    border: 1px solid var(--button-border);
-    border-radius: var(--button-radius);
-    background: var(--button-bg);
-    color: var(--button-fg);
+    padding-inline: var(--button-px, var(--button-px-default));
+    border: 1px solid var(--button-border, var(--button-border-default));
+    border-radius: var(--button-radius, var(--button-radius-default));
+    background: var(--button-bg, var(--button-bg-default));
+    color: var(--button-fg, var(--button-fg-default));
     font: inherit;
-    font-size: var(--button-font-size);
-    font-weight: var(--button-font-weight);
+    font-size: var(--button-font-size, var(--button-font-size-default));
+    font-weight: var(--button-font-weight, var(--button-font-weight-default));
     line-height: 1;
     cursor: pointer;
     user-select: none;
     transition:
-      background var(--button-duration) var(--button-easing),
-      border-color var(--button-duration) var(--button-easing),
-      color var(--button-duration) var(--button-easing),
-      opacity var(--button-duration) var(--button-easing),
-      transform var(--button-duration) var(--button-easing);
+      background var(--button-duration, var(--button-duration-default)) var(--button-easing, var(--button-easing-default)),
+      border-color var(--button-duration, var(--button-duration-default)) var(--button-easing, var(--button-easing-default)),
+      color var(--button-duration, var(--button-duration-default)) var(--button-easing, var(--button-easing-default)),
+      opacity var(--button-duration, var(--button-duration-default)) var(--button-easing, var(--button-easing-default)),
+      transform var(--button-duration, var(--button-duration-default)) var(--button-easing, var(--button-easing-default));
     white-space: nowrap;
   }
   :scope[text]::after {
@@ -111,34 +117,38 @@ button-ui[color="danger"]:not([disabled]):hover {
   [slot="trailing"] {
     order: 99;
     margin-inline-start: auto;
-    font-size: var(--button-trailing-font-size);
-    color: var(--button-trailing-fg);
+    font-size: var(--button-trailing-font-size, var(--button-trailing-font-size-default));
+    color: var(--button-trailing-fg, var(--button-trailing-fg-default));
     font-family: inherit;
-    border: 1px solid var(--button-trailing-border);
-    border-radius: var(--button-trailing-radius);
-    padding: 0 var(--button-trailing-px);
+    border: 1px solid var(--button-trailing-border, var(--button-trailing-border-default));
+    border-radius: var(--button-trailing-radius, var(--button-trailing-radius-default));
+    padding: 0 var(--button-trailing-px, var(--button-trailing-px-default));
     line-height: 1;
   }
 
   /* :scope:active moved outside @scope — see Safari 17.x bug note at top. */
-  :scope:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }
+  :scope:focus-visible { outline: none; box-shadow: var(--button-focus-ring, var(--button-focus-ring-default)); }
 
-  /* ── Variants (rest state) ── */
+  /* ── Variants (rest state) ──
+     State/variant blocks override the `-default` (the fallback for
+     when no consumer extension is set). Consumer override of the
+     un-suffixed name (--button-bg etc.) wins at the use site via
+     `var(--button-bg, var(--button-bg-default))`. */
   :scope[variant="primary"] {
-    --button-bg: var(--button-bg-primary);
-    --button-fg: var(--button-fg-primary);
+    --button-bg-default: var(--button-bg-primary, var(--button-bg-primary-default));
+    --button-fg-default: var(--button-fg-primary, var(--button-fg-primary-default));
   }
 
   :scope[variant="outline"] {
-    --button-bg: var(--button-bg-outline);
-    --button-fg: var(--button-fg-outline);
-    --button-border: var(--button-border-outline);
+    --button-bg-default: var(--button-bg-outline, var(--button-bg-outline-default));
+    --button-fg-default: var(--button-fg-outline, var(--button-fg-outline-default));
+    --button-border-default: var(--button-border-outline, var(--button-border-outline-default));
   }
 
   :scope[variant="ghost"] {
-    --button-bg: var(--button-bg-ghost);
-    --button-fg: var(--button-fg-ghost);
-    --button-border: var(--button-border-ghost);
+    --button-bg-default: var(--button-bg-ghost, var(--button-bg-ghost-default));
+    --button-fg-default: var(--button-fg-ghost, var(--button-fg-ghost-default));
+    --button-border-default: var(--button-border-ghost, var(--button-border-ghost-default));
   }
 
   /* ── Color (semantic axis) ──
@@ -147,20 +157,20 @@ button-ui[color="danger"]:not([disabled]):hover {
      vs `<button-ui variant="outline" color="danger">`.
      `variant="danger"` is a deprecated alias migrated to color via JS. */
   :scope[color="danger"] {
-    --button-bg: var(--button-bg-danger);
-    --button-fg: var(--button-fg-danger);
+    --button-bg-default: var(--button-bg-danger, var(--button-bg-danger-default));
+    --button-fg-default: var(--button-fg-danger, var(--button-fg-danger-default));
   }
   :scope[color="success"] {
-    --button-bg: var(--a-success-strong);
-    --button-fg: var(--a-success-fg);
+    --button-bg-default: var(--a-success-strong);
+    --button-fg-default: var(--a-success-fg);
   }
   :scope[color="info"] {
-    --button-bg: var(--a-info-strong);
-    --button-fg: var(--a-info-fg);
+    --button-bg-default: var(--a-info-strong);
+    --button-fg-default: var(--a-info-fg);
   }
   :scope[color="warning"] {
-    --button-bg: var(--a-warning-strong);
-    --button-fg: var(--a-warning-fg);
+    --button-bg-default: var(--a-warning-strong);
+    --button-fg-default: var(--a-warning-fg);
   }
 
   /* Hover rules moved outside @scope — see Safari 17.x bug note at
@@ -175,16 +185,16 @@ button-ui[color="danger"]:not([disabled]):hover {
 
   /* Disabled */
   :scope[disabled] {
-    --button-bg: var(--button-bg-disabled);
-    --button-fg: var(--button-fg-disabled);
-    --button-border: var(--button-border-disabled);
+    --button-bg-default: var(--button-bg-disabled, var(--button-bg-disabled-default));
+    --button-fg-default: var(--button-fg-disabled, var(--button-fg-disabled-default));
+    --button-border-default: var(--button-border-disabled, var(--button-border-disabled-default));
     pointer-events: none;
     cursor: not-allowed;
   }
 
   /* Icon-only (no text) */
   :scope:not([text]), :scope[text=""] {
-    --button-px: 0;
-    width: var(--button-height);
+    --button-px-default: 0;
+    width: var(--button-height, var(--button-height-default));
   }
 }

package/components/button/button.js

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

package/components/calendar-grid/calendar-grid.a2ui.json

@@ -0,0 +1,146 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/CalendarGrid.json",
+  "title": "CalendarGrid",
+  "description": "Substrate primitive — a single-month calendar grid (month nav + day cells + keyboard nav). Renders inline; no trigger, no popover. Used as a substrate by calendar-picker-ui (popover wrapper), date-range-picker-ui (two side-by-side grids), and datetime-picker-ui (one grid + time pane). For a complete date-picker affordance (trigger + popover + form participation), use calendar-picker-ui.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "CalendarGrid"
+    },
+    "disabled": {
+      "description": "Disables all interaction.",
+      "type": "boolean",
+      "default": false
+    },
+    "max": {
+      "description": "Maximum selectable date in ISO format (YYYY-MM-DD).",
+      "type": "string",
+      "default": ""
+    },
+    "min": {
+      "description": "Minimum selectable date in ISO format (YYYY-MM-DD).",
+      "type": "string",
+      "default": ""
+    },
+    "rangeEnd": {
+      "description": "End of a date range (ISO YYYY-MM-DD). See `rangeStart` for the full contract.",
+      "type": "string",
+      "default": ""
+    },
+    "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": ""
+    },
+    "readonly": {
+      "description": "Blocks selection but allows month navigation.",
+      "type": "boolean",
+      "default": false
+    },
+    "value": {
+      "description": "Selected date in ISO format (YYYY-MM-DD).",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "{\"component\": \"CalendarPicker\", \"name\": \"birthdate\"}\n",
+        "why": "CalendarGrid is a substrate primitive — it does not participate in\nforms. The `name` attribute has no effect. Use CalendarPicker\n(form-associated) for single-date input.\n",
+        "wrong": "{\"component\": \"CalendarGrid\", \"name\": \"birthdate\"}\n"
+      }
+    ],
+    "category": "input",
+    "composes": [],
+    "events": {
+      "change": {
+        "description": "User selected a date. detail.value is the ISO string."
+      },
+      "input": {
+        "description": "Focus moved between days during keyboard nav. detail.focusDate is the ISO string."
+      }
+    },
+    "examples": [],
+    "keywords": [
+      "calendar",
+      "date",
+      "grid",
+      "month",
+      "day-picker",
+      "substrate"
+    ],
+    "name": "UICalendarGrid",
+    "related": [
+      "CalendarPicker",
+      "DateRangePicker",
+      "DatetimePicker"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Pointer-events off, reduced opacity, no selection.",
+        "attribute": "disabled",
+        "name": "disabled"
+      },
+      {
+        "description": "Navigation allowed, selection blocked.",
+        "attribute": "readonly",
+        "name": "readonly"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "calendar": [
+        "calendar",
+        "date"
+      ],
+      "grid": [
+        "grid",
+        "calendar"
+      ]
+    },
+    "tag": "calendar-grid-ui",
+    "tokens": {
+      "--calendar-grid-day-bg-hover": {
+        "description": "Background on hover (non-selected, non-outside, non-disabled).",
+        "default": "var(--a-bg-hover)"
+      },
+      "--calendar-grid-day-bg-selected": {
+        "description": "Background of the selected day cell.",
+        "default": "var(--a-accent)"
+      },
+      "--calendar-grid-day-fg-selected": {
+        "description": "Text color of the selected day cell.",
+        "default": "var(--a-accent-fg)"
+      },
+      "--calendar-grid-day-size": {
+        "description": "Square cell size for day buttons.",
+        "default": "2rem"
+      },
+      "--calendar-grid-day-today-color": {
+        "description": "Accent color used for the today-indicator dot + numeral tint.",
+        "default": "var(--a-accent)"
+      },
+      "--calendar-grid-width": {
+        "description": "Grid container width.",
+        "default": "16rem"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}