@xmesh/system-design 0.0.4 → 0.0.5

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

@@ -0,0 +1,306 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/chat/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 {
+/* ============================================================
+   <ChatShell /> — full-viewport interactive chat layout.
+
+   Three-region grid (sidebar | top / center) that grows a fourth
+   region (artifact) when the artifact viewer opens. Owns the
+   layout, scroll regions, and composer overlay only — every
+   visual element (Bubble, Composer, BrandMark, SidebarItem,
+   Artifact) lives in its own components/<name>/index.css.
+
+   Two BEM blocks live here:
+     .chat-shell       — the grid + top-bar + thread + composer overlay
+     .chat-sidebar     — the left column (conversations list, search)
+                         promoted to its own block so descendant names
+                         stay readable.
+     .chat-empty       — alternate empty-state body used in place of
+                         .chat-shell__thread + chat-shell__composer.
+
+   Pairs with components/chat/index.jsx.
+   ============================================================ */
+
+/* ============================================================
+   Chat shell — three-region grid (sidebar | top / center).
+   Full-viewport: fills the window edge-to-edge.
+   ============================================================ */
+.chat-shell {
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--sidebar-w, 272px) 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    "sidebar top"
+    "sidebar center";
+  height: 100%;
+  width: 100%;
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  overflow: hidden;
+  transition: grid-template-columns var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate);
+}
+/* Opt-in: pin the shell to the viewport. Used by full-bleed previews
+   (chat.html, chat-empty.html). Embedded hosts omit this and size the
+   shell via their own container. */
+.chat-shell--full-viewport { height: 100vh; }
+.chat-shell--collapsed { --sidebar-w: 56px; }
+
+/* ---------- Lit shadow-boundary fixes ----------
+   In the React port these selectors had a single direct-child selector
+   in the parent's CSS (\`.chat-shell__composer > .composer-shell\`). In
+   the Lit port, <xm-composer> wraps .composer-shell with display:contents,
+   so the selector still walks the real DOM and .composer-shell is now a
+   *grand*child. The descendant variants below restore the intended sizing
+   and re-enable pointer-events on the composer (the overlay sets
+   pointer-events:none so it doesn't swallow clicks above the composer —
+   without re-enabling on .composer-shell, the textarea is unclickable).
+   Same shape for the artifact slot. */
+.chat-shell__composer .composer-shell {
+  width: 100%;
+  max-width: 720px;
+  pointer-events: auto;
+}
+.chat-shell__artifact-slot .artifact { flex: 1; min-height: 0; }
+
+/* When the artifact viewer is open, a third column appears on the
+   right and spans both rows — pushing top + center to the left.
+   Sidebar stays put. */
+.chat-shell--has-artifact {
+  grid-template-columns: var(--sidebar-w, 272px) 3fr 2fr;
+  grid-template-areas:
+    "sidebar top    artifact"
+    "sidebar center artifact";
+}
+
+.chat-shell__top { grid-area: top; }
+
+.chat-shell__center {
+  grid-area: center;
+  position: relative;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.chat-shell__artifact-slot {
+  grid-area: artifact;
+  min-height: 0;
+  display: flex;
+}
+.chat-shell__artifact-slot > .artifact { flex: 1; min-height: 0; }
+
+/* ---------- Sidebar block ----------
+   Transparent — inherits the chat-shell surface. Only the
+   right-edge hairline marks the seam to the thread. */
+.chat-sidebar {
+  grid-area: sidebar;
+  background: transparent;
+  border-right: 1px solid var(--md-sys-color-outline);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.chat-sidebar__top {
+  margin: var(--s-3) var(--s-3) var(--s-2);
+}
+/* Pin the right-slot icon to the brand-mark chip's 24px height so both
+   children present the same box for the button's \`align-items: center\`,
+   keeping the X chip and panel-toggle icon on a single centerline. */
+.chat-sidebar__top [slot="icon-right"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+}
+.chat-shell--collapsed .chat-sidebar__top {
+  margin: var(--s-3) auto var(--s-2);
+}
+
+/* New chat — xm-button host. Margin matches the sidebar column gutter. */
+.chat-sidebar__new {
+  margin: var(--s-1) var(--s-3) var(--s-2);
+}
+.chat-shell--collapsed .chat-sidebar__new {
+  align-self: center;
+}
+
+/* Search */
+.chat-sidebar__search { padding: 0 var(--s-3) var(--s-2); }
+.chat-shell--collapsed .chat-sidebar__search--full { display: none; }
+.chat-sidebar__search--icon-only {
+  display: none;
+  margin: 0 auto var(--s-2);
+}
+.chat-shell--collapsed .chat-sidebar__search--icon-only { display: inline-flex; }
+
+/* Section labels + chat list */
+.chat-sidebar__list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--s-1) var(--s-2) var(--s-3-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-0-5);
+}
+.chat-shell--collapsed .chat-sidebar__list { padding: var(--s-2) 0 var(--s-3-5); align-items: center; gap: var(--s-4); }
+.chat-shell--collapsed .sidebar-item--eyebrow { display: none; }
+
+.chat-sidebar__divider {
+  width: 28px;
+  height: 1px;
+  background: var(--md-sys-color-outline);
+  margin: var(--s-2) auto;
+  display: none;
+}
+.chat-shell--collapsed .chat-sidebar__divider { display: block; }
+
+/* ---------- Top panel ---------- */
+.chat-shell__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-4);
+  padding: var(--s-3) var(--s-5);
+  min-height: 56px;
+  box-sizing: border-box;
+  background: var(--md-sys-color-surface);
+  z-index: 2;
+}
+.chat-shell__top-left { display: flex; flex-direction: column; gap: var(--s-0-5); min-width: 0; }
+.chat-shell__top-title {
+  font: 600 14.5px/1.2 var(--md-sys-typescale-body-large-font);
+  color: var(--md-sys-color-on-surface);
+  letter-spacing: -0.005em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chat-shell__top-sub {
+  font: 400 11px/1 var(--xm-typescale-mono-font);
+  color: var(--xm-color-on-surface-soft);
+  font-feature-settings: "tnum";
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1-5);
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+.chat-shell__top-sub > span { white-space: nowrap; }
+.chat-shell__top-right { display: inline-flex; align-items: center; gap: var(--s-1-5); }
+
+/* ---------- Center panel — scrollable thread ---------- */
+.chat-shell__thread {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+  scrollbar-gutter: stable both-edges;
+  padding: var(--s-6) var(--s-5) 132px;  /* bottom padding clears the composer */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.chat-shell__thread-inner {
+  width: 100%;
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+  /* Base gap is the tight, same-speaker rhythm; a speaker change adds
+     extra margin below so turns read as grouped utterances, not a flat
+     evenly-spaced list. */
+  gap: var(--s-2-5);
+}
+
+/* Bubble row alignment is page layout — the Bubble component owns
+   the visuals of each turn. */
+.chat-shell__row { display: flex; }
+.chat-shell__row--user { justify-content: flex-end; }
+.chat-shell__row--bot  { justify-content: flex-start; }
+
+/* Speaker-change rhythm: when the author flips, open up the gap. */
+.chat-shell__row--user + .chat-shell__row--bot,
+.chat-shell__row--bot + .chat-shell__row--user {
+  margin-top: var(--s-3);
+}
+
+/* ---------- Empty state — centered serif greeting + composer ----------
+   Used by the chat-empty variant (passed in via the \`empty\` prop).
+   The shell renders a .chat-empty block in place of .chat-shell__thread +
+   .chat-shell__composer; the caller owns its own composer and any
+   suggestion chips. */
+.chat-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-6);
+  padding: var(--s-6) var(--s-5) var(--s-10);
+}
+.chat-empty__hero {
+  width: 100%;
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--s-1-5);
+  text-align: center;
+}
+.chat-empty__title {
+  font:
+    var(--md-sys-typescale-headline-medium-weight)
+    var(--md-sys-typescale-headline-medium-size) /
+    var(--md-sys-typescale-headline-medium-line-height)
+    var(--md-sys-typescale-headline-medium-font);
+  color: var(--md-sys-color-on-surface);
+  letter-spacing: -0.01em;
+  margin: 0;
+}
+.chat-empty__sub {
+  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);
+  color: var(--xm-color-on-surface-soft);
+  margin: 0;
+}
+.chat-empty__composer {
+  width: 100%;
+  max-width: 720px;
+}
+
+/* ---------- Bottom panel — composer overlay ----------
+   Transparent — the thread already pads its bottom by 132px so
+   bubbles never sit underneath the composer card. */
+.chat-shell__composer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  padding: var(--s-2) var(--s-5) 0;
+  pointer-events: none;
+  z-index: 2;
+}
+.chat-shell__composer > .composer-shell {
+  pointer-events: auto;
+  width: 100%;
+  max-width: 720px;
+  padding-bottom: var(--s-5);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -1,6 +1,7 @@
 import type { TemplateResult } from "lit";
 import { XmField } from "../field/index.js";
 export declare class XmCheckbox extends XmField {
+    static styles: CSSStyleSheet[];
     /** Indeterminate (mixed) state — shows the dash mark on the coral fill and
         reports aria-checked="mixed". Cleared on the first user toggle. */
     indeterminate: boolean;

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

@@ -35,8 +35,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { XmField } from "../field/index.js";
-const CHECKBOX_CSS = new URL("../checkbox/index.css", import.meta.url).href;
-const PRIMITIVES_CSS = new URL("../primitives/index.css", import.meta.url).href;
+import primitivesSheets from "../primitives/index.styles.js";
+import fieldSheets from "../field/index.styles.js";
+import checkboxSheets from "./index.styles.js";
 let XmCheckbox = class XmCheckbox extends XmField {
     constructor() {
         super(...arguments);
@@ -57,6 +58,10 @@ let XmCheckbox = class XmCheckbox extends XmField {
             }
         };
     }
+    // Adopted from build-generated sheets (gen-styles.mjs) — no runtime URL
+    // fetch (ADR 0012). Lit static styles don't merge on override, so subclasses
+    // re-include the chrome (primitives + field) sheets.
+    static { this.styles = [...primitivesSheets, ...fieldSheets, ...checkboxSheets]; }
     /** A checkbox submits checked-state ("on"/null), not text — declare it a
         toggle so the form value is correct from first paint, before any user
         interaction (the base seeds `_checked` from the `checked` attribute and
@@ -78,8 +83,6 @@ let XmCheckbox = class XmCheckbox extends XmField {
         const helperText = this.isError ? this.error : this.helper;
         const ctrl = this.controlAria;
         return html `
-      <link rel="stylesheet" href="${PRIMITIVES_CSS}" />
-      <link rel="stylesheet" href="${CHECKBOX_CSS}" />
       <style>
         :host {
           display: inline-block;

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

@@ -0,0 +1,140 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/checkbox/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-checkbox — toggle field built on XmField.
+
+   A compact, inline toggle: the box sits BESIDE the label (toggle layout),
+   not above it like the bordered text-field chrome. State machinery
+   (disabled / focus / form-association / change event) is inherited from
+   XmField; this file only styles the box, the mark, and the label row.
+
+   Surface & ink: the checkbox rides the card tier shared by every XmField
+   sibling — ink is --md-sys-color-inverse-on-surface, the box hairline is
+   --md-sys-color-outline-variant. Selected (checked OR indeterminate) fills
+   the box with the single coral accent (--md-sys-color-primary) and paints
+   the mark in --md-sys-color-on-primary. Coral signals selection only —
+   never severity (AD-11 / rule 3a). The error string in the message row
+   carries severity via copy, not color.
+
+   BEM block: \`checkbox\`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
+   ============================================ */
+
+.checkbox {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--s-1);
+}
+
+/* ---------- Control row — box + label, the focusable target ---------- */
+.checkbox__control {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--md-sys-shape-corner-extra-small);
+  outline: none;
+}
+
+/* ---------- Box — the 18px square that holds the mark ---------- */
+.checkbox__box {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-extra-small);
+  background: transparent;
+  color: var(--md-sys-color-on-primary);
+  transition:
+    background 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);
+}
+
+.checkbox__control:hover .checkbox__box {
+  border-color: var(--md-sys-color-outline);
+}
+
+/* Focus ring — the canonical 3px coral halo, never a hard-coded width. */
+.checkbox__control:focus-visible .checkbox__box {
+  border-color: var(--md-sys-color-primary);
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+/* ---------- Mark — primitives check / indeterminate icon ---------- */
+.checkbox__mark {
+  display: inline-flex;
+  color: var(--md-sys-color-on-primary);
+}
+
+/* ---------- Label ---------- */
+.checkbox__label {
+  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);
+  letter-spacing: 0;
+}
+
+/* ---------- Selected — checked OR indeterminate ---------- */
+.checkbox--selected .checkbox__box {
+  background: var(--md-sys-color-primary);
+  border-color: var(--md-sys-color-primary);
+}
+.checkbox--selected .checkbox__control:hover .checkbox__box {
+  border-color: var(--md-sys-color-primary);
+}
+
+/* ---------- Disabled — shared reduced emphasis; hover reverted ---------- */
+.checkbox--disabled .checkbox__control {
+  cursor: not-allowed;
+}
+.checkbox--disabled .checkbox__box {
+  opacity: 0.45;
+  box-shadow: none;
+}
+.checkbox--disabled .checkbox__label {
+  color: var(--xm-color-inverse-on-surface-disabled);
+}
+.checkbox--disabled .checkbox__control:hover .checkbox__box {
+  border-color: var(--md-sys-color-outline-variant);
+}
+.checkbox--disabled.checkbox--selected .checkbox__control:hover .checkbox__box {
+  border-color: var(--md-sys-color-primary);
+}
+
+/* ---------- Helper / error message row ----------
+   Severity is copy, not color — the error keeps the helper ink (rule 3a). */
+.checkbox__message {
+  padding-left: calc(var(--s-4-5) + var(--s-2));
+  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);
+}
+.checkbox__message--helper {
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+.checkbox__message--error {
+  color: var(--md-sys-color-inverse-on-surface);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

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

@@ -2,7 +2,12 @@ import { LitElement } from "lit";
 import type { TemplateResult } from "lit";
 type ChipSize = "xs" | "sm" | "md" | "lg";
 type ChipCategory = "get" | "post" | "put" | "delete" | "patch" | "yml" | "json" | "";
+/**
+ * @fires xm-chip-activate - Fired when the chip is activated.
+ * @fires xm-chip-remove - Fired when the chip's remove affordance is activated.
+ */
 export declare class XmChip extends LitElement {
+    static styles: CSSStyleSheet[];
     value: string;
     size: ChipSize;
     selected: boolean;

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

@@ -42,7 +42,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-const CHIP_CSS = new URL("../chip/index.css", import.meta.url).href;
+import chipSheets from "./index.styles.js";
+/**
+ * @fires xm-chip-activate - Fired when the chip is activated.
+ * @fires xm-chip-remove - Fired when the chip's remove affordance is activated.
+ */
 let XmChip = class XmChip extends LitElement {
     constructor() {
         super(...arguments);
@@ -91,6 +95,9 @@ let XmChip = class XmChip 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 = [...chipSheets]; }
     get _labelText() {
         return (this.textContent ?? "").trim();
     }
@@ -159,7 +166,6 @@ let XmChip = class XmChip extends LitElement {
             .filter(Boolean)
             .join(" ");
         return html `
-      <link rel="stylesheet" href="${CHIP_CSS}" />
       <style>
         :host {
           display: inline-flex;

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

@@ -0,0 +1,159 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/chip/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 {
+/* ============================================
+   Chip — compact label pill (tag / filter / category).
+
+   <xm-chip> is a transparent pill that sits on a surface* host, so
+   default ink is --md-sys-color-on-surface (AD-13). Selected flips
+   to the coral primary-container fill + on-primary-container ink —
+   the selected-pill pattern (UX-DR3), never a status hue (AD-11).
+   Removable chips carry a trailing x. A category chip may take a
+   saturated background ONLY via the --xm-method-* / --xm-ext-* sets
+   (category, never severity); --md-sys-color-error* is forbidden.
+
+   Sizes share the canonical xs|sm|md|lg axis (AD-9).
+   ============================================ */
+
+.chip {
+  --chip-height: 28px;
+  --chip-pad-x: var(--s-3);
+  --chip-font: var(--md-sys-typescale-label-medium-size);
+  --chip-gap: var(--s-1);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--chip-gap);
+  box-sizing: border-box;
+  height: var(--chip-height);
+  padding: 0 var(--chip-pad-x);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-full);
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+  font-family: var(--md-sys-typescale-label-medium-font);
+  font-size: var(--chip-font);
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0;
+  white-space: nowrap;
+  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);
+}
+/* The host element owns focus (role=button + tabindex on <xm-chip>) so the
+   3px ring is applied via :host(:focus-visible) .chip in the component's
+   inline <style>. The forced-state helper still previews it. */
+.chip.is-focus {
+  box-shadow: var(--xm-state-focus-ring);
+}
+.chip:hover,
+.chip.is-hover {
+  background: color-mix(in oklab, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
+  border-color: var(--md-sys-color-outline);
+}
+
+/* ---------- Selected — coral selected-pill ---------- */
+.chip--selected {
+  border-color: color-mix(in oklab, var(--md-sys-color-primary) 60%, transparent);
+  background: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
+}
+.chip--selected:hover,
+.chip--selected.is-hover {
+  background: var(--md-sys-color-primary-container);
+  border-color: var(--md-sys-color-primary);
+}
+
+/* ---------- Category — saturated ONLY for category (AD-11) ---------- */
+.chip--category-get    { background: var(--xm-method-get-bg);    color: var(--xm-method-get-ink);    border-color: transparent; }
+.chip--category-post   { background: var(--xm-method-post-bg);   color: var(--xm-method-post-ink);   border-color: transparent; }
+.chip--category-put    { background: var(--xm-method-put-bg);    color: var(--xm-method-put-ink);    border-color: transparent; }
+.chip--category-delete { background: var(--xm-method-delete-bg); color: var(--xm-method-delete-ink); border-color: transparent; }
+.chip--category-patch  { background: var(--xm-method-patch-bg);  color: var(--xm-method-patch-ink);  border-color: transparent; }
+.chip--category-yml    { background: var(--xm-ext-yml-bg);       color: var(--xm-ext-yml-ink);       border-color: transparent; }
+.chip--category-json   { background: var(--xm-ext-json-bg);      color: var(--xm-ext-json-ink);      border-color: transparent; }
+/* Category chips don't change hue on hover — the hue IS the meaning. */
+.chip--category-get:hover, .chip--category-get.is-hover,
+.chip--category-post:hover, .chip--category-post.is-hover,
+.chip--category-put:hover, .chip--category-put.is-hover,
+.chip--category-delete:hover, .chip--category-delete.is-hover,
+.chip--category-patch:hover, .chip--category-patch.is-hover,
+.chip--category-yml:hover, .chip--category-yml.is-hover,
+.chip--category-json:hover, .chip--category-json.is-hover {
+  filter: none;
+  border-color: transparent;
+}
+
+/* ---------- Disabled — shared reduced-emphasis ---------- */
+.chip--disabled {
+  cursor: not-allowed;
+  color: var(--xm-color-on-surface-disabled);
+  border-color: var(--md-sys-color-outline-variant);
+}
+.chip--disabled:hover,
+.chip--disabled.is-hover {
+  background: transparent;
+  border-color: var(--md-sys-color-outline-variant);
+}
+.chip--selected.chip--disabled:hover {
+  background: var(--md-sys-color-primary-container);
+}
+
+/* ---------- Sizes ---------- */
+.chip--xs { --chip-height: 22px; --chip-pad-x: var(--s-2); --chip-font: var(--md-sys-typescale-label-small-size);  --chip-gap: 3px; }
+.chip--sm { --chip-height: 24px; --chip-pad-x: var(--s-2); --chip-font: var(--md-sys-typescale-label-small-size); }
+.chip--md { --chip-height: 28px; --chip-pad-x: var(--s-3); --chip-font: var(--md-sys-typescale-label-medium-size); }
+.chip--lg { --chip-height: 34px; --chip-pad-x: var(--s-4); --chip-font: var(--md-sys-typescale-label-large-size); }
+
+/* ---------- Inner elements ---------- */
+.chip__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.chip__icon.is-empty { display: none; }
+
+.chip__label {
+  display: inline-block;
+}
+
+.chip__remove {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-left: var(--s-0-5);
+  margin-right: -2px;
+  padding: 0;
+  border: none;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: transparent;
+  color: currentColor;
+  cursor: pointer;
+  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.chip__remove:hover {
+  background: color-mix(in oklab, currentColor 18%, transparent);
+}
+.chip__remove:focus-visible {
+  outline: none;
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;