@adia-ai/web-components 0.6.32 → 0.6.34

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/calendar-grid/calendar-grid.a2ui.json

@@ -0,0 +1,136 @@
+{
+  "$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": ""
+    },
+    "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
+  }
+}

package/components/calendar-grid/calendar-grid.css

@@ -0,0 +1,226 @@
+/* ============================================================
+   <calendar-grid-ui> — Inline single-month calendar grid.
+
+   Substrate primitive consumed by calendar-picker-ui (popover
+   wrapper), date-range-picker-ui (two side-by-side grids), and
+   datetime-picker-ui (one grid + time pane).
+
+   Two-block @scope per docs/specs/component-token-contract.md.
+   Tokens mirror calendar-picker-ui's grid tokens (same surface,
+   shared visual language) so consumers can override either
+   --calendar-grid-* OR --calendar-picker-* and pick up the same
+   look-and-feel through cascade.
+   ============================================================ */
+
+@scope (calendar-grid-ui) {
+  /* ── Block 1 — TOKENS ── */
+  :where(:scope) {
+    /* Layout */
+    --calendar-grid-gap-default:                var(--a-space-1);
+    --calendar-grid-width-default:              16rem;
+
+    /* Header */
+    --calendar-grid-header-gap-default:         var(--a-space-1);
+    --calendar-grid-header-mb-default:          var(--a-space-2);
+    --calendar-grid-title-fg-default:           var(--a-fg);
+    --calendar-grid-title-size-default:         var(--a-ui-size);
+    --calendar-grid-title-weight-default:       var(--a-weight-medium);
+
+    /* Nav buttons (prev/next) */
+    --calendar-grid-nav-size-default:           1.5rem;
+    --calendar-grid-nav-radius-default:         var(--a-radius-sm);
+    --calendar-grid-nav-bg-default:             transparent;
+    --calendar-grid-nav-bg-hover-default:       var(--a-bg-muted);
+    --calendar-grid-nav-fg-default:             var(--a-fg-muted);
+    --calendar-grid-nav-fg-hover-default:       var(--a-fg);
+    --calendar-grid-nav-icon-size-default:      0.75rem;
+
+    /* Weekday header */
+    --calendar-grid-weekday-fg-default:         var(--a-fg-muted);
+    --calendar-grid-weekday-size-default:       var(--a-ui-sm);
+    --calendar-grid-weekday-weight-default:     var(--a-weight-medium);
+    --calendar-grid-weekday-height-default:     1.5rem;
+    --calendar-grid-weekday-mb-default:         var(--a-space-1);
+
+    /* Day cells */
+    --calendar-grid-day-size-default:           2rem;
+    --calendar-grid-day-radius-default:         var(--a-radius);
+    --calendar-grid-day-font-size-default:      var(--a-ui-sm);
+    --calendar-grid-day-bg-default:             transparent;
+    --calendar-grid-day-fg-default:             var(--a-fg-subtle);
+    --calendar-grid-day-bg-hover-default:       var(--a-bg-hover);
+    --calendar-grid-day-fg-hover-default:       var(--a-fg);
+    --calendar-grid-day-bg-selected-default:    var(--a-accent);
+    --calendar-grid-day-fg-selected-default:    var(--a-accent-fg);
+    --calendar-grid-day-fg-outside-default:     var(--a-fg-muted);
+    --calendar-grid-day-fg-disabled-default:    var(--a-ui-text-disabled);
+    --calendar-grid-day-today-color-default:    var(--a-accent);
+    --calendar-grid-day-today-dot-size-default: var(--a-space-0-5);
+    --calendar-grid-day-today-dot-offset-default: var(--a-space-1);
+    --calendar-grid-day-grid-gap-default:       var(--a-space-px);
+    --calendar-grid-day-focus-ring-default:     var(--a-focus-ring);
+
+    /* Transitions */
+    --calendar-grid-duration-default:           var(--a-duration-fast);
+    --calendar-grid-easing-default:             var(--a-easing);
+
+    /* Typography */
+    --calendar-grid-selected-weight-default:    var(--a-weight-medium);
+    --calendar-grid-today-weight-default:       var(--a-weight-medium);
+  }
+
+  /* ── Block 2 — BASE ── */
+  :scope {
+    box-sizing: border-box;
+    display: block;
+    width: var(--calendar-grid-width, var(--calendar-grid-width-default));
+    font-size: var(--calendar-grid-day-font-size, var(--calendar-grid-day-font-size-default));
+  }
+
+  :scope[disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  /* Header row */
+  [data-cal-header] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--calendar-grid-header-gap, var(--calendar-grid-header-gap-default));
+    margin-block-end: var(--calendar-grid-header-mb, var(--calendar-grid-header-mb-default));
+  }
+
+  [data-cal-title] {
+    flex: 1;
+    text-align: center;
+    font-size: var(--calendar-grid-title-size, var(--calendar-grid-title-size-default));
+    font-weight: var(--calendar-grid-title-weight, var(--calendar-grid-title-weight-default));
+    color: var(--calendar-grid-title-fg, var(--calendar-grid-title-fg-default));
+  }
+
+  [data-cal-prev],
+  [data-cal-next] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--calendar-grid-nav-size, var(--calendar-grid-nav-size-default));
+    height: var(--calendar-grid-nav-size, var(--calendar-grid-nav-size-default));
+    padding: 0;
+    border: none;
+    border-radius: var(--calendar-grid-nav-radius, var(--calendar-grid-nav-radius-default));
+    background: var(--calendar-grid-nav-bg, var(--calendar-grid-nav-bg-default));
+    color: var(--calendar-grid-nav-fg, var(--calendar-grid-nav-fg-default));
+    cursor: pointer;
+    transition:
+      background var(--calendar-grid-duration, var(--calendar-grid-duration-default)) var(--calendar-grid-easing, var(--calendar-grid-easing-default)),
+      color      var(--calendar-grid-duration, var(--calendar-grid-duration-default)) var(--calendar-grid-easing, var(--calendar-grid-easing-default));
+    --a-icon-size: var(--calendar-grid-nav-icon-size, var(--calendar-grid-nav-icon-size-default));
+  }
+  [data-cal-prev]:hover,
+  [data-cal-next]:hover {
+    background: var(--calendar-grid-nav-bg-hover, var(--calendar-grid-nav-bg-hover-default));
+    color: var(--calendar-grid-nav-fg-hover, var(--calendar-grid-nav-fg-hover-default));
+  }
+
+  /* Day-of-week header */
+  [data-cal-weekdays] {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    text-align: center;
+    font-size: var(--calendar-grid-weekday-size, var(--calendar-grid-weekday-size-default));
+    font-weight: var(--calendar-grid-weekday-weight, var(--calendar-grid-weekday-weight-default));
+    color: var(--calendar-grid-weekday-fg, var(--calendar-grid-weekday-fg-default));
+    margin-block-end: var(--calendar-grid-weekday-mb, var(--calendar-grid-weekday-mb-default));
+  }
+
+  [data-cal-weekdays] span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--calendar-grid-weekday-height, var(--calendar-grid-weekday-height-default));
+  }
+
+  /* Day grid */
+  [data-cal-grid] {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: var(--calendar-grid-day-grid-gap, var(--calendar-grid-day-grid-gap-default));
+  }
+
+  [data-cal-day] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--calendar-grid-day-size, var(--calendar-grid-day-size-default));
+    height: var(--calendar-grid-day-size, var(--calendar-grid-day-size-default));
+    margin: 0 auto;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--calendar-grid-day-radius, var(--calendar-grid-day-radius-default));
+    background: var(--calendar-grid-day-bg, var(--calendar-grid-day-bg-default));
+    color: var(--calendar-grid-day-fg, var(--calendar-grid-day-fg-default));
+    font: inherit;
+    font-size: var(--calendar-grid-day-font-size, var(--calendar-grid-day-font-size-default));
+    cursor: pointer;
+    transition:
+      background var(--calendar-grid-duration, var(--calendar-grid-duration-default)) var(--calendar-grid-easing, var(--calendar-grid-easing-default)),
+      color      var(--calendar-grid-duration, var(--calendar-grid-duration-default)) var(--calendar-grid-easing, var(--calendar-grid-easing-default)),
+      border-color var(--calendar-grid-duration, var(--calendar-grid-duration-default)) var(--calendar-grid-easing, var(--calendar-grid-easing-default));
+  }
+
+  /* ── State: hover ── */
+  [data-cal-day]:not([disabled]):not([data-outside]):hover {
+    background: var(--calendar-grid-day-bg-hover, var(--calendar-grid-day-bg-hover-default));
+    color: var(--calendar-grid-day-fg-hover, var(--calendar-grid-day-fg-hover-default));
+  }
+
+  /* ── State: focus ── */
+  [data-cal-day]:not([disabled]):not([data-outside]):focus-visible,
+  [data-cal-day][data-focused] {
+    outline: none;
+    box-shadow: var(--calendar-grid-day-focus-ring, var(--calendar-grid-day-focus-ring-default));
+  }
+
+  /* ── State: selected ── */
+  [data-cal-day][data-selected] {
+    background: var(--calendar-grid-day-bg-selected, var(--calendar-grid-day-bg-selected-default));
+    color: var(--calendar-grid-day-fg-selected, var(--calendar-grid-day-fg-selected-default));
+    font-weight: var(--calendar-grid-selected-weight, var(--calendar-grid-selected-weight-default));
+  }
+  [data-cal-day][data-selected]:not([disabled]):hover {
+    background: var(--calendar-grid-day-bg-selected, var(--calendar-grid-day-bg-selected-default));
+    color: var(--calendar-grid-day-fg-selected, var(--calendar-grid-day-fg-selected-default));
+  }
+
+  /* ── State: today (unselected) ── */
+  [data-cal-day][data-today]:not([data-selected]) {
+    position: relative;
+    color: var(--calendar-grid-day-today-color, var(--calendar-grid-day-today-color-default));
+    font-weight: var(--calendar-grid-today-weight, var(--calendar-grid-today-weight-default));
+  }
+  [data-cal-day][data-today]:not([data-selected])::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    bottom: var(--calendar-grid-day-today-dot-offset, var(--calendar-grid-day-today-dot-offset-default));
+    width: var(--calendar-grid-day-today-dot-size, var(--calendar-grid-day-today-dot-size-default));
+    height: var(--calendar-grid-day-today-dot-size, var(--calendar-grid-day-today-dot-size-default));
+    border-radius: 50%;
+    background: var(--calendar-grid-day-today-color, var(--calendar-grid-day-today-color-default));
+    transform: translateX(-50%);
+    pointer-events: none;
+  }
+
+  /* ── State: outside month ── */
+  [data-cal-day][data-outside] {
+    color: var(--calendar-grid-day-fg-outside, var(--calendar-grid-day-fg-outside-default));
+    cursor: default;
+  }
+
+  /* ── State: disabled (excluding outside) ── */
+  [data-cal-day]:disabled:not([data-outside]) {
+    color: var(--calendar-grid-day-fg-disabled, var(--calendar-grid-day-fg-disabled-default));
+    cursor: not-allowed;
+  }
+}