@xmesh/system-design 0.0.4 → 0.0.6

package/dist/lit/components/date-range/index.styles.js

@@ -0,0 +1,338 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/date-range/index.css
+// SSR-safe: constructable stylesheets need the DOM, so in a non-DOM context
+// (Node/SSR import) this exports [] instead of throwing. The CSS self-declares
+// the @layer order so the override contract holds even without ./base (AD-2).
+let sheets = [];
+if (typeof CSSStyleSheet !== "undefined") {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`@layer reset, base, tokens, components, utilities;
+@layer components {
+/* ============================================
+   <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;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

package/dist/lit/components/dialog/index.d.ts

@@ -1,6 +1,10 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
+/**
+ * @fires close - Fired when the element requests to close.
+ */
 export declare class XmDialog extends LitElement {
+    static styles: CSSStyleSheet[];
     open: boolean;
     noScrimClose: boolean;
     static: boolean;

package/dist/lit/components/dialog/index.js

@@ -48,7 +48,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, svg, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
-const DIALOG_CSS = new URL("../dialog/index.css", import.meta.url).href;
+import dialogSheets from "./index.styles.js";
 let dialogSeq = 0;
 const CLOSE_ICON = () => svg `
   <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
@@ -57,6 +57,9 @@ const CLOSE_ICON = () => svg `
     <path d="M6 6l12 12M18 6L6 18" />
   </svg>
 `;
+/**
+ * @fires close - Fired when the element requests to close.
+ */
 let XmDialog = class XmDialog extends LitElement {
     constructor() {
         super(...arguments);
@@ -115,10 +118,12 @@ let XmDialog = class XmDialog extends LitElement {
             this._hasAction = slot.assignedElements().length > 0;
         };
     }
+    // Adopted from the build-generated sheets (scripts/gen-styles.mjs) — no
+    // runtime URL fetch (ADR 0012). Cascade order preserved from the old <link>s.
+    static { this.styles = [...dialogSheets]; }
     render() {
         const cls = `dialog${this.static ? " dialog--static" : ""}`;
         return html `
-      <link rel="stylesheet" href="${DIALOG_CSS}" />
       <style>
         :host { display: contents; }
       </style>

package/dist/lit/components/dialog/index.styles.js

@@ -0,0 +1,138 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/dialog/index.css
+// SSR-safe: constructable stylesheets need the DOM, so in a non-DOM context
+// (Node/SSR import) this exports [] instead of throwing. The CSS self-declares
+// the @layer order so the override contract holds even without ./base (AD-2).
+let sheets = [];
+if (typeof CSSStyleSheet !== "undefined") {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`@layer reset, base, tokens, components, utilities;
+@layer components {
+/* ============================================
+   Dialog — a centered modal panel.
+
+   The panel chrome (inverse-surface fill, inverse-on-surface ink, hairline
+   border, corner-large radius, level5 elevation, the scrim ::backdrop, and the
+   centered modal positioning) is owned by the composed <xm-overlay> in the
+   \`dialog\` tier (modal mode). This file styles the panel's internal layout:
+   the header row + close control, the body, and the singular action row.
+
+   All ink is inverse-on-surface (AD-13) — the card-stack ink, matching the
+   theme-following panel surface (ADR 0006). Scrim is a flat alpha on
+   --md-sys-color-scrim (owned by the overlay); NO gradient (the snackbar scrim
+   is the only sanctioned one).
+
+   Entry/exit is opacity + a small translateY at short4 standard — no scale-in
+   reveal, no spring. The overlay owns the fade; this adds the lift.
+
+   BEM block: \`dialog\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   Elements: __head, __header, __close, __body, __actions. Modifier: --static.
+   ============================================ */
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-4);
+  min-width: 0;
+  color: var(--md-sys-color-inverse-on-surface);
+  padding: var(--s-5);
+  animation: dialog-in var(--md-sys-motion-duration-short4)
+    var(--md-sys-motion-easing-standard) both;
+}
+.dialog--static {
+  animation: none;
+}
+
+@keyframes dialog-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dialog__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--s-3);
+}
+.dialog__head.is-empty {
+  /* No header text — keep the close control but drop the title row height. */
+  justify-content: flex-end;
+}
+
+.dialog__header {
+  font-family: var(--md-sys-typescale-title-large-font);
+  font-size: var(--md-sys-typescale-title-large-size);
+  line-height: var(--md-sys-typescale-title-large-line-height);
+  font-weight: var(--md-sys-typescale-title-large-weight);
+  letter-spacing: var(--md-sys-typescale-title-large-tracking);
+  color: var(--md-sys-color-inverse-on-surface);
+  text-wrap: pretty;
+}
+
+.dialog__close {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: color-mix(
+    in oklch,
+    var(--md-sys-color-inverse-on-surface) 70%,
+    transparent
+  );
+  width: 32px;
+  height: 32px;
+  border-radius: var(--md-sys-shape-corner-small);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin: calc(-1 * var(--s-1)) calc(-1 * var(--s-1)) 0 0;
+  transition: background var(--md-sys-motion-duration-short3)
+    var(--md-sys-motion-easing-standard);
+}
+.dialog__close:hover {
+  background: color-mix(
+    in oklch,
+    var(--md-sys-color-inverse-on-surface) 10%,
+    transparent
+  );
+  color: var(--md-sys-color-inverse-on-surface);
+}
+.dialog__close:focus-visible {
+  outline: none;
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+.dialog__body {
+  min-width: 0;
+  font-family: var(--md-sys-typescale-body-medium-font);
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+  color: color-mix(
+    in oklch,
+    var(--md-sys-color-inverse-on-surface) 88%,
+    transparent
+  );
+  text-wrap: pretty;
+}
+
+.dialog__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--s-2);
+  flex-wrap: wrap;
+}
+.dialog__actions.is-empty {
+  display: none;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

package/dist/lit/components/divider/index.d.ts

@@ -2,6 +2,7 @@ import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type DividerOrientation = "horizontal" | "vertical";
 export declare class XmDivider extends LitElement {
+    static styles: CSSStyleSheet[];
     orientation: DividerOrientation;
     render(): TemplateResult;
 }

package/dist/lit/components/divider/index.js

@@ -27,18 +27,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import dividerSheets from "./index.styles.js";
 // Resolve CSS relative to the *built* file:
 // lit/build/components/divider/index.js → ../divider/index.css.
-const DIVIDER_CSS = new URL("../divider/index.css", import.meta.url).href;
 let XmDivider = class XmDivider extends LitElement {
     constructor() {
         super(...arguments);
         this.orientation = "horizontal";
     }
+    // Adopted from the build-generated sheets (scripts/gen-styles.mjs) — no
+    // runtime URL fetch (ADR 0012). Cascade order preserved from the old <link>s.
+    static { this.styles = [...dividerSheets]; }
     render() {
         const orientation = this.orientation === "vertical" ? "vertical" : "horizontal";
         return html `
-      <link rel="stylesheet" href="${DIVIDER_CSS}" />
       <style>
         :host {
           display: block;

package/dist/lit/components/divider/index.styles.js

@@ -0,0 +1,41 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/divider/index.css
+// SSR-safe: constructable stylesheets need the DOM, so in a non-DOM context
+// (Node/SSR import) this exports [] instead of throwing. The CSS self-declares
+// the @layer order so the override contract holds even without ./base (AD-2).
+let sheets = [];
+if (typeof CSSStyleSheet !== "undefined") {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`@layer reset, base, tokens, components, utilities;
+@layer components {
+/* ============================================
+   <xm-divider> — standalone hairline rule.
+
+   Exactly 1px using --md-sys-color-outline-variant (the default hairline
+   weight; the same rule a card's header/footer split uses). Never 2px —
+   2px is reserved for the drag-active field state only. No thickness
+   variants, no status hue: a divider is always a neutral hairline that
+   traces its host surface and reads on both surface families (AD-13).
+
+   BEM: block \`divider\`; modifiers \`--horizontal\` / \`--vertical\`.
+   ============================================ */
+
+.divider {
+  background: var(--md-sys-color-outline-variant);
+  border: 0;
+}
+
+.divider--horizontal {
+  width: 100%;
+  height: 1px;
+}
+
+.divider--vertical {
+  width: 1px;
+  height: 100%;
+  min-height: 1em;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

package/dist/lit/components/empty-state/index.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 export declare class XmEmptyState extends LitElement {
+    static styles: CSSStyleSheet[];
     heading: string;
     /** A primitives icon element name (e.g. "xm-search-icon"). Used only when no
         slot="icon" content is supplied. */

package/dist/lit/components/empty-state/index.js

@@ -38,7 +38,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-const EMPTY_STATE_CSS = new URL("../empty-state/index.css", import.meta.url).href;
+import emptyStateSheets from "./index.styles.js";
 let XmEmptyState = class XmEmptyState extends LitElement {
     constructor() {
         super(...arguments);
@@ -69,10 +69,12 @@ let XmEmptyState = class XmEmptyState extends LitElement {
             this._hasAction = slot.assignedElements().length > 0;
         };
     }
+    // Adopted from the build-generated sheets (scripts/gen-styles.mjs) — no
+    // runtime URL fetch (ADR 0012). Cascade order preserved from the old <link>s.
+    static { this.styles = [...emptyStateSheets]; }
     render() {
         const showFallbackIcon = !this._hasIconSlot && this.icon !== "";
         return html `
-      <link rel="stylesheet" href="${EMPTY_STATE_CSS}" />
       <style>
         :host { display: block; }
         :host([hidden]) { display: none; }