@xmesh/system-design 0.0.4 → 0.0.6

package/dist/lit/components/navigation-drawer/index.js

@@ -53,9 +53,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
+import navigationDrawerSheets from "./index.styles.js";
 // Resolve CSS relative to the *built* file:
 // lit/build/components/navigation-drawer/index.js → ../...
-const NAV_DRAWER_CSS = new URL("../navigation-drawer/index.css", import.meta.url).href;
+/**
+ * @fires close - Fired when the element requests to close.
+ */
 let XmNavigationDrawer = class XmNavigationDrawer extends LitElement {
     constructor() {
         super(...arguments);
@@ -89,6 +92,9 @@ let XmNavigationDrawer = class XmNavigationDrawer extends LitElement {
             }
         };
     }
+    // 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 = [...navigationDrawerSheets]; }
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
         delegatesFocus: true,
@@ -108,7 +114,6 @@ let XmNavigationDrawer = class XmNavigationDrawer extends LitElement {
       </nav>
     `;
         return html `
-      <link rel="stylesheet" href="${NAV_DRAWER_CSS}" />
       <style>
         :host {
           display: contents;

package/dist/lit/components/navigation-drawer/index.styles.js

@@ -0,0 +1,128 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/navigation-drawer/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-navigation-drawer> — side navigation panel.
+
+   Surface / ink (AD-13): the INVERSE-SURFACE family (the card stack) —
+   panel background var(--md-sys-color-inverse-surface), ink
+   var(--md-sys-color-inverse-on-surface), directional drawer shadow
+   var(--xm-elevation-drawer). Hairline 1px borders only.
+
+   Hosts light-DOM xm-sidebar-item children. Those items reference the desk
+   surface roles (--md-sys-color-on-surface / -variant / -container-lowest); to
+   keep AD-12 (no reaching into their shadow root) while making them read on
+   the inverse-surface panel, the panel REMAPS those role custom properties to
+   their inverse equivalents at the panel scope. Custom properties inherit, so
+   the items pick up the right ink/hover automatically.
+
+   Modal mode is a native <dialog> in EDGE layout (showModal gives focus-trap +
+   inert for free; ::backdrop is the scrim). Persistent mode is a static panel;
+   collapsed mode is an icon rail. Slide-in is short4 emphasized-decelerate.
+
+   BEM block \`nav-drawer\`; elements \`__dialog\` \`__panel\`; modifiers \`--open\`
+   \`--collapsed\` \`--modal\` \`--persistent\`.
+   ============================================ */
+
+.nav-drawer__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-1);
+  box-sizing: border-box;
+  width: 280px;
+  height: 100%;
+  padding: var(--s-3);
+  background: var(--md-sys-color-inverse-surface);
+  color: var(--md-sys-color-inverse-on-surface);
+  border-inline-end: 1px solid var(--md-sys-color-outline-variant);
+  box-shadow: var(--xm-elevation-drawer);
+  overflow-y: auto;
+
+  /* Remap the desk surface roles to the card-stack equivalents so slotted
+     xm-sidebar-item children (which use these roles) read on inverse-surface.
+     This is token-level composition, not reaching into the item's shadow. */
+  --md-sys-color-on-surface: var(--md-sys-color-inverse-on-surface);
+  --md-sys-color-on-surface-variant: var(--xm-color-inverse-on-surface-muted);
+  --md-sys-color-surface-container-lowest: color-mix(
+    in oklab,
+    var(--md-sys-color-inverse-on-surface) 8%,
+    var(--md-sys-color-inverse-surface)
+  );
+}
+
+/* ---------- Modal: native <dialog> in edge layout ---------- */
+.nav-drawer__dialog {
+  margin: 0;
+  inset-block: 0;
+  inset-inline-start: 0;
+  height: 100dvh;
+  max-height: 100dvh;
+  max-width: 92vw;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  overflow: hidden;
+}
+.nav-drawer__dialog::backdrop {
+  background: var(--md-sys-color-scrim);
+  opacity: 0.5;
+}
+.nav-drawer__dialog .nav-drawer__panel {
+  border-radius: 0;
+  /* Slide-in: panel translates from the leading edge on open. */
+  transform: translateX(-100%);
+  transition: transform var(--md-sys-motion-duration-short4)
+    var(--md-sys-motion-easing-emphasized-decelerate);
+}
+.nav-drawer__dialog[open] .nav-drawer__panel {
+  transform: translateX(0);
+}
+
+/* ---------- Persistent panel ---------- */
+.nav-drawer--persistent .nav-drawer__panel {
+  border-radius: var(--md-sys-shape-corner-medium);
+  height: auto;
+  /* Slide + collapse on open/close. Width animates to 0 so the closed drawer
+     yields its layout space (not just translated off-screen). */
+  transition:
+    width var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate),
+    transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate),
+    opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+
+/* Closed persistent drawer: collapse to zero width, slide out, and hide so its
+   slotted (focusable) children leave the tab order — \`aria-hidden\` alone would
+   leave focusable descendants inside a hidden region (an a11y anti-pattern). */
+.nav-drawer--persistent:not(.nav-drawer--open) .nav-drawer__panel {
+  width: 0;
+  padding-inline: 0;
+  transform: translateX(-100%);
+  opacity: 0;
+  overflow: hidden;
+  visibility: hidden;
+  border-inline-end-color: transparent;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nav-drawer--persistent .nav-drawer__panel {
+    transition: none;
+  }
+}
+
+/* ---------- Collapsed icon rail ---------- */
+.nav-drawer--collapsed .nav-drawer__panel {
+  width: 64px;
+  align-items: center;
+  padding-inline: var(--s-2);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -13,7 +13,12 @@ export interface OverlayOpenDetail {
     tier: OverlayTier;
     mode: OverlayMode;
 }
+/**
+ * @fires xm-overlay-close - Fired when the overlay closes.
+ * @fires xm-overlay-open - Fired when the overlay opens.
+ */
 export declare class XmOverlay extends LitElement {
+    static styles: CSSStyleSheet[];
     static shadowRootOptions: ShadowRootInit;
     open: boolean;
     mode: OverlayMode;

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

@@ -120,14 +120,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
+import overlaySheets from "./index.styles.js";
 // Resolve CSS relative to the *built* file:
 // lit/build/components/overlay/index.js → ../overlay/index.css.
-const OVERLAY_CSS = new URL("../overlay/index.css", import.meta.url).href;
 let overlaySeq = 0;
 // Live stack of every open overlay, in open order (last = innermost). Used to
 // route Esc to the innermost layer and to cascade-close descendant popovers
 // when an ancestor (modal) closes.
 const OPEN_STACK = [];
+/**
+ * @fires xm-overlay-close - Fired when the overlay closes.
+ * @fires xm-overlay-open - Fired when the overlay opens.
+ */
 let XmOverlay = class XmOverlay extends LitElement {
     constructor() {
         super(...arguments);
@@ -198,6 +202,9 @@ let XmOverlay = class XmOverlay extends LitElement {
                 this._pinToAnchor();
         };
     }
+    // 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 = [...overlaySheets]; }
     // The trigger that opened us lives in another shadow root; delegatesFocus
     // keeps the overlay itself out of the tab order while letting content focus.
     static { this.shadowRootOptions = {
@@ -217,7 +224,6 @@ let XmOverlay = class XmOverlay extends LitElement {
       </div>
     `;
         return html `
-      <link rel="stylesheet" href="${OVERLAY_CSS}" />
       <style>
         :host {
           display: contents;

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

@@ -0,0 +1,185 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/overlay/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-overlay> — platform-native overlay foundation.
+
+   The single surface that xm-dialog / xm-menu / xm-tooltip / xm-select /
+   xm-autocomplete compose. Modal mode is a native <dialog> (its ::backdrop
+   is the scrim); non-modal mode is a Popover-API element in the top layer,
+   anchored with CSS anchor() / @position-try.
+
+   Surface is the card tier — inverse-surface fill + inverse-on-surface ink
+   (AD-13). Elevation level3 for popovers/menus, level4–5 for modals
+   (DESIGN.md). Scrim is var(--md-sys-color-scrim) with alpha at this use
+   site. No blur / backdrop-filter; no gradient.
+
+   BEM block: \`overlay\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   Modifiers: --modal / --non-modal · --tier-tooltip / --tier-menu /
+   --tier-dialog. Elements: __dialog (native <dialog>), __popover (popover
+   element), __surface (the card chrome), __body (content region).
+   ============================================ */
+
+/* ---------- Native <dialog> (modal) ---------- */
+/* The <dialog> element is the positioning + top-layer host; its visible card
+   is .overlay__surface inside it. The dialog box itself is transparent so the
+   surface owns the chrome. */
+.overlay__dialog {
+  margin: auto;
+  padding: 0;
+  max-width: min(92vw, 560px);
+  max-height: 86vh;
+  border: none;
+  background: transparent;
+  color: var(--md-sys-color-inverse-on-surface);
+  overflow: visible;
+}
+
+/* The scrim — flat token-alpha fill (DESIGN.md: scrim is pure black, alpha
+   applied at the callsite). No blur. */
+.overlay__dialog::backdrop {
+  background: color-mix(in oklab, var(--md-sys-color-scrim) 48%, transparent);
+  animation: overlay-fade var(--md-sys-motion-duration-short4)
+    var(--md-sys-motion-easing-standard);
+}
+
+/* ---------- Popover (non-modal, anchored) ---------- */
+.overlay__popover {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--md-sys-color-inverse-on-surface);
+  overflow: visible;
+  /* Top-layer popover, positioned against the viewport. anchor() resolves
+     against the per-instance position-anchor set inline. @position-try flips
+     the popover when it would overflow the viewport. */
+  position: fixed;
+  position-try-fallbacks: flip-block, flip-inline;
+}
+
+/* Native anchor() path — used when the anchor element lives in the SAME tree
+   scope as the popover (anchor-name is tree-scoped). data-placement is set by
+   the element at open time; inset: auto resets so only the chosen edges bind. */
+.overlay__popover[data-placement^="bottom"] {
+  inset: auto;
+  top: anchor(bottom);
+  left: anchor(left);
+  margin-block-start: var(--s-1);
+}
+.overlay__popover[data-placement^="top"] {
+  inset: auto;
+  bottom: anchor(top);
+  left: anchor(left);
+  margin-block-end: var(--s-1);
+}
+.overlay__popover[data-placement^="right"] {
+  inset: auto;
+  left: anchor(right);
+  top: anchor(top);
+  margin-inline-start: var(--s-1);
+}
+.overlay__popover[data-placement^="left"] {
+  inset: auto;
+  right: anchor(left);
+  top: anchor(top);
+  margin-inline-end: var(--s-1);
+}
+
+/* Cross-root fallback path — when the consumer's trigger is in ANOTHER shadow
+   root, CSS anchor-name is NOT visible to this popover (tree-scoped). The
+   element computes a fixed top/left from the trigger's bounding rect (no
+   dependency) and pins them via these custom properties; anchor() is skipped.
+   This is the built-in, dependency-free fallback — Floating UI (the heavier
+   escape hatch) is only for deep/virtual cases, never the common cross-root
+   one. */
+.overlay__popover.overlay__popover--pinned {
+  inset: auto;
+  top: var(--xm-overlay-pin-top, 0);
+  left: var(--xm-overlay-pin-left, 0);
+  position-try-fallbacks: none;
+}
+
+/* ---------- The card surface (shared) ---------- */
+.overlay__surface {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  box-sizing: border-box;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-large);
+  background: var(--md-sys-color-inverse-surface);
+  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);
+}
+
+/* Elevation per tier: dialogs lift highest (level5), menus/select-listbox
+   sit at popover height (level3), tooltips are the quietest layer (level3
+   too — they never cover a menu, but read as a raised chip). */
+.overlay--modal .overlay__surface {
+  box-shadow: var(--md-sys-elevation-level5);
+  min-width: min(86vw, 320px);
+}
+.overlay--non-modal.overlay--tier-menu .overlay__surface {
+  box-shadow: var(--md-sys-elevation-level3);
+  min-width: 180px;
+}
+.overlay--non-modal.overlay--tier-dialog .overlay__surface {
+  box-shadow: var(--md-sys-elevation-level3);
+}
+.overlay--tier-tooltip .overlay__surface {
+  box-shadow: var(--md-sys-elevation-level3);
+  border-radius: var(--md-sys-shape-corner-small);
+  max-width: 260px;
+}
+
+/* ---------- Content region ---------- */
+.overlay__body {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--s-5);
+}
+.overlay--tier-tooltip .overlay__body,
+.overlay--tier-menu .overlay__body {
+  padding: var(--s-2);
+}
+
+/* ---------- Open transition (short4, standard) ---------- */
+@keyframes overlay-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.overlay__dialog[open],
+.overlay__popover:popover-open {
+  animation: overlay-fade var(--md-sys-motion-duration-short4)
+    var(--md-sys-motion-easing-standard);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .overlay__dialog[open],
+  .overlay__popover:popover-open,
+  .overlay__dialog::backdrop {
+    animation: none;
+  }
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -4,11 +4,28 @@ type PaginationSize = "xs" | "sm" | "md" | "lg";
 export interface PaginationPageChangeDetail {
     page: number;
 }
+export interface PaginationOffsetChangeDetail {
+    offset: number;
+    limit: number;
+}
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ * @fires xm-pagination-page-change - Fired when the page changes (`detail.page`).
+ * @fires xm-pagination-offset-change - Fired in offset/limit mode (`detail.offset`, `detail.limit`).
+ */
 export declare class XmPagination extends LitElement {
+    static styles: CSSStyleSheet[];
     page: number;
     total: number;
     siblings: number;
     size: PaginationSize;
+    /** Offset/limit mode (AD-18): set `limit` + `total-items` (+ `offset`) instead
+        of `page` + `total`. The page-based API stays available and unchanged; in
+        this mode the control ALSO emits xm-pagination-offset-change. */
+    offset: number;
+    limit: number;
+    totalItems: number;
+    private _isOffsetMode;
     render(): TemplateResult;
     private _clamp;
     private _goto;

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

@@ -35,10 +35,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import primitivesSheets from "../primitives/index.styles.js";
+import paginationSheets from "./index.styles.js";
 // Resolve CSS relative to the *built* file:
 // lit/build/components/pagination/index.js → ../...
-const PAGINATION_CSS = new URL("../pagination/index.css", import.meta.url).href;
-const PRIMITIVES_CSS = new URL("../primitives/index.css", import.meta.url).href;
+/**
+ * @fires change - Fired on commit with the new value in `detail`.
+ * @fires xm-pagination-page-change - Fired when the page changes (`detail.page`).
+ * @fires xm-pagination-offset-change - Fired in offset/limit mode (`detail.offset`, `detail.limit`).
+ */
 let XmPagination = class XmPagination extends LitElement {
     constructor() {
         super(...arguments);
@@ -46,10 +51,27 @@ let XmPagination = class XmPagination extends LitElement {
         this.total = 1;
         this.siblings = 1;
         this.size = "md";
+        /** Offset/limit mode (AD-18): set `limit` + `total-items` (+ `offset`) instead
+            of `page` + `total`. The page-based API stays available and unchanged; in
+            this mode the control ALSO emits xm-pagination-offset-change. */
+        this.offset = 0;
+        this.limit = 0;
+        this.totalItems = 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 = [...primitivesSheets, ...paginationSheets]; }
+    _isOffsetMode() {
+        return this.limit > 0 && this.totalItems > 0;
     }
     render() {
-        const total = Math.max(1, Math.floor(this.total));
-        const page = this._clamp(this.page, total);
+        const offsetMode = this._isOffsetMode();
+        const total = offsetMode
+            ? Math.max(1, Math.ceil(this.totalItems / this.limit))
+            : Math.max(1, Math.floor(this.total));
+        const page = offsetMode
+            ? this._clamp(Math.floor(this.offset / this.limit) + 1, total)
+            : this._clamp(this.page, total);
         const size = ["xs", "sm", "md", "lg"].includes(this.size)
             ? this.size
             : "md";
@@ -57,8 +79,6 @@ let XmPagination = class XmPagination extends LitElement {
         const atFirst = page <= 1;
         const atLast = page >= total;
         return html `
-      <link rel="stylesheet" href="${PRIMITIVES_CSS}" />
-      <link rel="stylesheet" href="${PAGINATION_CSS}" />
       <style>
         :host {
           display: inline-block;
@@ -116,9 +136,16 @@ let XmPagination = class XmPagination extends LitElement {
     }
     _goto(target, total) {
         const next = this._clamp(target, total);
-        if (next === this.page)
+        const offsetMode = this._isOffsetMode();
+        const currentPage = offsetMode
+            ? Math.floor(this.offset / this.limit) + 1
+            : this.page;
+        if (next === currentPage)
             return;
-        this.page = next;
+        // Client/page mode is uncontrolled-first (updates locally); offset mode is
+        // controlled by the consumer's `offset` prop, so don't mutate locally.
+        if (!offsetMode)
+            this.page = next;
         const detail = { page: next };
         this.dispatchEvent(new CustomEvent("xm-pagination-page-change", {
             detail,
@@ -130,6 +157,15 @@ let XmPagination = class XmPagination extends LitElement {
             bubbles: true,
             composed: true,
         }));
+        // Offset mode ALSO emits the offset event so the consumer needs no converter
+        // (AD-18); the page-based event above is never suppressed.
+        if (offsetMode) {
+            this.dispatchEvent(new CustomEvent("xm-pagination-offset-change", {
+                detail: { offset: (next - 1) * this.limit, limit: this.limit },
+                bubbles: true,
+                composed: true,
+            }));
+        }
     }
     // Compute the visible page window with ellipsis truncation, e.g.
     // 1 … 4 5 6 … 20. Always shows first + last; `siblings` pages flank current.
@@ -179,6 +215,15 @@ __decorate([
 __decorate([
     property({ type: String })
 ], XmPagination.prototype, "size", void 0);
+__decorate([
+    property({ type: Number })
+], XmPagination.prototype, "offset", void 0);
+__decorate([
+    property({ type: Number })
+], XmPagination.prototype, "limit", void 0);
+__decorate([
+    property({ type: Number, attribute: "total-items" })
+], XmPagination.prototype, "totalItems", void 0);
 XmPagination = __decorate([
     customElement("xm-pagination")
 ], XmPagination);

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

@@ -0,0 +1,116 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/pagination/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-pagination> — numbered page controls.
+
+   Surface / ink (AD-13): a transparent control row tracing its host surface.
+   Idle controls take var(--md-sys-color-on-surface-variant) ink; the CURRENT
+   page is a coral chip — var(--md-sys-color-primary) fill + var(--md-sys-color-on-primary)
+   ink (matched to the coral fill). Hairline 1px borders only (2px is reserved
+   for drag-active, not used here). Disabled edges use the shared reduced-
+   emphasis treatment — no error color.
+
+   BEM: block \`pagination\`; elements \`__item\` \`__page\` \`__prev\` \`__next\`
+   \`__ellipsis\`; modifiers \`__page--current\`, size \`--xs|sm|md|lg\`.
+   ============================================ */
+
+.pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1);
+}
+
+/* ---------- Shared control chrome ---------- */
+.pagination__item {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-button);
+  background: transparent;
+  color: var(--md-sys-color-on-surface-variant);
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+  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),
+    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);
+}
+.pagination__item:hover {
+  background: color-mix(
+    in oklab,
+    var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
+    transparent
+  );
+  color: var(--md-sys-color-on-surface);
+  border-color: var(--md-sys-color-outline);
+}
+.pagination__item:focus {
+  outline: none;
+}
+.pagination__item:focus-visible {
+  outline: none;
+  box-shadow: var(--xm-state-focus-ring);
+}
+.pagination__item svg {
+  flex-shrink: 0;
+}
+
+/* ---------- Sizes — one shared control height per size ---------- */
+.pagination--xs .pagination__item { min-width: 22px; height: 22px; padding: 0 var(--s-1); font-size: var(--md-sys-typescale-label-small-size); }
+.pagination--sm .pagination__item { min-width: 26px; height: 26px; padding: 0 var(--s-2); font-size: var(--md-sys-typescale-body-small-size); }
+.pagination--md .pagination__item { min-width: 32px; height: 32px; padding: 0 var(--s-2); font-size: var(--md-sys-typescale-body-medium-size); }
+.pagination--lg .pagination__item { min-width: 42px; height: 42px; padding: 0 var(--s-3); font-size: var(--md-sys-typescale-title-small-size); }
+
+/* ---------- Current page — coral chip ----------
+   The page digit is text on the coral fill, so it uses --xm-color-primary-fill
+   (the darker coral) for WCAG AA, not the lighter --md-sys-color-primary. */
+.pagination__page--current {
+  background: var(--xm-color-primary-fill);
+  border-color: var(--xm-color-primary-fill);
+  color: var(--md-sys-color-on-primary);
+}
+.pagination__page--current:hover {
+  background: var(--xm-color-primary-fill);
+  border-color: var(--xm-color-primary-fill);
+  color: var(--md-sys-color-on-primary);
+}
+
+/* ---------- Ellipsis ---------- */
+.pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  color: var(--md-sys-color-on-surface-variant);
+  user-select: none;
+}
+
+/* ---------- Disabled edges — shared reduced emphasis ---------- */
+.pagination__item[disabled] {
+  cursor: not-allowed;
+  color: var(--xm-color-on-surface-disabled);
+  box-shadow: none;
+}
+.pagination__item[disabled]:hover {
+  background: transparent;
+  color: var(--xm-color-on-surface-disabled);
+  border-color: var(--md-sys-color-outline-variant);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -1,7 +1,12 @@
 import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 import type { OverlayPlacement } from "../overlay/index.js";
+/**
+ * @fires xm-popover-close - Fired when the popover closes.
+ * @fires xm-popover-open - Fired when the popover opens.
+ */
 export declare class XmPopover extends LitElement {
+    static styles: CSSStyleSheet[];
     open: boolean;
     placement: OverlayPlacement;
     label: string;