@adia-ai/web-components 0.8.40 → 0.8.41

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

@@ -1,13 +1,15 @@
-@scope (calendar-picker-ui) {
+/* gh#1372, #1363 C3c — datetime-picker-ui is now a thin UICalendarPicker
+   subclass (see ../datetime-picker/datetime-picker.class.js); its own CSS
+   file no longer carries independent rules. The scope root below covers
+   BOTH tags so a <datetime-picker-ui> host renders identically to
+   <calendar-picker-ui precision="minute">. */
+@scope (calendar-picker-ui, datetime-picker-ui) {
   :where(:scope) {
     /* ── Tokens ── */
 
-    /* Host / label */
+    /* Host */
     --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(--md-sys-color-neutral-on-surface-variant);
 
     /* Trigger */
     --calendar-picker-trigger-height:         var(--a-size);
@@ -39,6 +41,13 @@
     --calendar-picker-popover-width:          calc(7 * var(--a-size) + 6 * var(--a-space-1) + 2 * var(--a-space-2));
     --calendar-picker-popover-fg:             var(--md-sys-color-neutral-on-surface);
 
+    /* Header, nav, weekday, and day-cell tokens below (gh#1371, #1363 C3a) —
+       calendar-picker no longer renders its own grid; it composes
+       <calendar-grid-ui> and forwards these as --calendar-grid-* overrides
+       (see the cascade block below, outside @scope). Token NAMES stay
+       --calendar-picker-* so the public contract is unchanged for any
+       consumer already overriding them; only the render target moved. */
+
     /* Header */
     --calendar-picker-header-gap:             var(--a-space-1);
     --calendar-picker-header-mb:              var(--a-space-2);
@@ -76,7 +85,6 @@
     --calendar-picker-day-fg:                 var(--md-sys-color-neutral-on-surface-variant);
     --calendar-picker-day-bg-hover:           var(--a-bg-hover);
     --calendar-picker-day-fg-hover:           var(--md-sys-color-neutral-on-surface);
-    --calendar-picker-day-bg-selected-hover:  var(--a-primary-bg-hover);
     --calendar-picker-day-bg-selected:        var(--md-sys-color-primary);
     --calendar-picker-day-fg-selected:        var(--md-sys-color-primary-on-primary);
     --calendar-picker-day-fg-outside:         var(--a-fg-muted);
@@ -94,6 +102,11 @@
     /* Typography */
     --calendar-picker-selected-weight:        var(--a-weight-medium);
     --calendar-picker-today-weight:           var(--a-weight-medium);
+
+    /* Time pane (gh#1372, #1363 C3c — active only when [precision] is
+       "minute"/"second" and a <time-picker-ui> pane is composed) */
+    --calendar-picker-popover-gap:            var(--a-space-3);
+    --calendar-picker-divider:                var(--md-sys-color-neutral-outline-variant);
   }
 
   :scope {
@@ -114,18 +127,9 @@
     color: var(--calendar-picker-trigger-fg-disabled);
   }
 
-  /* ── Label (via ::before) ── */
-  :scope::before {
-    content: attr(label);
-    font-size: var(--calendar-picker-label-size);
-    color: var(--calendar-picker-label-fg);
-  }
-  :scope:not([label])::before,
-  :scope[label=""]::before {
-    display: none;
-  }
-  :scope:focus-visible::before {
-    color: var(--calendar-picker-label-fg-focus);
+  /* ── State: readonly (gh#1372, #1363 C3d) ── */
+  :scope[readonly] [slot="trigger"] {
+    cursor: default;
   }
 
   /* ── Trigger ── */
@@ -188,7 +192,7 @@
 /* ── Calendar popover (outside @scope — popover lives in top layer) ── */
 /* Custom properties inherit from the host, so --calendar-picker-* tokens are available here. */
 
-calendar-picker-ui [slot="popover"] {
+:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] {
   margin: 0;
   padding: var(--calendar-picker-popover-padding);
   border: 1px solid var(--calendar-picker-popover-border);
@@ -207,7 +211,7 @@ calendar-picker-ui [slot="popover"] {
               translate var(--a-duration-fast) var(--a-easing-out);
 }
 
-calendar-picker-ui [slot="popover"]:popover-open {
+:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"]:popover-open {
   @starting-style {
     opacity: 0;
     translate: 0 -4px;
@@ -215,170 +219,115 @@ calendar-picker-ui [slot="popover"]:popover-open {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  calendar-picker-ui [slot="popover"] { transition: none; }
-}
-
-/* Header row */
-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);
+  :is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] { transition: none; }
 }
 
-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);
-}
-
-/* Stamped <button-ui variant="ghost" size="sm" icon="caret-…"> (gh issue 276
-   wave 4) — icon-only (no [text], no child text) so button-ui's own
-   [data-icon-only] rule already squares it to --button-height; pointing
-   --button-height at the nav size (not just literal height below) avoids
-   the min-width/min-height floor trap. Literal background/color below
-   out-specify button.css's own via the `button-ui` type-selector bump
-   (same technique as swiper's dots). */
-calendar-picker-ui button-ui[data-cal-prev],
-calendar-picker-ui button-ui[data-cal-next] {
-  --button-height: var(--calendar-picker-nav-size);
-  --a-icon-size: var(--calendar-picker-nav-icon-size);
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--calendar-picker-nav-size);
-  border: none;
-  border-radius: var(--calendar-picker-nav-radius);
-  background: var(--calendar-picker-nav-bg);
-  color: var(--calendar-picker-nav-fg);
-  cursor: pointer;
-  transition:
-    background var(--calendar-picker-duration) var(--calendar-picker-easing),
-    color var(--calendar-picker-duration) var(--calendar-picker-easing);
-}
-calendar-picker-ui button-ui[data-cal-prev]:hover,
-calendar-picker-ui button-ui[data-cal-next]:hover {
-  background: var(--calendar-picker-nav-bg-hover);
-  color: var(--calendar-picker-nav-fg-hover);
-}
-
-/* Day-of-week header */
-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);
+/* ── Substrate grid (gh#1371, #1363 C3a) ──
+   calendar-picker no longer stamps its own header/weekday/day-grid markup —
+   it composes <calendar-grid-ui>, which owns that rendering and reads its
+   own --calendar-grid-* custom properties (packages/web-components/
+   components/calendar-grid/calendar-grid.css). This block cascades the
+   picker's --calendar-picker-* tokens onto the composed grid's own tokens
+   so an existing consumer override keeps working unchanged (non-breaking —
+   ADR-0055 precedent) and mirrors date-range-picker's own
+   `date-range-picker-ui calendar-grid-ui { --calendar-grid-*: … }` pattern. */
+:is(calendar-picker-ui, datetime-picker-ui) calendar-grid-ui {
+  --calendar-grid-header-gap:           var(--calendar-picker-header-gap);
+  --calendar-grid-header-mb:            var(--calendar-picker-header-mb);
+  --calendar-grid-title-fg:             var(--calendar-picker-title-fg);
+  --calendar-grid-title-size:           var(--calendar-picker-title-size);
+  --calendar-grid-title-weight:         var(--calendar-picker-title-weight);
+  --calendar-grid-nav-size:             var(--calendar-picker-nav-size);
+  --calendar-grid-nav-radius:           var(--calendar-picker-nav-radius);
+  --calendar-grid-nav-bg:               var(--calendar-picker-nav-bg);
+  --calendar-grid-nav-bg-hover:         var(--calendar-picker-nav-bg-hover);
+  --calendar-grid-nav-fg:               var(--calendar-picker-nav-fg);
+  --calendar-grid-nav-fg-hover:         var(--calendar-picker-nav-fg-hover);
+  --calendar-grid-nav-icon-size:        var(--calendar-picker-nav-icon-size);
+  --calendar-grid-weekday-fg:           var(--calendar-picker-weekday-fg);
+  --calendar-grid-weekday-size:         var(--calendar-picker-weekday-size);
+  --calendar-grid-weekday-weight:       var(--calendar-picker-weekday-weight);
+  --calendar-grid-weekday-height:       var(--calendar-picker-weekday-height);
+  --calendar-grid-weekday-mb:           var(--calendar-picker-weekday-mb);
+  --calendar-grid-day-size:             var(--calendar-picker-day-size);
+  --calendar-grid-day-radius:           var(--calendar-picker-day-radius);
+  --calendar-grid-day-font-size:        var(--calendar-picker-day-font-size);
+  --calendar-grid-day-bg:               var(--calendar-picker-day-bg);
+  --calendar-grid-day-fg:               var(--calendar-picker-day-fg);
+  --calendar-grid-day-bg-hover:         var(--calendar-picker-day-bg-hover);
+  --calendar-grid-day-fg-hover:         var(--calendar-picker-day-fg-hover);
+  --calendar-grid-day-bg-selected:      var(--calendar-picker-day-bg-selected);
+  --calendar-grid-day-fg-selected:      var(--calendar-picker-day-fg-selected);
+  --calendar-grid-day-fg-outside:       var(--calendar-picker-day-fg-outside);
+  --calendar-grid-day-fg-disabled:      var(--calendar-picker-day-fg-disabled);
+  --calendar-grid-day-today-color:      var(--calendar-picker-day-today-border);
+  --calendar-grid-day-today-dot-size:   var(--calendar-picker-day-today-dot-size);
+  --calendar-grid-day-today-dot-offset: var(--calendar-picker-day-today-dot-offset);
+  --calendar-grid-day-grid-gap:         var(--calendar-picker-day-grid-gap);
+  --calendar-grid-day-focus-ring:       var(--calendar-picker-day-focus-ring);
+  --calendar-grid-duration:             var(--calendar-picker-duration);
+  --calendar-grid-easing:               var(--calendar-picker-easing);
+  --calendar-grid-selected-weight:      var(--calendar-picker-selected-weight);
+  --calendar-grid-today-weight:         var(--calendar-picker-today-weight);
+
+  /* The grid sizes itself from --calendar-grid-width (7 columns at
+     --calendar-grid-day-size); centering it inside the popover's own
+     padding box needs no extra rule here — block flow already does it. */
 }
 
-calendar-picker-ui [data-cal-weekdays] span {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--calendar-picker-weekday-height);
+/* ── Time pane (gh#1372, #1363 C3c) ──
+   Only present when [precision] is "minute"/"second" — the folded former
+   datetime-picker surface. `:has()` gates the two-pane grid layout so the
+   single-pane (date-only, default) popover keeps its original fixed-width
+   block layout unchanged. Ported near-verbatim from the former
+   datetime-picker.css. */
+:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"]:has([data-time-pane]) {
+  width: auto;
 }
 
-/* Day grid */
-calendar-picker-ui [data-cal-grid] {
+:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"]:has([data-time-pane]):popover-open {
   display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: var(--calendar-picker-day-grid-gap);
-}
-
-/* Day buttons — stamped <button-ui variant="ghost" text="…"> (gh issue 276
-   wave 4). button-ui floors min-width/min-height at --button-height — point
-   it at the day-cell size (not just the literal width/height below) so the
-   floor never clamps a smaller [size] tier. The literal geometry/color
-   declarations below out-specify button-ui's own equivalents via the
-   `button-ui` type-selector bump (same technique as swiper's dots).
-   button-ui renders its label via `::after { content: attr(text) }` — the
-   today-indicator dot below therefore uses `::before` (kept free), not
-   `::after`, to avoid the two fighting over the same pseudo-element. */
-calendar-picker-ui button-ui[data-cal-day] {
-  --button-height: var(--calendar-picker-day-size);
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--calendar-picker-day-size);
-  height: var(--calendar-picker-day-size);
-  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);
-  font: inherit;
-  font-size: var(--calendar-picker-day-font-size);
-  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);
-}
-
-/* ── State: hover ── */
-calendar-picker-ui button-ui[data-cal-day]:not([disabled]):not([data-outside]):hover {
-  background: var(--calendar-picker-day-bg-hover);
-  color: var(--calendar-picker-day-fg-hover);
+  grid-template-columns: auto auto auto;
+  grid-template-areas: "cal divider time";
+  gap: var(--calendar-picker-popover-gap);
+  align-items: start;
 }
 
-/* ── State: focus ── */
-calendar-picker-ui button-ui[data-cal-day]:not([disabled]):not([data-outside]):focus-visible,
-calendar-picker-ui button-ui[data-cal-day][data-focused] {
-  outline: none;
-  box-shadow: var(--calendar-picker-day-focus-ring);
+:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] > calendar-grid-ui {
+  grid-area: cal;
 }
-
-/* ── State: selected ── */
-calendar-picker-ui button-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);
-}
-calendar-picker-ui button-ui[data-cal-day][data-selected]:not([disabled]):hover {
-  background: var(--calendar-picker-day-bg-selected-hover);
-  color: var(--calendar-picker-day-fg-selected);
-}
-
-/* ── State: today (unselected) ──
-   Use a small bottom dot so it does not compete with the rounded
-   focus-ring box-shadow (that looked like a double outline). */
-calendar-picker-ui button-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);
+:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] > [data-pane-divider] {
+  grid-area: divider;
+  align-self: stretch;
+  --divider-color: var(--calendar-picker-divider);
 }
-calendar-picker-ui button-ui[data-cal-day][data-today]:not([data-selected])::before {
-  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);
-  border-radius: 50%;
-  background: var(--calendar-picker-day-today-border);
-  transform: translateX(-50%);
-  pointer-events: none;
+:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] > [data-time-pane] {
+  grid-area: time;
+  align-self: start;
 }
 
-/* ── State: outside month ── */
-calendar-picker-ui button-ui[data-cal-day][data-outside] {
-  color: var(--calendar-picker-day-fg-outside);
-  cursor: default;
+/* Footer area (consumer-supplied [slot="footer"]) — spans all columns
+   under the pane(s), in either single- or two-pane mode. */
+:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] [slot="footer"] {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--a-space-2);
+  padding-block-start: var(--a-space-2);
+  border-block-start: 1px solid var(--calendar-picker-popover-border);
 }
 
-/* ── State: disabled ──
-   `[disabled]` — NOT the `:disabled` pseudo-class, which only matches
-   native form controls; button-ui is a custom element, so `:disabled`
-   silently never matches it. */
-calendar-picker-ui button-ui[data-cal-day][disabled]:not([data-outside]) {
-  color: var(--calendar-picker-day-fg-disabled);
-  cursor: not-allowed;
+/* Narrow surfaces (e.g. inside a card on mobile): stack the panes
+   vertically and replace the vertical divider with a horizontal rule. */
+@container (max-width: 32rem) {
+  :is(calendar-picker-ui, datetime-picker-ui) [slot="popover"]:has([data-time-pane]):popover-open {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "cal"
+      "divider"
+      "time";
+  }
+  :is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] > [data-pane-divider] {
+    align-self: auto;
+  }
 }