@xmesh/system-design 0.0.4 → 0.0.5

package/dist/lit/components/list-item/index.styles.js

@@ -0,0 +1,133 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/list-item/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 {
+/* ============================================
+   List item — a row in <xm-list>.
+
+   Generalizes the shipped <xm-sidebar-item> desk-row pattern (FR-156):
+   8px radius, surface-container-lowest hover/active, short3 background
+   transition, on-surface / on-surface-variant ink — into a reusable
+   surface* row with leading / body (title + optional secondary) /
+   trailing slots.
+
+   Lives on the surface* desk family (AD-13): primary ink
+   --md-sys-color-on-surface, secondary --md-sys-color-on-surface-variant.
+   Selected adds a coral leading indicator + a soft selected background;
+   selection is conveyed by the indicator + aria-selected, never by color
+   alone (NFR-15). State changes are real token swaps, not filter/opacity.
+   ============================================ */
+
+.list-item {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-2) var(--s-3);
+  border-radius: var(--md-sys-shape-corner-small);
+  color: var(--md-sys-color-on-surface);
+  cursor: pointer;
+  position: relative;
+  transition:
+    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.list-item:focus { outline: none; }
+
+/* ---------- Hover / active (shared with sidebar-item) ---------- */
+.list-item:hover,
+.list-item.is-hover {
+  background: var(--md-sys-color-surface-container-lowest);
+}
+
+/* ---------- Selected — coral leading indicator + soft fill ---------- */
+.list-item--selected {
+  background: var(--md-sys-color-surface-container-low);
+}
+.list-item--selected::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 60%;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: var(--md-sys-color-primary);
+}
+.list-item--selected .list-item__title {
+  color: var(--md-sys-color-on-surface);
+}
+
+/* ---------- Disabled — reduced emphasis, no hover ---------- */
+.list-item--disabled {
+  cursor: not-allowed;
+  color: var(--xm-color-on-surface-disabled);
+}
+.list-item--disabled:hover,
+.list-item--disabled.is-hover {
+  background: transparent;
+}
+
+/* ---------- Leading / body / trailing ---------- */
+.list-item__leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--md-sys-color-on-surface-variant);
+}
+.list-item__leading.is-empty { display: none; }
+
+.list-item__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.list-item__title {
+  font-family: var(--md-sys-typescale-title-small-font);
+  font-size: var(--md-sys-typescale-title-small-size);
+  font-weight: 500;
+  line-height: 1.25;
+  color: var(--md-sys-color-on-surface);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.list-item__secondary {
+  font-family: var(--md-sys-typescale-body-medium-font);
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: 1.35;
+  color: var(--md-sys-color-on-surface-variant);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.list-item__secondary.is-empty { display: none; }
+
+.list-item__trailing {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--md-sys-color-on-surface-variant);
+}
+.list-item__trailing.is-empty { display: none; }
+
+/* Dark theme — like sidebar-item, push the resting title into gray so a
+   hovered/selected row's brighter title pops as the active state. */
+[data-theme="dark"] .list-item:not(.list-item--selected):not(:hover):not(.is-hover) .list-item__title {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -1,7 +1,14 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 import type { OverlayPlacement } from "../overlay/index.js";
+/**
+ * @fires close - Fired when the element requests to close.
+ * @fires xm-menu-item-activate - Fired when a menu item is activated.
+ * @fires xm-menu-item-hover - Fired when a menu item is hovered.
+ * @fires xm-menu-select - Fired when a menu option is selected.
+ */
 export declare class XmMenu extends LitElement {
+    static styles: CSSStyleSheet[];
     open: boolean;
     placement: OverlayPlacement;
     label: string;
@@ -30,6 +37,7 @@ export declare class XmMenu extends LitElement {
     protected updated(): void;
 }
 export declare class XmMenuItem extends LitElement {
+    static styles: CSSStyleSheet[];
     value: string | number;
     disabled: boolean;
     active: boolean;

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

@@ -48,8 +48,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
-const MENU_CSS = new URL("../menu/index.css", import.meta.url).href;
+import menuSheets from "./index.styles.js";
 let menuSeq = 0;
+/**
+ * @fires close - Fired when the element requests to close.
+ * @fires xm-menu-item-activate - Fired when a menu item is activated.
+ * @fires xm-menu-item-hover - Fired when a menu item is hovered.
+ * @fires xm-menu-select - Fired when a menu option is selected.
+ */
 let XmMenu = class XmMenu extends LitElement {
     constructor() {
         super(...arguments);
@@ -155,6 +161,9 @@ let XmMenu = class XmMenu extends LitElement {
             }
         };
     }
+    // Adopted from the build-generated sheet (gen-styles.mjs) — no runtime URL
+    // fetch (ADR 0012). Both xm-menu and xm-menu-item share this one folder sheet.
+    static { this.styles = [...menuSheets]; }
     get _items() {
         const slot = this.renderRoot.querySelector(".menu__list slot:not([name])");
         if (!slot)
@@ -171,7 +180,6 @@ let XmMenu = class XmMenu extends LitElement {
     render() {
         const activeId = this._activeIndex >= 0 ? `${this._listId}-item-${this._activeIndex}` : "";
         return html `
-      <link rel="stylesheet" href="${MENU_CSS}" />
       <style>
         :host { display: inline-flex; }
       </style>
@@ -340,6 +348,7 @@ let XmMenuItem = class XmMenuItem extends LitElement {
             this.dispatchEvent(new CustomEvent("xm-menu-item-hover", { bubbles: true, composed: true }));
         };
     }
+    static { this.styles = [...menuSheets]; }
     render() {
         const cls = [
             "menu-item",
@@ -349,7 +358,6 @@ let XmMenuItem = class XmMenuItem extends LitElement {
             .filter(Boolean)
             .join(" ");
         return html `
-      <link rel="stylesheet" href="${MENU_CSS}" />
       <style>
         :host { display: block; }
       </style>

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

@@ -0,0 +1,108 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/menu/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 {
+/* ============================================
+   Menu — an anchored dropdown of menu items.
+
+   The popover surface chrome (inverse-surface fill, inverse-on-surface ink,
+   hairline border, level3 elevation, edge-flip, open/close motion) is owned by
+   the composed <xm-overlay> in the \`menu\` tier. This file styles the list, the
+   trigger wrapper, and each <xm-menu-item> (a separate block, rendered in its
+   own shadow root).
+
+   All ink is inverse-on-surface (AD-13) — the popover stack ink. Item
+   hover/active uses a state layer mixed from the ink, not opacity tricks on the
+   real content. Disabled items take the shared reduced emphasis — never an
+   error hue (AD-11). Destructive actions are icon + copy.
+
+   BEM blocks: \`menu\` (root) + \`menu-item\` (the item, its own shadow root). Both
+   registered in scripts/check-bem.sh STRICT_BLOCKS.
+   Elements: menu__trigger, menu__list; menu-item__icon, menu-item__label.
+   Modifiers: menu-item--active, menu-item--disabled.
+   ============================================ */
+
+.menu__trigger {
+  display: inline-flex;
+  align-items: center;
+}
+
+.menu__list {
+  list-style: none;
+  margin: 0;
+  padding: var(--s-1);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-0-5);
+  min-width: 180px;
+  outline: none;
+  color: var(--md-sys-color-inverse-on-surface);
+}
+
+/* ---------- Menu item (separate block / shadow root) ---------- */
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-2) var(--s-3);
+  border-radius: var(--md-sys-shape-corner-small);
+  color: var(--md-sys-color-inverse-on-surface);
+  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);
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--md-sys-motion-duration-short3)
+    var(--md-sys-motion-easing-standard);
+}
+
+/* Active (keyboard / hover) — a state layer mixed from the popover ink. */
+.menu-item--active {
+  background: color-mix(
+    in oklch,
+    var(--md-sys-color-inverse-on-surface) 10%,
+    transparent
+  );
+}
+
+.menu-item--disabled {
+  color: color-mix(
+    in oklch,
+    var(--md-sys-color-inverse-on-surface) 40%,
+    transparent
+  );
+  cursor: default;
+  pointer-events: none;
+}
+
+.menu-item__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: color-mix(
+    in oklch,
+    var(--md-sys-color-inverse-on-surface) 70%,
+    transparent
+  );
+}
+/* Collapse the icon column entirely when no icon is slotted so labels align. */
+.menu-item__icon.is-empty {
+  display: none;
+}
+
+.menu-item__label {
+  flex: 1;
+  min-width: 0;
+  text-wrap: pretty;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

package/dist/lit/components/multi-select/index.css

@@ -0,0 +1,156 @@
+/* ============================================
+   xm-multi-select — multiple-value picker for XmField (Component-Capability
+   Epic 2, ADR 0014).
+
+   Composes XmField (chrome) + xm-overlay (anchored panel) + xm-checkbox (the
+   per-option selected indicator) + xm-text-field (search). This file styles ONLY
+   the bespoke parts: the closed trigger (a full-bleed <button> inside the base's
+   .field__control wrapper), the chevron, and the panel content (search + listbox)
+   projected into the overlay. Positioning / elevation of the panel is owned by
+   xm-overlay; the option checkbox visual is owned by xm-checkbox.
+
+   Surface & ink (AD-13):
+     • Closed trigger rides the inverse-surface card tier → inverse-on-surface ink,
+       inverse-on-surface-muted for the placeholder.
+     • The panel rows sit on the overlay's inverse-surface panel → ink stays
+       inverse-on-surface; hover/active uses the MD3 state layer.
+     • Selection is carried by the row's xm-checkbox (coral fill), NOT a row tint —
+       so the active (keyboard/hover) highlight never double-signals with selection.
+
+   BEM block: `multi-select`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+/* ---------- Closed trigger — full-bleed button in the field wrapper ---------- */
+.multi-select__control {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  appearance: none;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--md-sys-color-inverse-on-surface);
+  font:
+    var(--md-sys-typescale-body-large-weight)
+    var(--md-sys-typescale-body-large-size) /
+    var(--md-sys-typescale-body-large-line-height)
+    var(--md-sys-typescale-body-large-font);
+  padding: 0 var(--s-3);
+  text-align: left;
+  cursor: pointer;
+}
+.multi-select__control:disabled {
+  cursor: not-allowed;
+}
+
+/* ---------- Value / placeholder ---------- */
+.multi-select__value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.multi-select__value--placeholder {
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+
+/* ---------- Chevron — rotates on open (short3, standard) ---------- */
+.multi-select__chevron {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--md-sys-color-inverse-on-surface);
+  transition: transform var(--md-sys-motion-duration-short3)
+    var(--md-sys-motion-easing-standard);
+}
+.multi-select__chevron--open {
+  transform: rotate(180deg);
+}
+
+/* ---------- Panel (inside the overlay): search + listbox ---------- */
+.multi-select__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+  min-width: 220px;
+}
+.multi-select__search {
+  display: block;
+  width: 100%;
+}
+
+/* ---------- Listbox ---------- */
+.multi-select__listbox {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-0-5);
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+/* ---------- Option rows ---------- */
+.multi-select__option {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-1) var(--s-2);
+  border-radius: var(--md-sys-shape-corner-small);
+  color: var(--md-sys-color-inverse-on-surface);
+  font:
+    var(--md-sys-typescale-body-medium-weight)
+    var(--md-sys-typescale-body-medium-size) /
+    var(--md-sys-typescale-body-medium-line-height)
+    var(--md-sys-typescale-body-medium-font);
+  cursor: pointer;
+  user-select: none;
+}
+.multi-select__option-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* The option checkbox is presentational — the row owns the click + a11y. */
+.multi-select__check {
+  flex-shrink: 0;
+  pointer-events: none;
+}
+
+/* Active (keyboard / pointer hover) — the MD3 state layer over the panel ink. */
+.multi-select__option--active {
+  background: color-mix(
+    in oklab,
+    var(--md-sys-color-inverse-on-surface)
+      var(--md-sys-state-hover-state-layer-opacity),
+    transparent
+  );
+}
+
+/* Disabled option (explicitly disabled, or unselected at the `max` cap). */
+.multi-select__option--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ---------- Empty (no search matches) ---------- */
+.multi-select__empty {
+  list-style: none;
+  padding: var(--s-2) var(--s-2);
+  color: var(--xm-color-inverse-on-surface-muted);
+  font:
+    var(--md-sys-typescale-body-medium-weight)
+    var(--md-sys-typescale-body-medium-size) /
+    var(--md-sys-typescale-body-medium-line-height)
+    var(--md-sys-typescale-body-medium-font);
+}

package/dist/lit/components/multi-select/index.d.ts

@@ -0,0 +1,70 @@
+import type { PropertyValues, TemplateResult } from "lit";
+import { XmField } from "../field/index.js";
+import type { XmOverlay } from "../overlay/index.js";
+import "../overlay/index.js";
+import "../checkbox/index.js";
+import "../text-field/index.js";
+export interface MultiSelectOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+/**
+ * @fires change - Fired on every toggle; `detail.value` is the full selection as an Array<primitive>.
+ */
+export declare class XmMultiSelect extends XmField {
+    static styles: CSSStyleSheet[];
+    /** The option model — `{ label, value, disabled? }` shared with xm-select / radio-group. */
+    options: MultiSelectOption[];
+    /** Shown on the trigger when nothing is selected. */
+    placeholder: string;
+    /** Selection cap (0 = uncapped). At the cap, unselected options disable; selected stay removable. */
+    max: number;
+    /** Render the in-panel search filter. */
+    searchable: boolean;
+    protected _open: boolean;
+    protected _activeIndex: number;
+    protected _selected: Set<string | number>;
+    protected _query: string;
+    protected _control: HTMLElement | null;
+    protected _overlay: XmOverlay | null;
+    protected _search: HTMLElement | null;
+    private _typeahead;
+    private _typeaheadTimer;
+    connectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /** The selected primitives, in option order. The typed multi-value accessor
+        (the inherited string `value` stays a comma-joined mirror for plain consumers). */
+    get selectedValues(): (string | number)[];
+    private _seedFromValue;
+    private get _q();
+    private _matches;
+    private get _atCap();
+    private _optDisabled;
+    /** Original indices of options that are visible (match the query) AND togglable. */
+    private get _navigable();
+    private get _visibleCount();
+    private _nextNavigable;
+    private _toggleValue;
+    private _toggleIndex;
+    private _syncForm;
+    private _emitChange;
+    private _onDocPointerDown;
+    private _openList;
+    private _closeList;
+    private _onOverlayClose;
+    private _onControlKeydown;
+    private _onListKeydown;
+    private _onSearchKeydown;
+    private _onSearchInput;
+    private _typeAhead;
+    protected renderControl(): TemplateResult;
+    private _renderOption;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-multi-select": XmMultiSelect;
+    }
+}