@adia-ai/web-components 0.6.33 → 0.6.35

package/components/date-range-picker/date-range-picker.css

@@ -0,0 +1,224 @@
+/* ============================================================
+   date-range-picker — two-block @scope per ADR-0003.
+   Block 1 (TOKENS): :where(:scope) — token defaults.
+   Block 2 (BASE): :scope + descendant selectors.
+   Popover surfaces live OUTSIDE @scope because the Popover API
+   lifts them into the top layer; custom-property inheritance
+   still cascades from the host so --date-range-picker-* tokens
+   reach the popover.
+   ============================================================ */
+
+@scope (date-range-picker-ui) {
+  /* ── Block 1 — TOKENS ── */
+  :where(:scope) {
+    --date-range-picker-bg-default:               var(--a-bg);
+    --date-range-picker-fg-default:               var(--a-fg);
+
+    /* Popover surface */
+    --date-range-picker-popover-bg-default:       var(--a-bg-subtle);
+    --date-range-picker-popover-border-default:   var(--a-border-subtle);
+    --date-range-picker-popover-radius-default:   var(--a-radius-lg);
+    --date-range-picker-popover-shadow-default:   var(--a-shadow-lg);
+    --date-range-picker-popover-padding-default:  var(--a-space-3);
+    --date-range-picker-popover-gap-default:      var(--a-space-3);
+
+    /* Preset rail */
+    --date-range-picker-preset-bg-default:        transparent;
+    --date-range-picker-preset-bg-hover-default:  var(--a-bg-hover);
+    --date-range-picker-preset-min-width-default: 10em;
+    --date-range-picker-preset-gap-default:       var(--a-space-1);
+
+    /* Selected / preview day cells (cascade into calendar) */
+    --date-range-picker-selected-bg-default:      var(--a-accent);
+    --date-range-picker-selected-fg-default:      var(--a-accent-fg);
+    --date-range-picker-preview-bg-default:       var(--a-accent-muted);
+
+    /* Trigger — mirrors the canonical trigger surface used by
+       <select-ui> and <calendar-picker-ui> so consumers see a
+       consistent open-picker chrome across the input/picker family.
+       The values are deliberately the same tokens select/calendar
+       cascade onto their own `--*-trigger-*` aliases. */
+    --date-range-picker-trigger-min-width-default: 14em;
+    --date-range-picker-trigger-height-default:    var(--a-size);
+    --date-range-picker-trigger-px-default:        var(--a-ui-px);
+    --date-range-picker-trigger-gap-default:       var(--a-space-1);
+    --date-range-picker-trigger-radius-default:    var(--a-radius);
+    --date-range-picker-trigger-bg-default:        var(--a-ui-bg);
+    --date-range-picker-trigger-bg-hover-default:  var(--a-ui-bg-hover);
+    --date-range-picker-trigger-fg-default:        var(--a-ui-text-subtle);
+    --date-range-picker-trigger-border-default:    var(--a-ui-border);
+    --date-range-picker-trigger-border-hover-default: var(--a-ui-border-hover);
+    --date-range-picker-trigger-focus-ring-default:   var(--a-focus-ring);
+
+    /* Popover-internal padding (NOT the trigger — kept distinct from
+       --date-range-picker-trigger-px to avoid the historical conflation
+       that made the trigger render with --a-space-3 vertical inflation). */
+    --date-range-picker-px-default:               var(--a-space-3);
+    --date-range-picker-py-default:               var(--a-space-2);
+
+    /* Motion */
+    --date-range-picker-duration-default:         var(--a-duration-fast);
+    --date-range-picker-easing-default:           var(--a-easing);
+  }
+
+  /* ── Block 2 — BASE ── */
+  :scope {
+    box-sizing: border-box;
+    position: relative;
+    display: inline-block;
+    background: var(--date-range-picker-bg, var(--date-range-picker-bg-default));
+    color: var(--date-range-picker-fg, var(--date-range-picker-fg-default));
+    font-size: var(--a-ui-size);
+  }
+
+  /* ── Trigger ──
+     Canonical trigger surface matching <select-ui> + <calendar-picker-ui>:
+     flex row, --a-size min-height, --a-ui-px padding, --a-radius corner,
+     --a-ui-border outline. The trigger is a <button-ui slot="trigger">
+     stamped by date-range-picker.class.js — these rules override button-ui's defaults at
+     equal specificity so the picker trigger reads as part of the
+     input/picker family rather than a generic button. */
+  :scope > [slot="trigger"] {
+    min-width: var(--date-range-picker-trigger-min-width, var(--date-range-picker-trigger-min-width-default));
+    min-height: var(--date-range-picker-trigger-height, var(--date-range-picker-trigger-height-default));
+    padding: 0 var(--date-range-picker-trigger-px, var(--date-range-picker-trigger-px-default));
+    gap: var(--date-range-picker-trigger-gap, var(--date-range-picker-trigger-gap-default));
+    border-radius: var(--date-range-picker-trigger-radius, var(--date-range-picker-trigger-radius-default));
+    border: 1px solid var(--date-range-picker-trigger-border, var(--date-range-picker-trigger-border-default));
+    background: var(--date-range-picker-trigger-bg, var(--date-range-picker-trigger-bg-default));
+    color: var(--date-range-picker-trigger-fg, var(--date-range-picker-trigger-fg-default));
+    /* Justify content so leading icon + label sit at start, trailing
+       caret at end — same shape select-ui's trigger uses via
+       `justify-content: space-between` on a [leading|display|caret]
+       slot triplet. button-ui's natural alignment is `center`; our
+       leading+text+trailing layout reads better as space-between. */
+    justify-content: space-between;
+    line-height: 1;
+    transition:
+      border-color var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default)),
+      background   var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default));
+  }
+  :scope > [slot="trigger"]:hover {
+    border-color: var(--date-range-picker-trigger-border-hover, var(--date-range-picker-trigger-border-hover-default));
+    background: var(--date-range-picker-trigger-bg-hover, var(--date-range-picker-trigger-bg-hover-default));
+  }
+  :scope:focus-visible { outline: none; }
+  :scope:focus-visible > [slot="trigger"] {
+    box-shadow: var(--date-range-picker-trigger-focus-ring, var(--date-range-picker-trigger-focus-ring-default));
+  }
+
+  /* States */
+  :scope[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  :scope[readonly] > [slot="trigger"] {
+    cursor: default;
+  }
+}
+
+/* ============================================================
+   Popover surface — outside @scope (lifted to top layer).
+   Custom properties inherit from the host so
+   --date-range-picker-* tokens are available here.
+   ============================================================ */
+
+/* §FB-Wave1-QA — `display: grid` MUST be guarded by `:popover-open` so the
+   popover honors the UA `popover` `display: none` while closed. Without
+   the guard, the popover renders in normal flow on first paint. Mirrors
+   the popover-ui pattern that uses `:not(:popover-open) { display: none }`. */
+date-range-picker-ui [slot="popover"] {
+  margin: 0;
+  padding: var(--date-range-picker-py, var(--date-range-picker-py-default)) var(--date-range-picker-px, var(--date-range-picker-px-default));
+  border: 1px solid var(--date-range-picker-popover-border, var(--date-range-picker-popover-border-default));
+  border-radius: var(--date-range-picker-popover-radius, var(--date-range-picker-popover-radius-default));
+  background: var(--date-range-picker-popover-bg, var(--date-range-picker-popover-bg-default));
+  box-shadow: var(--date-range-picker-popover-shadow, var(--date-range-picker-popover-shadow-default));
+  color: var(--a-fg);
+  /* Anchor-positioning fallback — popover.css and anchor.js handle
+     placement; layout here just sets the grid. */
+  inset: auto;
+  /* Fade + lift in on first paint via @starting-style. */
+  opacity: 1;
+  translate: 0 0;
+  transition:
+    opacity var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default)),
+    translate var(--date-range-picker-duration, var(--date-range-picker-duration-default)) var(--date-range-picker-easing, var(--date-range-picker-easing-default));
+}
+
+date-range-picker-ui [slot="popover"]:popover-open {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--date-range-picker-popover-gap, var(--date-range-picker-popover-gap-default));
+}
+
+date-range-picker-ui [slot="popover"]:popover-open {
+  @starting-style {
+    opacity: 0;
+    translate: 0 -4px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  date-range-picker-ui [slot="popover"] { transition: none; }
+}
+
+/* Preset rail — single-column flex of button-ui buttons. */
+date-range-picker-ui [data-preset-rail],
+date-range-picker-ui [slot="presets"] {
+  grid-column: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--date-range-picker-preset-gap, var(--date-range-picker-preset-gap-default));
+  min-width: var(--date-range-picker-preset-min-width, var(--date-range-picker-preset-min-width-default));
+}
+
+/* When [no-presets] is set OR no preset rail exists, collapse the
+   grid to a single column. */
+date-range-picker-ui[no-presets] [slot="popover"],
+date-range-picker-ui [slot="popover"]:not(:has([data-preset-rail])):not(:has([slot="presets"])) {
+  grid-template-columns: 1fr;
+}
+
+date-range-picker-ui [data-preset-rail] button-ui {
+  justify-content: flex-start;
+}
+
+/* Calendar area — horizontal layout of two calendar panes. */
+date-range-picker-ui [data-calendar-area] {
+  grid-column: 2;
+  display: flex;
+  gap: var(--a-space-3);
+  align-items: flex-start;
+}
+
+date-range-picker-ui [data-calendar-area] calendar-grid-ui {
+  flex: 0 0 auto;
+}
+
+/* Cascade range-aware tokens into the inner calendar panes so the
+   linked-range coloring uses the date-range-picker palette.
+   §FB-Wave1-QA — now consumes calendar-grid-ui tokens (the extracted
+   substrate primitive). */
+date-range-picker-ui calendar-grid-ui {
+  --calendar-grid-day-bg-selected: var(--date-range-picker-selected-bg, var(--date-range-picker-selected-bg-default));
+  --calendar-grid-day-fg-selected: var(--date-range-picker-selected-fg, var(--date-range-picker-selected-fg-default));
+  --calendar-grid-day-bg-hover:    var(--date-range-picker-preview-bg, var(--date-range-picker-preview-bg-default));
+}
+
+/* Comparison mode — split preset rail visual via the divider. */
+date-range-picker-ui[comparison] [data-preset-rail] [data-preset-divider] {
+  margin-block: var(--a-space-1);
+}
+
+/* Footer area (author-supplied [slot="footer"]) — spans both columns
+   under the calendar area. */
+date-range-picker-ui [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(--a-border-subtle);
+}

package/components/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,82 @@
+/**
+ * `<date-range-picker-ui>` — Compound form primitive for selecting a start + end date pair with optional named preset shortcuts ("Today", "Last 7 days", "This month", ...). Default presentation is a trigger button showing the formatted range; on activation a popover opens with two synchronized calendar panes + a preset side rail. Composes <calendar-picker-ui> twice; emits {from, to} ISO 8601 dates. Optional comparison-range mode emits a secondary range for analytics surfaces.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/date-range-picker
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export interface DateRangePickerChangeEventDetail {
+  compareValue: string;
+  presetLabel: string;
+  value: string;
+}
+
+export type DateRangePickerChangeEvent = CustomEvent<DateRangePickerChangeEventDetail>;
+export interface DateRangePickerCloseEventDetail {
+  reason: string;
+}
+
+export type DateRangePickerCloseEvent = CustomEvent<DateRangePickerCloseEventDetail>;
+export interface DateRangePickerInputEventDetail {
+  value: string;
+}
+
+export type DateRangePickerInputEvent = CustomEvent<DateRangePickerInputEventDetail>;
+export interface DateRangePickerInvalidEventDetail {
+  reason: string;
+  value: string;
+}
+
+export type DateRangePickerInvalidEvent = CustomEvent<DateRangePickerInvalidEventDetail>;
+export interface DateRangePickerOpenEventDetail {
+  trigger: string;
+}
+
+export type DateRangePickerOpenEvent = CustomEvent<DateRangePickerOpenEventDetail>;
+
+export class UIDateRangePicker extends UIElement {
+  /** Required for validation when inside a `<form>`. */
+  required: boolean;
+  /** Comparison range when `[comparison]` is set. Same `{from, to}` shape as `value`. */
+  compareValue: string;
+  /** Enable comparison-range mode. Renders a second preset cluster and emits a secondary range under `<name>-compare`. */
+  comparison: boolean;
+  /** Block all interaction. Trigger remains rendered but does not open the popover. */
+  disabled: boolean;
+  /** Trigger button date format. `short`: `Jan 1, 2026`; `long`: `January 1, 2026`; `iso`: `2026-01-01`. */
+  format: 'short' | 'long' | 'iso';
+  /** Latest selectable ISO date (inclusive). Days after are disabled in both panes. */
+  max: string;
+  /** Earliest selectable ISO date (inclusive). Days before are disabled in both panes. */
+  min: string;
+  /** Form field name for form data submission. The selected range serializes as JSON `{"from":"...","to":"..."}` under this key. */
+  name: string;
+  /** Hide the preset side rail. */
+  noPresets: boolean;
+  /** Whether the popover is currently open. */
+  open: boolean;
+  /** Text shown in the trigger when the value is empty. */
+  placeholder: string;
+  /** Block edits; allow keyboard navigation for screen-reader inspection. */
+  readonly: boolean;
+  /** Selected range as `{from, to}` ISO 8601 dates. Null when empty. Emitted on commit. */
+  value: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIDateRangePicker, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: DateRangePickerChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'close', listener: (ev: DateRangePickerCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'input', listener: (ev: DateRangePickerInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'invalid', listener: (ev: DateRangePickerInvalidEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'open', listener: (ev: DateRangePickerOpenEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/date-range-picker/date-range-picker.examples.md

@@ -0,0 +1,37 @@
+# date-range-picker — Examples
+
+## Canonical
+
+```html
+<field-ui label="Report period">
+  <date-range-picker-ui
+    name="report-period"
+    min="2026-01-01"
+    max="2026-12-31">
+  </date-range-picker-ui>
+</field-ui>
+```
+
+## Comparison mode
+
+```html
+<date-range-picker-ui
+  name="period"
+  comparison
+  value='{"from":"2026-05-01","to":"2026-05-31"}'
+  compare-value='{"from":"2026-04-01","to":"2026-04-30"}'>
+</date-range-picker-ui>
+```
+
+## Custom presets
+
+```html
+<date-range-picker-ui id="dr" name="period"></date-range-picker-ui>
+<script>
+  document.getElementById('dr').presets = [
+    { label: 'Q1', range: { from: '2026-01-01', to: '2026-03-31' } },
+    { label: 'Q2', range: { from: '2026-04-01', to: '2026-06-30' } },
+    { label: 'YTD', range: { from: '2026-01-01', to: '2026-05-24' } },
+  ];
+</script>
+```

package/components/date-range-picker/date-range-picker.js

@@ -0,0 +1,17 @@
+/**
+ * `<date-range-picker-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UIDateRangePicker } from '@adia-ai/web-components/components/date-range-picker/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UIDateRangePicker } from './date-range-picker.class.js';
+
+defineIfFree('date-range-picker-ui', UIDateRangePicker);
+
+export { UIDateRangePicker };