@xmesh/system-design 0.0.2 → 0.0.4

package/dist/lit/components/date-range/index.css

@@ -0,0 +1,324 @@
+/* ============================================
+   <xm-date-range /> — preset rail + calendar range picker.
+
+   A field-styled trigger opens an anchored popover (role="dialog") holding a
+   vertical preset rail and a calendar grid. The popover surface chrome
+   (inverse-surface fill, hairline border, level3 elevation, edge-flip, motion)
+   is owned by the composed <xm-overlay> in the `menu` tier; this file styles the
+   trigger and the panel that rides inside the overlay body. Inputs are the
+   card tier, so all ink is inverse-on-surface (POLICIES 7a).
+
+   Selected endpoints fill with --md-sys-color-primary-container (circular,
+   corner-full). The in-range band is a softer translucent coral derived from
+   that same container via color-mix (token-only ingredients) so the run between
+   the two endpoints reads as one continuous selection. The active preset is a
+   solid --md-sys-color-primary pill. Severity is never hue here — no error
+   tokens; the invalid-range message is icon + copy (AD-11).
+
+   BEM block: `date-range`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   Elements: __trigger __icon __value __panel __layout __rail __preset
+     __calendar __cal-head __month __nav __grid __weekday __cell __day __sr-only
+     __alert __alert-icon __footer __btn.
+   Modifiers: __trigger--open · __value--placeholder · __preset--active ·
+     __cell--in-range/--start/--end · __day--today/--selected/--muted ·
+     __btn--apply.
+   ============================================ */
+
+/* ---------- Trigger ---------- */
+.date-range__trigger {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  min-width: 220px;
+  padding: var(--s-2) var(--s-3);
+  background: var(--md-sys-color-inverse-surface);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-button);
+  color: var(--md-sys-color-inverse-on-surface);
+  cursor: pointer;
+  text-align: start;
+  font:
+    var(--md-sys-typescale-body-small-weight)
+    var(--md-sys-typescale-body-small-size) /
+    var(--md-sys-typescale-body-small-line-height)
+    var(--md-sys-typescale-body-small-font);
+  transition:
+    border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.date-range__trigger:hover { border-color: var(--md-sys-color-outline); }
+.date-range__trigger:focus { outline: none; }
+.date-range__trigger:focus-visible,
+.date-range__trigger--open {
+  border-color: var(--md-sys-color-primary);
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+.date-range__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+
+.date-range__value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.date-range__value--placeholder {
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+
+/* ---------- Panel (rides inside overlay body; no chrome of its own) ---------- */
+.date-range__panel {
+  display: flex;
+  flex-direction: column;
+  outline: none;
+}
+
+.date-range__layout {
+  display: flex;
+  gap: var(--s-4);
+}
+
+/* ---------- Preset rail ---------- */
+.date-range__rail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-1);
+  min-width: 132px;
+  padding-inline-end: var(--s-3);
+  border-inline-end: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.date-range__preset {
+  appearance: none;
+  text-align: start;
+  padding: var(--s-2) var(--s-3);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--md-sys-shape-corner-full);
+  color: var(--md-sys-color-inverse-on-surface);
+  cursor: pointer;
+  font:
+    var(--md-sys-typescale-label-large-weight)
+    var(--md-sys-typescale-label-large-size) /
+    var(--md-sys-typescale-label-large-line-height)
+    var(--md-sys-typescale-label-large-font);
+  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.date-range__preset:hover {
+  background: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
+}
+.date-range__preset:focus { outline: none; }
+.date-range__preset:focus-visible { box-shadow: var(--xm-state-focus-ring); }
+.date-range__preset--active {
+  background: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
+}
+.date-range__preset--active:hover { background: var(--md-sys-color-primary); }
+
+/* ---------- Calendar ---------- */
+.date-range__calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+}
+
+.date-range__cal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-2);
+}
+
+.date-range__month {
+  flex: 1;
+  text-align: center;
+  color: var(--md-sys-color-inverse-on-surface);
+  font:
+    var(--md-sys-typescale-title-small-weight)
+    var(--md-sys-typescale-title-small-size) /
+    var(--md-sys-typescale-title-small-line-height)
+    var(--md-sys-typescale-title-small-font);
+}
+
+.date-range__nav {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--md-sys-shape-corner-extra-small);
+  color: var(--xm-color-inverse-on-surface-muted);
+  cursor: pointer;
+  transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.date-range__nav:hover { color: var(--md-sys-color-inverse-on-surface); }
+.date-range__nav:focus { outline: none; }
+.date-range__nav:focus-visible { box-shadow: var(--xm-state-focus-ring); }
+
+.date-range__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 36px);
+  gap: 0;
+}
+
+/* Row wrappers carry role="row" for the ARIA grid; display:contents keeps the
+   columnheaders/gridcells as direct items of the 7-column grid so the visual
+   layout is unchanged. */
+.date-range__weekdays,
+.date-range__week {
+  display: contents;
+}
+
+.date-range__weekday {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  color: var(--xm-color-inverse-on-surface-muted);
+  font:
+    var(--md-sys-typescale-label-medium-weight)
+    var(--md-sys-typescale-label-medium-size) /
+    var(--md-sys-typescale-label-medium-line-height)
+    var(--md-sys-typescale-label-medium-font);
+}
+
+/* The cell carries the in-range band so it spans the full 36px column with no
+   inter-cell gap — the band reads continuous across a week. */
+.date-range__cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+}
+
+.date-range__cell--in-range {
+  background: color-mix(in oklab, var(--md-sys-color-primary-container) 55%, transparent);
+}
+/* Round the band ends at the endpoints so the run has soft caps. */
+.date-range__cell--start {
+  background: color-mix(in oklab, var(--md-sys-color-primary-container) 55%, transparent);
+  border-start-start-radius: var(--md-sys-shape-corner-full);
+  border-end-start-radius: var(--md-sys-shape-corner-full);
+}
+.date-range__cell--end {
+  background: color-mix(in oklab, var(--md-sys-color-primary-container) 55%, transparent);
+  border-start-end-radius: var(--md-sys-shape-corner-full);
+  border-end-end-radius: var(--md-sys-shape-corner-full);
+}
+
+.date-range__day {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--md-sys-shape-corner-full);
+  color: var(--md-sys-color-inverse-on-surface);
+  cursor: pointer;
+  font:
+    var(--md-sys-typescale-body-small-weight)
+    var(--md-sys-typescale-body-small-size) /
+    var(--md-sys-typescale-body-small-line-height)
+    var(--md-sys-typescale-body-small-font);
+  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.date-range__day:hover {
+  background: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
+}
+.date-range__day:focus { outline: none; }
+.date-range__day:focus-visible { box-shadow: var(--xm-state-focus-ring); }
+
+.date-range__day--muted { color: var(--xm-color-inverse-on-surface-muted); }
+
+.date-range__day--today { border-color: var(--md-sys-color-primary); }
+
+.date-range__day--selected {
+  background: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
+}
+.date-range__day--selected:hover { background: var(--md-sys-color-primary-container); }
+
+/* ---------- Screen-reader-only live region + invalid alert ---------- */
+.date-range__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.date-range__alert {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  margin-top: var(--s-2);
+  color: var(--md-sys-color-inverse-on-surface);
+  font:
+    var(--md-sys-typescale-label-medium-weight)
+    var(--md-sys-typescale-label-medium-size) /
+    var(--md-sys-typescale-label-medium-line-height)
+    var(--md-sys-typescale-label-medium-font);
+}
+.date-range__alert-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--md-sys-color-primary);
+}
+
+/* ---------- Footer ---------- */
+.date-range__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--s-2);
+  margin-top: var(--s-3);
+  padding-top: var(--s-3);
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.date-range__btn {
+  appearance: none;
+  padding: var(--s-2) var(--s-4);
+  border-radius: var(--md-sys-shape-corner-button);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  background: transparent;
+  color: var(--md-sys-color-inverse-on-surface);
+  cursor: pointer;
+  font:
+    var(--md-sys-typescale-label-large-weight)
+    var(--md-sys-typescale-label-large-size) /
+    var(--md-sys-typescale-label-large-line-height)
+    var(--md-sys-typescale-label-large-font);
+  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.date-range__btn:hover {
+  background: color-mix(in oklab, var(--md-sys-color-inverse-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
+}
+.date-range__btn:focus { outline: none; }
+.date-range__btn:focus-visible { box-shadow: var(--xm-state-focus-ring); }
+
+.date-range__btn--apply {
+  background: var(--md-sys-color-primary);
+  border-color: transparent;
+  color: var(--md-sys-color-on-primary);
+}
+.date-range__btn--apply:hover { background: var(--md-sys-color-primary); }
+.date-range__btn--apply[aria-disabled="true"] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}

package/dist/lit/components/date-range/index.d.ts

@@ -0,0 +1,57 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+export interface DateRangeChangeDetail {
+    from: string | null;
+    to: string | null;
+}
+export declare class XmDateRange extends LitElement {
+    from: string | null;
+    to: string | null;
+    placeholder: string;
+    open: boolean;
+    private _id;
+    private _draftFrom;
+    private _draftTo;
+    private _view;
+    private _focusDay;
+    private _liveMsg;
+    private _activePreset;
+    private _overlay;
+    private _trigger;
+    private _panel;
+    private _closing;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onDocPointer;
+    private _initDraft;
+    private _toggle;
+    private _close;
+    private _onOverlayClose;
+    private _focusRovingDay;
+    private _applyPreset;
+    private _pickDay;
+    private get _invalid();
+    private _apply;
+    private _clear;
+    private _emit;
+    private _shiftMonth;
+    private _onGridKey;
+    private _panelFocusables;
+    private _onPanelKey;
+    private _daysInMonth;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): TemplateResult;
+    private _renderTriggerValue;
+    private _renderPanel;
+    private _renderRail;
+    private _renderCalendar;
+    private _renderWeeks;
+    private _renderDay;
+    private _renderFooter;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-date-range": XmDateRange;
+    }
+}