@adia-ai/web-components 0.6.33 → 0.6.35

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

@@ -0,0 +1,136 @@
+# Hand-authored substrate primitive — the inline calendar grid extracted
+# from calendar-picker-ui so date-range-picker-ui + datetime-picker-ui can
+# compose JUST the grid (no trigger, no popover). Edit this file; run
+# `npm run components` to regenerate calendar-grid.a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UICalendarGrid
+tag: calendar-grid-ui
+status: stable
+component: CalendarGrid
+category: input
+version: 1
+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.
+props:
+  value:
+    description: Selected date in ISO format (YYYY-MM-DD).
+    type: string
+    default: ''
+    reflect: true
+  min:
+    description: Minimum selectable date in ISO format (YYYY-MM-DD).
+    type: string
+    default: ''
+    reflect: true
+  max:
+    description: Maximum selectable date in ISO format (YYYY-MM-DD).
+    type: string
+    default: ''
+    reflect: true
+  disabled:
+    description: Disables all interaction.
+    type: boolean
+    default: false
+    reflect: true
+  readonly:
+    description: Blocks selection but allows month navigation.
+    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.
+  input:
+    description: Focus moved between days during keyboard nav. detail.focusDate is the ISO string.
+slots: {}
+states:
+  - name: disabled
+    description: Pointer-events off, reduced opacity, no selection.
+    attribute: disabled
+  - name: readonly
+    description: Navigation allowed, selection blocked.
+    attribute: readonly
+traits: []
+tokens:
+  --calendar-grid-width:
+    description: Grid container width.
+    default: 16rem
+  --calendar-grid-day-size:
+    description: Square cell size for day buttons.
+    default: 2rem
+  --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-bg-hover:
+    description: Background on hover (non-selected, non-outside, non-disabled).
+    default: var(--a-bg-hover)
+  --calendar-grid-day-today-color:
+    description: Accent color used for the today-indicator dot + numeral tint.
+    default: var(--a-accent)
+a2ui:
+  rules:
+    - >-
+      Use <CalendarGrid> only as a substrate primitive composed inside a
+      higher-level component (date-range picker, datetime picker, custom
+      date affordance). For a full single-date input, use
+      <CalendarPicker> — it adds a trigger button, popover surface, and
+      form-association.
+    - >-
+      <CalendarGrid> is NOT form-associated. Its emitted `change` event
+      is the sole signal to the parent — the parent owns the canonical
+      value + form participation.
+anti_patterns:
+  - wrong: |
+      {"component": "CalendarGrid", "name": "birthdate"}
+    why: |
+      CalendarGrid is a substrate primitive — it does not participate in
+      forms. The `name` attribute has no effect. Use CalendarPicker
+      (form-associated) for single-date input.
+    fix: |
+      {"component": "CalendarPicker", "name": "birthdate"}
+keywords:
+  - calendar
+  - date
+  - grid
+  - month
+  - day-picker
+  - substrate
+synonyms:
+  calendar:
+    - calendar
+    - date
+  grid:
+    - grid
+    - calendar
+related:
+  - CalendarPicker
+  - DateRangePicker
+  - DatetimePicker

package/components/calendar-picker/calendar-picker.css

@@ -3,85 +3,85 @@
     /* ── Tokens ── */
 
     /* Host / label */
-    --calendar-picker-gap:                    var(--a-space-2);
-    --calendar-picker-font-size:              var(--a-ui-size);
-    --calendar-picker-label-size:             var(--a-label-size);
-    --calendar-picker-label-fg:               var(--a-label-color);
-    --calendar-picker-label-fg-focus:         var(--a-fg-subtle);
+    --calendar-picker-gap-default:                    var(--a-space-2);
+    --calendar-picker-font-size-default:              var(--a-ui-size);
+    --calendar-picker-label-size-default:             var(--a-label-size);
+    --calendar-picker-label-fg-default:               var(--a-label-color);
+    --calendar-picker-label-fg-focus-default:         var(--a-fg-subtle);
 
     /* Trigger */
-    --calendar-picker-trigger-height:         var(--a-size);
-    --calendar-picker-trigger-px:             var(--a-ui-px);
-    --calendar-picker-trigger-gap:            var(--a-space-1);
-    --calendar-picker-trigger-radius:         var(--a-radius);
-    --calendar-picker-trigger-bg:             var(--a-ui-bg);
-    --calendar-picker-trigger-bg-hover:       var(--a-ui-bg-hover);
-    --calendar-picker-trigger-fg:             var(--a-ui-text-subtle);
-    --calendar-picker-trigger-border:         var(--a-ui-border);
-    --calendar-picker-trigger-border-hover:   var(--a-ui-border-hover);
-    --calendar-picker-trigger-focus-ring:     var(--a-focus-ring);
-    --calendar-picker-trigger-focus-ring-invalid: var(--a-focus-ring-invalid);
-    --calendar-picker-trigger-placeholder-fg: var(--a-ui-text-placeholder);
-    --calendar-picker-trigger-fg-disabled:    var(--a-ui-text-disabled);
+    --calendar-picker-trigger-height-default:         var(--a-size);
+    --calendar-picker-trigger-px-default:             var(--a-ui-px);
+    --calendar-picker-trigger-gap-default:            var(--a-space-1);
+    --calendar-picker-trigger-radius-default:         var(--a-radius);
+    --calendar-picker-trigger-bg-default:             var(--a-ui-bg);
+    --calendar-picker-trigger-bg-hover-default:       var(--a-ui-bg-hover);
+    --calendar-picker-trigger-fg-default:             var(--a-ui-text-subtle);
+    --calendar-picker-trigger-border-default:         var(--a-ui-border);
+    --calendar-picker-trigger-border-hover-default:   var(--a-ui-border-hover);
+    --calendar-picker-trigger-focus-ring-default:     var(--a-focus-ring);
+    --calendar-picker-trigger-focus-ring-invalid-default: var(--a-focus-ring-invalid);
+    --calendar-picker-trigger-placeholder-fg-default: var(--a-ui-text-placeholder);
+    --calendar-picker-trigger-fg-disabled-default:    var(--a-ui-text-disabled);
 
     /* Popover */
-    --calendar-picker-popover-bg:             var(--a-bg-subtle);
-    --calendar-picker-popover-border:         var(--a-border-subtle);
-    --calendar-picker-popover-radius:         var(--a-radius-lg);
-    --calendar-picker-popover-shadow:         var(--a-shadow-lg);
-    --calendar-picker-popover-padding:        var(--a-space-2);
-    --calendar-picker-popover-width:          16rem;
-    --calendar-picker-popover-fg:             var(--a-fg);
+    --calendar-picker-popover-bg-default:             var(--a-bg-subtle);
+    --calendar-picker-popover-border-default:         var(--a-border-subtle);
+    --calendar-picker-popover-radius-default:         var(--a-radius-lg);
+    --calendar-picker-popover-shadow-default:         var(--a-shadow-lg);
+    --calendar-picker-popover-padding-default:        var(--a-space-2);
+    --calendar-picker-popover-width-default:          16rem;
+    --calendar-picker-popover-fg-default:             var(--a-fg);
 
     /* Header */
-    --calendar-picker-header-gap:             var(--a-space-1);
-    --calendar-picker-header-mb:              var(--a-space-2);
-    --calendar-picker-title-fg:               var(--a-fg);
-    --calendar-picker-title-size:             var(--a-ui-size);
-    --calendar-picker-title-weight:           var(--a-weight-medium);
+    --calendar-picker-header-gap-default:             var(--a-space-1);
+    --calendar-picker-header-mb-default:              var(--a-space-2);
+    --calendar-picker-title-fg-default:               var(--a-fg);
+    --calendar-picker-title-size-default:             var(--a-ui-size);
+    --calendar-picker-title-weight-default:           var(--a-weight-medium);
 
     /* Nav buttons (prev/next) */
-    --calendar-picker-nav-size:               1.5rem;
-    --calendar-picker-nav-radius:             var(--a-radius-sm);
-    --calendar-picker-nav-bg:                 transparent;
-    --calendar-picker-nav-bg-hover:           var(--a-bg-muted);
-    --calendar-picker-nav-fg:                 var(--a-fg-muted);
-    --calendar-picker-nav-fg-hover:           var(--a-fg);
-    --calendar-picker-nav-icon-size:          0.75rem;
+    --calendar-picker-nav-size-default:               1.5rem;
+    --calendar-picker-nav-radius-default:             var(--a-radius-sm);
+    --calendar-picker-nav-bg-default:                 transparent;
+    --calendar-picker-nav-bg-hover-default:           var(--a-bg-muted);
+    --calendar-picker-nav-fg-default:                 var(--a-fg-muted);
+    --calendar-picker-nav-fg-hover-default:           var(--a-fg);
+    --calendar-picker-nav-icon-size-default:          0.75rem;
 
     /* Weekday header */
-    --calendar-picker-weekday-fg:             var(--a-fg-muted);
-    --calendar-picker-weekday-size:           var(--a-ui-sm);
-    --calendar-picker-weekday-weight:         var(--a-weight-medium);
-    --calendar-picker-weekday-height:         1.5rem;
-    --calendar-picker-weekday-mb:             var(--a-space-1);
+    --calendar-picker-weekday-fg-default:             var(--a-fg-muted);
+    --calendar-picker-weekday-size-default:           var(--a-ui-sm);
+    --calendar-picker-weekday-weight-default:         var(--a-weight-medium);
+    --calendar-picker-weekday-height-default:         1.5rem;
+    --calendar-picker-weekday-mb-default:             var(--a-space-1);
 
     /* Day cells */
-    --calendar-picker-day-size:               2rem;
-    --calendar-picker-day-radius:             var(--a-radius);
-    --calendar-picker-day-font-size:          var(--a-ui-sm);
-    --calendar-picker-day-bg:                 transparent;
-    --calendar-picker-day-fg:                 var(--a-fg-subtle);
-    --calendar-picker-day-bg-hover:           var(--a-bg-hover);
-    --calendar-picker-day-fg-hover:           var(--a-fg);
-    --calendar-picker-day-bg-selected-hover:  var(--a-accent-bg-hover);
-    --calendar-picker-day-bg-selected:        var(--a-accent);
-    --calendar-picker-day-fg-selected:        var(--a-accent-fg);
-    --calendar-picker-day-fg-outside:         var(--a-fg-muted);
-    --calendar-picker-day-fg-disabled:        var(--a-ui-text-disabled);
-    --calendar-picker-day-today-border:       var(--a-accent);
-    --calendar-picker-day-today-dot-size:     var(--a-space-0-5);
-    --calendar-picker-day-today-dot-offset:   var(--a-space-1);
-    --calendar-picker-day-grid-gap:           var(--a-space-px); /* 1px hairline between cells */
-    --calendar-picker-day-focus-ring:         var(--a-focus-ring);
+    --calendar-picker-day-size-default:               2rem;
+    --calendar-picker-day-radius-default:             var(--a-radius);
+    --calendar-picker-day-font-size-default:          var(--a-ui-sm);
+    --calendar-picker-day-bg-default:                 transparent;
+    --calendar-picker-day-fg-default:                 var(--a-fg-subtle);
+    --calendar-picker-day-bg-hover-default:           var(--a-bg-hover);
+    --calendar-picker-day-fg-hover-default:           var(--a-fg);
+    --calendar-picker-day-bg-selected-hover-default:  var(--a-accent-bg-hover);
+    --calendar-picker-day-bg-selected-default:        var(--a-accent);
+    --calendar-picker-day-fg-selected-default:        var(--a-accent-fg);
+    --calendar-picker-day-fg-outside-default:         var(--a-fg-muted);
+    --calendar-picker-day-fg-disabled-default:        var(--a-ui-text-disabled);
+    --calendar-picker-day-today-border-default:       var(--a-accent);
+    --calendar-picker-day-today-dot-size-default:     var(--a-space-0-5);
+    --calendar-picker-day-today-dot-offset-default:   var(--a-space-1);
+    --calendar-picker-day-grid-gap-default:           var(--a-space-px); /* 1px hairline between cells */
+    --calendar-picker-day-focus-ring-default:         var(--a-focus-ring);
 
     /* Transitions */
-    --calendar-picker-duration:               var(--a-duration-fast);
-    --calendar-picker-easing:                 var(--a-easing);
+    --calendar-picker-duration-default:               var(--a-duration-fast);
+    --calendar-picker-easing-default:                 var(--a-easing);
 
     /* Typography */
-    --calendar-picker-selected-weight:        var(--a-weight-medium);
-    --calendar-picker-today-weight:           var(--a-weight-medium);
+    --calendar-picker-selected-weight-default:        var(--a-weight-medium);
+    --calendar-picker-today-weight-default:           var(--a-weight-medium);
   }
 
   :scope {
@@ -89,29 +89,29 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--calendar-picker-gap);
+    gap: var(--calendar-picker-gap, var(--calendar-picker-gap-default));
     min-width: 0;
-    font-size: var(--calendar-picker-font-size);
+    font-size: var(--calendar-picker-font-size, var(--calendar-picker-font-size-default));
   }
 
   /* ── State: disabled ── */
   :scope[disabled] {
     pointer-events: none;
-    color: var(--calendar-picker-trigger-fg-disabled);
+    color: var(--calendar-picker-trigger-fg-disabled, var(--calendar-picker-trigger-fg-disabled-default));
   }
 
   /* ── Label (via ::before) ── */
   :scope::before {
     content: attr(label);
-    font-size: var(--calendar-picker-label-size);
-    color: var(--calendar-picker-label-fg);
+    font-size: var(--calendar-picker-label-size, var(--calendar-picker-label-size-default));
+    color: var(--calendar-picker-label-fg, var(--calendar-picker-label-fg-default));
   }
   :scope:not([label])::before,
   :scope[label=""]::before {
     display: none;
   }
   :scope:focus-visible::before {
-    color: var(--calendar-picker-label-fg-focus);
+    color: var(--calendar-picker-label-fg-focus, var(--calendar-picker-label-fg-focus-default));
   }
 
   /* ── Trigger ── */
@@ -119,33 +119,33 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--calendar-picker-trigger-gap);
+    gap: var(--calendar-picker-trigger-gap, var(--calendar-picker-trigger-gap-default));
     min-width: 0;
-    min-height: var(--calendar-picker-trigger-height);
-    padding: 0 var(--calendar-picker-trigger-px);
-    border: 1px solid var(--calendar-picker-trigger-border);
-    border-radius: var(--calendar-picker-trigger-radius);
-    background: var(--calendar-picker-trigger-bg);
-    color: var(--calendar-picker-trigger-fg);
+    min-height: var(--calendar-picker-trigger-height, var(--calendar-picker-trigger-height-default));
+    padding: 0 var(--calendar-picker-trigger-px, var(--calendar-picker-trigger-px-default));
+    border: 1px solid var(--calendar-picker-trigger-border, var(--calendar-picker-trigger-border-default));
+    border-radius: var(--calendar-picker-trigger-radius, var(--calendar-picker-trigger-radius-default));
+    background: var(--calendar-picker-trigger-bg, var(--calendar-picker-trigger-bg-default));
+    color: var(--calendar-picker-trigger-fg, var(--calendar-picker-trigger-fg-default));
     line-height: 1;
     cursor: pointer;
     transition:
-      border-color var(--calendar-picker-duration) var(--calendar-picker-easing),
-      background   var(--calendar-picker-duration) var(--calendar-picker-easing);
+      border-color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
+      background   var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default));
   }
   [slot="trigger"]:hover {
-    border-color: var(--calendar-picker-trigger-border-hover);
-    background: var(--calendar-picker-trigger-bg-hover);
+    border-color: var(--calendar-picker-trigger-border-hover, var(--calendar-picker-trigger-border-hover-default));
+    background: var(--calendar-picker-trigger-bg-hover, var(--calendar-picker-trigger-bg-hover-default));
   }
 
   :scope:focus-visible { outline: none; }
   :scope:focus-visible [slot="trigger"] {
     /* Canonical ring via L3 token (see semantics.css FOCUS block). */
-    box-shadow: var(--calendar-picker-trigger-focus-ring);
+    box-shadow: var(--calendar-picker-trigger-focus-ring, var(--calendar-picker-trigger-focus-ring-default));
   }
   :scope[aria-invalid="true"]:focus-visible [slot="trigger"],
   :scope[error]:focus-visible [slot="trigger"] {
-    box-shadow: var(--calendar-picker-trigger-focus-ring-invalid);
+    box-shadow: var(--calendar-picker-trigger-focus-ring-invalid, var(--calendar-picker-trigger-focus-ring-invalid-default));
   }
 
   [slot="display"] {
@@ -153,16 +153,16 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: var(--calendar-picker-trigger-fg);
+    color: var(--calendar-picker-trigger-fg, var(--calendar-picker-trigger-fg-default));
   }
   :scope:not([value]) [slot="display"],
   :scope[value=""] [slot="display"] {
-    color: var(--calendar-picker-trigger-placeholder-fg);
+    color: var(--calendar-picker-trigger-placeholder-fg, var(--calendar-picker-trigger-placeholder-fg-default));
   }
 
   [slot="caret"] {
     flex-shrink: 0;
-    --a-icon-size: var(--calendar-picker-font-size);
+    --a-icon-size: var(--calendar-picker-font-size, var(--calendar-picker-font-size-default));
   }
 }
 
@@ -171,15 +171,15 @@
 
 calendar-picker-ui [slot="popover"] {
   margin: 0;
-  padding: var(--calendar-picker-popover-padding);
-  border: 1px solid var(--calendar-picker-popover-border);
-  border-radius: var(--calendar-picker-popover-radius);
-  background: var(--calendar-picker-popover-bg);
-  box-shadow: var(--calendar-picker-popover-shadow);
-  width: var(--calendar-picker-popover-width);
+  padding: var(--calendar-picker-popover-padding, var(--calendar-picker-popover-padding-default));
+  border: 1px solid var(--calendar-picker-popover-border, var(--calendar-picker-popover-border-default));
+  border-radius: var(--calendar-picker-popover-radius, var(--calendar-picker-popover-radius-default));
+  background: var(--calendar-picker-popover-bg, var(--calendar-picker-popover-bg-default));
+  box-shadow: var(--calendar-picker-popover-shadow, var(--calendar-picker-popover-shadow-default));
+  width: var(--calendar-picker-popover-width, var(--calendar-picker-popover-width-default));
   font-family: inherit;
-  font-size: var(--calendar-picker-font-size);
-  color: var(--calendar-picker-popover-fg);
+  font-size: var(--calendar-picker-font-size, var(--calendar-picker-font-size-default));
+  color: var(--calendar-picker-popover-fg, var(--calendar-picker-popover-fg-default));
   /* Fade + lift in on first paint via @starting-style. Same pattern
      as menu/select/popover surfaces — see journal 2026-04-29 §18. */
   opacity: 1;
@@ -204,16 +204,16 @@ calendar-picker-ui [data-cal-header] {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--calendar-picker-header-gap);
-  margin-block-end: var(--calendar-picker-header-mb);
+  gap: var(--calendar-picker-header-gap, var(--calendar-picker-header-gap-default));
+  margin-block-end: var(--calendar-picker-header-mb, var(--calendar-picker-header-mb-default));
 }
 
 calendar-picker-ui [data-cal-title] {
   flex: 1;
   text-align: center;
-  font-size: var(--calendar-picker-title-size);
-  font-weight: var(--calendar-picker-title-weight);
-  color: var(--calendar-picker-title-fg);
+  font-size: var(--calendar-picker-title-size, var(--calendar-picker-title-size-default));
+  font-weight: var(--calendar-picker-title-weight, var(--calendar-picker-title-weight-default));
+  color: var(--calendar-picker-title-fg, var(--calendar-picker-title-fg-default));
 }
 
 calendar-picker-ui [data-cal-prev],
@@ -221,23 +221,23 @@ calendar-picker-ui [data-cal-next] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--calendar-picker-nav-size);
-  height: var(--calendar-picker-nav-size);
+  width: var(--calendar-picker-nav-size, var(--calendar-picker-nav-size-default));
+  height: var(--calendar-picker-nav-size, var(--calendar-picker-nav-size-default));
   padding: 0;
   border: none;
-  border-radius: var(--calendar-picker-nav-radius);
-  background: var(--calendar-picker-nav-bg);
-  color: var(--calendar-picker-nav-fg);
+  border-radius: var(--calendar-picker-nav-radius, var(--calendar-picker-nav-radius-default));
+  background: var(--calendar-picker-nav-bg, var(--calendar-picker-nav-bg-default));
+  color: var(--calendar-picker-nav-fg, var(--calendar-picker-nav-fg-default));
   cursor: pointer;
   transition:
-    background var(--calendar-picker-duration) var(--calendar-picker-easing),
-    color var(--calendar-picker-duration) var(--calendar-picker-easing);
-  --a-icon-size: var(--calendar-picker-nav-icon-size);
+    background var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
+    color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default));
+  --a-icon-size: var(--calendar-picker-nav-icon-size, var(--calendar-picker-nav-icon-size-default));
 }
 calendar-picker-ui [data-cal-prev]:hover,
 calendar-picker-ui [data-cal-next]:hover {
-  background: var(--calendar-picker-nav-bg-hover);
-  color: var(--calendar-picker-nav-fg-hover);
+  background: var(--calendar-picker-nav-bg-hover, var(--calendar-picker-nav-bg-hover-default));
+  color: var(--calendar-picker-nav-fg-hover, var(--calendar-picker-nav-fg-hover-default));
 }
 
 /* Day-of-week header */
@@ -245,24 +245,24 @@ calendar-picker-ui [data-cal-weekdays] {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   text-align: center;
-  font-size: var(--calendar-picker-weekday-size);
-  font-weight: var(--calendar-picker-weekday-weight);
-  color: var(--calendar-picker-weekday-fg);
-  margin-block-end: var(--calendar-picker-weekday-mb);
+  font-size: var(--calendar-picker-weekday-size, var(--calendar-picker-weekday-size-default));
+  font-weight: var(--calendar-picker-weekday-weight, var(--calendar-picker-weekday-weight-default));
+  color: var(--calendar-picker-weekday-fg, var(--calendar-picker-weekday-fg-default));
+  margin-block-end: var(--calendar-picker-weekday-mb, var(--calendar-picker-weekday-mb-default));
 }
 
 calendar-picker-ui [data-cal-weekdays] span {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: var(--calendar-picker-weekday-height);
+  height: var(--calendar-picker-weekday-height, var(--calendar-picker-weekday-height-default));
 }
 
 /* Day grid */
 calendar-picker-ui [data-cal-grid] {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: var(--calendar-picker-day-grid-gap);
+  gap: var(--calendar-picker-day-grid-gap, var(--calendar-picker-day-grid-gap-default));
 }
 
 /* Day buttons */
@@ -270,45 +270,45 @@ calendar-picker-ui [data-cal-day] {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--calendar-picker-day-size);
-  height: var(--calendar-picker-day-size);
+  width: var(--calendar-picker-day-size, var(--calendar-picker-day-size-default));
+  height: var(--calendar-picker-day-size, var(--calendar-picker-day-size-default));
   margin: 0 auto;
   padding: 0;
   border: 1px solid transparent;
-  border-radius: var(--calendar-picker-day-radius);
-  background: var(--calendar-picker-day-bg);
-  color: var(--calendar-picker-day-fg);
+  border-radius: var(--calendar-picker-day-radius, var(--calendar-picker-day-radius-default));
+  background: var(--calendar-picker-day-bg, var(--calendar-picker-day-bg-default));
+  color: var(--calendar-picker-day-fg, var(--calendar-picker-day-fg-default));
   font: inherit;
-  font-size: var(--calendar-picker-day-font-size);
+  font-size: var(--calendar-picker-day-font-size, var(--calendar-picker-day-font-size-default));
   cursor: pointer;
   transition:
-    background var(--calendar-picker-duration) var(--calendar-picker-easing),
-    color var(--calendar-picker-duration) var(--calendar-picker-easing),
-    border-color var(--calendar-picker-duration) var(--calendar-picker-easing);
+    background var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
+    color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default)),
+    border-color var(--calendar-picker-duration, var(--calendar-picker-duration-default)) var(--calendar-picker-easing, var(--calendar-picker-easing-default));
 }
 
 /* ── State: hover ── */
 calendar-picker-ui [data-cal-day]:not([disabled]):not([data-outside]):hover {
-  background: var(--calendar-picker-day-bg-hover);
-  color: var(--calendar-picker-day-fg-hover);
+  background: var(--calendar-picker-day-bg-hover, var(--calendar-picker-day-bg-hover-default));
+  color: var(--calendar-picker-day-fg-hover, var(--calendar-picker-day-fg-hover-default));
 }
 
 /* ── State: focus ── */
 calendar-picker-ui [data-cal-day]:not([disabled]):not([data-outside]):focus-visible,
 calendar-picker-ui [data-cal-day][data-focused] {
   outline: none;
-  box-shadow: var(--calendar-picker-day-focus-ring);
+  box-shadow: var(--calendar-picker-day-focus-ring, var(--calendar-picker-day-focus-ring-default));
 }
 
 /* ── State: selected ── */
 calendar-picker-ui [data-cal-day][data-selected] {
-  background: var(--calendar-picker-day-bg-selected);
-  color: var(--calendar-picker-day-fg-selected);
-  font-weight: var(--calendar-picker-selected-weight);
+  background: var(--calendar-picker-day-bg-selected, var(--calendar-picker-day-bg-selected-default));
+  color: var(--calendar-picker-day-fg-selected, var(--calendar-picker-day-fg-selected-default));
+  font-weight: var(--calendar-picker-selected-weight, var(--calendar-picker-selected-weight-default));
 }
 calendar-picker-ui [data-cal-day][data-selected]:not([disabled]):hover {
-  background: var(--calendar-picker-day-bg-selected-hover);
-  color: var(--calendar-picker-day-fg-selected);
+  background: var(--calendar-picker-day-bg-selected-hover, var(--calendar-picker-day-bg-selected-hover-default));
+  color: var(--calendar-picker-day-fg-selected, var(--calendar-picker-day-fg-selected-default));
 }
 
 /* ── State: today (unselected) ──
@@ -316,30 +316,30 @@ calendar-picker-ui [data-cal-day][data-selected]:not([disabled]):hover {
    focus-ring box-shadow (that looked like a double outline). */
 calendar-picker-ui [data-cal-day][data-today]:not([data-selected]) {
   position: relative;
-  color: var(--calendar-picker-day-today-border);
-  font-weight: var(--calendar-picker-today-weight);
+  color: var(--calendar-picker-day-today-border, var(--calendar-picker-day-today-border-default));
+  font-weight: var(--calendar-picker-today-weight, var(--calendar-picker-today-weight-default));
 }
 calendar-picker-ui [data-cal-day][data-today]:not([data-selected])::after {
   content: "";
   position: absolute;
   left: 50%;
-  bottom: var(--calendar-picker-day-today-dot-offset);
-  width: var(--calendar-picker-day-today-dot-size);
-  height: var(--calendar-picker-day-today-dot-size);
+  bottom: var(--calendar-picker-day-today-dot-offset, var(--calendar-picker-day-today-dot-offset-default));
+  width: var(--calendar-picker-day-today-dot-size, var(--calendar-picker-day-today-dot-size-default));
+  height: var(--calendar-picker-day-today-dot-size, var(--calendar-picker-day-today-dot-size-default));
   border-radius: 50%;
-  background: var(--calendar-picker-day-today-border);
+  background: var(--calendar-picker-day-today-border, var(--calendar-picker-day-today-border-default));
   transform: translateX(-50%);
   pointer-events: none;
 }
 
 /* ── State: outside month ── */
 calendar-picker-ui [data-cal-day][data-outside] {
-  color: var(--calendar-picker-day-fg-outside);
+  color: var(--calendar-picker-day-fg-outside, var(--calendar-picker-day-fg-outside-default));
   cursor: default;
 }
 
 /* ── State: disabled ── */
 calendar-picker-ui [data-cal-day]:disabled:not([data-outside]) {
-  color: var(--calendar-picker-day-fg-disabled);
+  color: var(--calendar-picker-day-fg-disabled, var(--calendar-picker-day-fg-disabled-default));
   cursor: not-allowed;
 }

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

@@ -5,12 +5,12 @@
      ═══════════════════════════════════════════════════════ */
 
   :where(:scope) {
-    --canvas-bg:              var(--a-canvas-0);
-    --canvas-fg:              var(--a-fg);
-    --canvas-font-family:     var(--a-font-family);
-    --canvas-inset:           var(--a-space-2);
-    --canvas-surface-bg:      var(--a-bg);
-    --canvas-surface-max:     56rem;
+    --canvas-bg-default:              var(--a-canvas-0);
+    --canvas-fg-default:              var(--a-fg);
+    --canvas-font-family-default:     var(--a-font-family);
+    --canvas-inset-default:           var(--a-space-2);
+    --canvas-surface-bg-default:      var(--a-bg);
+    --canvas-surface-max-default:     56rem;
   }
 
   /* ═══════════════════════════════════════════════════════
@@ -23,9 +23,9 @@
     flex-direction:      column;
     min-height:          0;
     height:              100%;
-    background:          var(--canvas-bg);
-    color:               var(--canvas-fg);
-    font-family:         var(--canvas-font-family);
+    background:          var(--canvas-bg, var(--canvas-bg-default));
+    color:               var(--canvas-fg, var(--canvas-fg-default));
+    font-family:         var(--canvas-font-family, var(--canvas-font-family-default));
   }
 
   /* ═══════════════════════════════════════════════════════
@@ -38,15 +38,15 @@
     align-items:         center;
     justify-content:     center;
     overflow:            auto;
-    padding:             var(--canvas-inset);
+    padding:             var(--canvas-inset, var(--canvas-inset-default));
     min-height:          0;
-    background:          var(--canvas-surface-bg);
+    background:          var(--canvas-surface-bg, var(--canvas-surface-bg-default));
   }
 
   [data-canvas-surface] > a2ui-root,
   [data-canvas-surface] > theme-ui {
     display:             block;
     width:               100%;
-    max-width:           var(--canvas-surface-max);
+    max-width:           var(--canvas-surface-max, var(--canvas-surface-max-default));
   }
 }