@pantoken/components 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2098 @@
+import { alpha, darken } from "@pantoken/plugin-colors";
+//#region src/lib/aliases.ts
+/** `@modifier -alias — @deprecated {@link -canonical}` (em-dash or hyphen separator; optional leading dot). */
+const DEPRECATED_ALIAS = /@modifier\s+(-[\w-]+)\s+[—-]\s+@deprecated\s+\{@link\s+\.?(-[\w-]+)\s*\}/gu;
+/**
+* The deprecated-alias pairs in a record, read from its own doc comment (in authored order): every
+* `@modifier` whose note is `@deprecated {@link -canonical}`. Returns `[]` for records with none.
+*/
+function deprecatedAliasPairs(rawRecord) {
+	return [...rawRecord.matchAll(DEPRECATED_ALIAS)].map((m) => ({
+		alias: m[1],
+		canonical: m[2]
+	}));
+}
+/** Long-form spellings for the size scale — emitted as first-class aliases beside the short forms. */
+const SIZE_LONG = {
+	xs: "x-small",
+	sm: "small",
+	md: "medium",
+	lg: "large",
+	xl: "x-large"
+};
+/**
+* For every rule whose selector uses a short size class (`.-size-sm`), append a twin rule with the
+* long spelling (`.-size-small`) so both are first-class (like the `m`/`margin` spacing aliases).
+* Size rules are flat and `@keyframes` never carry a `-size-` selector, so a flat-rule scan is safe.
+*/
+function withSizeAliases(css) {
+	const extra = [];
+	for (const [, selector, , body] of css.matchAll(/([^{}]*\.-size-(xs|sm|md|lg|xl)\b[^{}]*)(\{[^{}]*\})/g)) {
+		const long = selector.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\.-size-(xs|sm|md|lg|xl)\b/g, (_m, s) => `.-size-${SIZE_LONG[s]}`).trim();
+		extra.push(`${long} ${body}`);
+	}
+	return extra.length ? `${css}\n/* size aliases */\n${extra.join("\n")}\n` : css;
+}
+/**
+* Document the long-form size twins {@link withSizeAliases} emits: for every short size class the body
+* uses, add an `@modifier -size-<long>` line to the record's doc comment so the generated twin isn't an
+* undocumented modifier. Reuses the short form's authored description (noting the alias) when present.
+* Idempotent — skips a long form already documented, and returns the comment unchanged when there are
+* no size classes.
+*/
+function withSizeAliasDocs(comment, body) {
+	if (!comment) return comment;
+	const shorts = new Set([...body.matchAll(/\.-size-(xs|sm|md|lg|xl)\b/gu)].map((m) => m[1]));
+	const lines = [];
+	for (const short of shorts) {
+		const long = SIZE_LONG[short];
+		if (new RegExp(`@modifier\\s+-size-${long}\\b`, "u").test(comment)) continue;
+		const desc = comment.match(new RegExp(`@modifier\\s+-size-${short}\\s+[—-]\\s+([^\\n*]+)`, "u"))?.[1]?.trim().replace(/\.\s*$/u, "");
+		const note = desc ? `${desc}. Long-form alias of \`-size-${short}\`.` : `Long-form alias of \`-size-${short}\`.`;
+		lines.push(` * @modifier -size-${long} — ${note}`);
+	}
+	if (!lines.length) return comment;
+	return comment.replace(/\n([ \t]*)\*\/\s*$/u, `\n${lines.join("\n")}\n$1*/`);
+}
+/**
+* Append deprecated-alias twins for a record, given its {@link AliasPair}s (from
+* {@link deprecatedAliasPairs}): every deprecated modifier that `{@link}`s a canonical one is a legacy
+* alias, so we clone each rule using the canonical modifier token under the alias name. Matching by
+* modifier token (not the full component selector) keeps it base-class-agnostic — e.g.
+* Form-Field-Messages' record name is plural but its class is singular.
+*/
+function withAliases(css, aliases) {
+	if (!aliases.length) return css;
+	const extra = [];
+	for (const { alias, canonical } of aliases) {
+		const base = css.match(new RegExp(`(\\.[a-z][\\w-]*)\\.${canonical}\\b`, "u"))?.[1];
+		if (!base) continue;
+		const canonSel = `${base}.${canonical}`;
+		const esc = canonSel.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&");
+		const rule = new RegExp(`([^{}]*${esc}[^{}]*)(\\{[^{}]*\\})`, "gu");
+		for (const [, selector, body] of css.matchAll(rule)) {
+			const dep = selector.replace(/^[\s\S]*\*\//u, "").replace(/\/\*[\s\S]*?\*\//gu, "").split(canonSel).join(`${base}.${alias}`).trim();
+			extra.push(`/* alias of .${canonical} */\n${dep} ${body}`);
+		}
+	}
+	return extra.length ? `${css}\n${extra.join("\n")}\n` : css;
+}
+//#endregion
+//#region src/lib/helpers.ts
+/**
+* Shared primitives for the component builders: the class-prefix namespace helper, the standalone-sheet
+* `wrap` header, the masked-glyph constants, and the spacing scales. These carry no per-record content —
+* every `src/{components,utilities,rules,declarations}` module imports what it needs from here.
+*
+* @module
+*/
+/** The default class prefix (`instui` → `.instui-button`). */
+const DEFAULT_PREFIX = "instui";
+/** Join a class prefix to its separator: `"instui"` → `"instui-"`; a falsy prefix → `""` (no prefix). */
+const ns = (prefix) => prefix ? `${prefix}-` : "";
+/** Prepend the standalone-sheet header comment to a rules string (used by each exported `xxxCss`). */
+const wrap = (name, prefix, rules) => `/* InstUI ${name} (@pantoken/components) — prefix: ${prefix} */\n${rules.trim()}\n`;
+/**
+* A contained, centred mask value pointing at a shared `--instui-icon-<name>` token, painted via
+* `background` (so the glyph takes the element's colour). Masks only — the token's `stroke=currentColor`
+* is irrelevant since the alpha channel drives the mask. Painting a glyph as a `background-image`
+* (which can't read `currentColor`) still needs a colour-baked data URI: see {@link SELECT_CHEVRON}.
+*
+* Only the glyphs still consumed by the TypeScript-authored records (button, the input controls) live
+* here now; the migrated `.css` records inline their `var(--instui-icon-*)` masks directly.
+*/
+const iconMask = (name) => `var(--instui-icon-${name}) center / contain no-repeat`;
+/** Lucide `chevron-down` in the InstUI icon grey — the SimpleSelect caret. A native `<select>` is a
+*  replaced element (no pseudo-elements), so the caret is a `background-image`, not `::after`; a data-URI
+*  background can't read `currentColor`, so the stroke is a fixed neutral grey that reads in both modes. */
+const SELECT_CHEVRON = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7883' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\")";
+/** Lucide `chevron-up`/`chevron-down`, masked — the NumberInput spinner glyphs (painted in currentColor). */
+const CHEVRON_UP_ICON = iconMask("chevron-up");
+const CHEVRON_DOWN_ICON = iconMask("chevron-down");
+/**
+* InstUI's `ai` glyph (Solid), inlined as a mask so it paints in the button's own colour — solid
+* white on `--ai`, the violet→sea gradient on `--ai-secondary`. Source: `@instructure/ui-icons`.
+*/
+const AI_ICON_MASK = "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M960 0L1219.29 700.713L1920 960L1219.29 1219.29L960 1920L700.713 1219.29L0 960L700.713 700.713L960 0Z'/%3E%3Cpath d='M1600 0L1686.43 233.571L1920 320L1686.43 406.429L1600 640L1513.57 406.429L1280 320L1513.57 233.571L1600 0Z'/%3E%3C/svg%3E\") center / contain no-repeat";
+/** Spacing step → value on the pantoken spacing scale. */
+const SPACING_STEPS = {
+	"0": "0",
+	"2xs": "var(--instui-spacing-space2xs)",
+	xs: "var(--instui-spacing-space-xs)",
+	sm: "var(--instui-spacing-space-sm)",
+	md: "var(--instui-spacing-space-md)",
+	lg: "var(--instui-spacing-space-lg)",
+	xl: "var(--instui-spacing-space-xl)",
+	"2xl": "var(--instui-spacing-space2xl)"
+};
+/** Logical sides (RTL-safe): key → the property suffix appended to `margin`/`padding`. */
+const SPACING_SIDES = {
+	"": "",
+	t: "-block-start",
+	b: "-block-end",
+	s: "-inline-start",
+	e: "-inline-end",
+	x: "-inline",
+	y: "-block"
+};
+//#endregion
+//#region src/lib/define.ts
+/**
+* Split a record's leading `/** … *\/` doc comment from its CSS body. The alias post-processors scan
+* for `{ … }` rule bodies, so they must never see the comment's `{@link …}` braces — `make()` runs them
+* on the body alone and recombines. Tolerates leading whitespace before `/**` (an authored template
+* literal often opens with a newline); drops the single newline separating the comment from the body.
+*/
+function splitLeadingDocComment(raw) {
+	const m = raw.match(/^\s*\/\*\*[\s\S]*?\*\//u);
+	if (!m) return {
+		comment: "",
+		body: raw
+	};
+	return {
+		comment: m[0].replace(/^\s+/u, ""),
+		body: raw.slice(m[0].length).replace(/^\n/u, "")
+	};
+}
+function make(kind, input) {
+	const { css: cssBuilder } = input;
+	const aliasPairs = deprecatedAliasPairs(cssBuilder("instui-"));
+	const rules = (prefix) => {
+		const { comment, body } = splitLeadingDocComment(cssBuilder(prefix));
+		return `${withSizeAliasDocs(comment, body)}\n${withAliases(withSizeAliases(body), aliasPairs).trim()}\n`;
+	};
+	return {
+		name: input.name,
+		kind,
+		rules,
+		css: (options = {}) => {
+			const prefix = options.prefix || "";
+			return wrap(input.name, prefix, rules(ns(prefix)));
+		}
+	};
+}
+const defineComponent = (input) => make("component", input);
+const defineUtility = (input) => make("utility", input);
+const defineRule = (input) => make("rule", input);
+//#endregion
+//#region src/lib/sentinel.ts
+/**
+* The class-prefix sentinel used by the `.css`-authored component records.
+*
+* Static components are authored as real `.css` files (under `src/components/`, `src/utilities/`) where
+* the class prefix is written as this sentinel — `.pfx-alert`, not `.${p}alert`. At build time a single
+* `replaceAll(SENTINEL, ns(prefix))` swaps it for the real namespace: `"instui-"` (→ `.instui-alert`) or
+* `""` (→ `.alert`). The swap happens INSIDE each record's `css: (p) => …` builder, before the alias
+* post-processors run, so the rest of the pipeline (`define.ts`, `aliases.ts`) sees the real prefix and
+* behaves exactly as it did when the prefix was interpolated directly.
+*
+* Four properties make a blind `replaceAll` correct AND keep the source `.css` lintable by cssdoc:
+* 1. **It appears ONLY where a class prefix belongs.** Token references are `--instui-*`, internal
+*    custom properties are `--pantoken-*`, and keyframes are `pantoken-*` — none contain `pfx-`. A naive
+*    `instui-` sentinel would corrupt every `var(--instui-*)`; a dedicated token has no such collision.
+* 2. **The trailing dash is part of the token.** Author `.pfx-alert` (not `.pfx-` + `-alert`), so the
+*    unprefixed replace (`"pfx-"` → `""`) leaves a valid `.alert`, never a stray `.-alert`.
+* 3. **It is valid CSS in a class-selector position**, so stylelint/cssdoc parse the source `.css`.
+* 4. **It MUST start with a lowercase letter.** cssdoc's base-class inference strips an uppercase-led
+*    namespace (`.PFX-alert` → inferred class `.alert`) but keeps a lowercase one (`.pfx-alert` stays
+*    `.pfx-alert`, exactly like `.instui-alert`). With an uppercase sentinel the inferred base class no
+*    longer matches the verbatim `@structure` selectors, so `cssdoc/valid-doc-comments` fails on the
+*    source `.css`. Lowercase-first makes cssdoc treat the sentinel exactly like the real `instui-` prefix.
+*
+* A guard test asserts `SENTINEL` never survives into any emitted sheet and never occurs in a token name.
+*/
+const SENTINEL = "pfx-";
+//#endregion
+//#region src/generated/component-styles.ts
+const alert$1 = "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n *   An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n *   Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n  position: relative;\n  min-inline-size: 12rem;\n  padding: var(--instui-component-alert-content-padding-vertical)\n    var(--instui-component-alert-content-padding-horizontal);\n  padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n  background: var(--instui-component-alert-background);\n  color: var(--instui-component-alert-color);\n  border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n    var(--instui-component-alert-info-border-color);\n  border-radius: var(--instui-component-alert-border-radius);\n  /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n  box-shadow: var(--instui-elevation-above);\n  font-family: var(--instui-component-alert-content-font-family);\n  font-size: var(--instui-component-alert-content-font-size);\n  font-weight: var(--instui-component-alert-content-font-weight);\n  line-height: var(--instui-component-alert-content-line-height);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n.pfx-alert.-screen-reader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-alert.-color-info {\n  border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n  border-color: var(--instui-component-alert-success-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n  border-color: var(--instui-component-alert-warning-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n  border-color: var(--instui-component-alert-danger-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n   bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n   generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n   sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n  --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n  inline-size: 2.5rem;\n  block-size: auto;\n  background: var(--pantoken-alert-icon-bg);\n  -webkit-mask: none;\n  mask: none;\n}\n";
+const avatar$1 = "/**\n * @component avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient.\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — Ash palette colour.\n * @modifier -color-blue — Blue palette colour.\n * @modifier -color-green — Green palette colour.\n * @modifier -color-grey — Grey palette colour.\n * @modifier -color-orange — Orange palette colour.\n * @modifier -color-red — Red palette colour.\n * @modifier -has-inverse-color — Use the inverse (on-dark) text colour.\n * @modifier -shape-rectangle — Square (rectangular) shape instead of a circle.\n * @modifier -show-border — Add a border ring.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-2xl — Two sizes larger.\n * @modifier -color-accent1 — @deprecated {@link -color-blue}\n * @modifier -color-accent2 — @deprecated {@link -color-green}\n * @modifier -color-accent3 — @deprecated {@link -color-red}\n * @modifier -color-accent4 — @deprecated {@link -color-orange}\n * @modifier -color-accent5 — @deprecated {@link -color-ash}\n * @modifier -color-accent6 — @deprecated {@link -color-grey}\n * @example\n * ```html\n * <span class=\"pfx-avatar instui-me-sm\">DW</span>\n * <span class=\"pfx-avatar -color-ai\">AI</span>\n * ```\n * @related byline — Can host an avatar as its leading hero figure.\n */\n.pfx-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-avatar-size-md);\n  height: var(--instui-component-avatar-size-md);\n  border-radius: 50%;\n  overflow: hidden;\n  background: var(--instui-component-avatar-background-color);\n  color: var(--instui-component-avatar-blue-text-color);\n  border: var(--instui-component-avatar-border-width-sm) solid\n    var(--instui-component-avatar-border-color);\n  font-family: var(--instui-component-avatar-font-family);\n  font-size: var(--instui-component-avatar-font-size-md);\n  font-weight: var(--instui-component-avatar-font-weight);\n}\n\n.pfx-avatar.-shape-rectangle {\n  border-radius: var(--instui-component-avatar-rectangle-radius);\n}\n\n.pfx-avatar.-size-sm {\n  width: var(--instui-component-avatar-size-sm);\n  height: var(--instui-component-avatar-size-sm);\n  font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-2xs {\n  width: var(--instui-component-avatar-size2xs);\n  height: var(--instui-component-avatar-size2xs);\n  font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs {\n  width: var(--instui-component-avatar-size-xs);\n  height: var(--instui-component-avatar-size-xs);\n  font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-lg {\n  width: var(--instui-component-avatar-size-lg);\n  height: var(--instui-component-avatar-size-lg);\n  font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl {\n  width: var(--instui-component-avatar-size-xl);\n  height: var(--instui-component-avatar-size-xl);\n  font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl {\n  width: var(--instui-component-avatar-size2xl);\n  height: var(--instui-component-avatar-size2xl);\n  font-size: var(--instui-component-avatar-font-size2xl);\n}\n\n.pfx-avatar.-color-ash {\n  color: var(--instui-component-avatar-ash-text-color);\n}\n\n.pfx-avatar.-color-ash.-has-inverse-color {\n  background: var(--instui-component-avatar-ash-background-color);\n}\n\n.pfx-avatar.-color-blue {\n  color: var(--instui-component-avatar-blue-text-color);\n}\n\n.pfx-avatar.-color-blue.-has-inverse-color {\n  background: var(--instui-component-avatar-blue-background-color);\n}\n\n.pfx-avatar.-color-green {\n  color: var(--instui-component-avatar-green-text-color);\n}\n\n.pfx-avatar.-color-green.-has-inverse-color {\n  background: var(--instui-component-avatar-green-background-color);\n}\n\n.pfx-avatar.-color-grey {\n  color: var(--instui-component-avatar-grey-text-color);\n}\n\n.pfx-avatar.-color-grey.-has-inverse-color {\n  background: var(--instui-component-avatar-grey-background-color);\n}\n\n.pfx-avatar.-color-orange {\n  color: var(--instui-component-avatar-orange-text-color);\n}\n\n.pfx-avatar.-color-orange.-has-inverse-color {\n  background: var(--instui-component-avatar-orange-background-color);\n}\n\n.pfx-avatar.-color-red {\n  color: var(--instui-component-avatar-red-text-color);\n}\n\n.pfx-avatar.-color-red.-has-inverse-color {\n  background: var(--instui-component-avatar-red-background-color);\n}\n\n/* ai: always the violet→sea gradient fill with on-colour text (no border). */\n.pfx-avatar.-color-ai {\n  background: linear-gradient(\n    to bottom,\n    var(--instui-component-avatar-ai-top-gradient-color),\n    var(--instui-component-avatar-ai-bottom-gradient-color)\n  );\n  color: var(--instui-component-avatar-text-on-color);\n  border-color: transparent;\n}\n\n/* hasInverseColor: solid fill (default the accent1/blue surface) + on-colour initials, no ring. A\n   `-color-*` companion overrides the fill per colour (that rule is more specific). */\n.pfx-avatar.-has-inverse-color {\n  background: var(--instui-component-avatar-blue-background-color);\n  color: var(--instui-component-avatar-text-on-color);\n  border-color: transparent;\n}\n\n/* showBorder=\"always\": force the ring back on, even over an inverse fill or a photo. */\n.pfx-avatar.-show-border {\n  border-width: var(--instui-component-avatar-border-width-md);\n  border-style: solid;\n  border-color: var(--instui-component-avatar-border-color);\n}\n\n/* A photo: an <img> child fills the chip and covers the initials (image takes priority). */\n.pfx-avatar > img {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n}\n";
+const badge$1 = "/**\n * @component badge\n * @summary A small count or status dot placed over a target's corner.\n * @modifier -color-success — A positive/complete count.\n * @modifier -color-danger — An attention/error count.\n * @modifier -color-inverse — On-dark: a light chip with dark text.\n * @modifier -type-notification — A dot only, no count.\n * @modifier -pulse — A pulsing attention ring.\n * @modifier -standalone — Render inline, not positioned over a target's corner.\n * @modifier -placement-top-start — Position at the top-start corner.\n * @modifier -placement-top-end — Position at the top-end corner.\n * @modifier -placement-bottom-start — Position at the bottom-start corner.\n * @modifier -placement-bottom-end — Position at the bottom-end corner.\n * @modifier -placement-start-center — Position centred on the start edge.\n * @modifier -placement-end-center — Position centred on the end edge.\n * @pseudo ::before — The pulsing attention ring drawn in the badge's accent colour (the `-pulse` variant).\n * @cssproperty --pantoken-badge-accent <color> — The chip fill; each `-color-*` variant and the pulse ring read from it.\n * @cssproperty --pantoken-badge-text <color> — The text colour, paired to the accent so it stays legible.\n * @remarks To place a badge over a target, wrap both in a `.pfx-badge-wrapper` (the position anchor) and pin the badge with a `-placement-*` modifier.\n * @animation pantoken-badge-pulse — The pulse ring animation.\n * @example\n * <span class=\"pfx-badge-wrapper\">\n *   <button class=\"pfx-button\">Inbox</button>\n *   <span class=\"pfx-badge -placement-top-end\">4</span>\n * </span>\n * @wrapper pfx-badge-wrapper\n * @structure\n * The badge renders inline on its own, or inside an optional `pfx-badge-wrapper` that anchors it over a target.\n * .pfx-badge-wrapper:opt {\n *   slot {}\n *   .pfx-badge {}\n * }\n * @related pill — The inline label-chip counterpart.\n * @demo self:badge\n */\n@keyframes pantoken-badge-pulse {\n  from {\n    transform: scale(1);\n    opacity: 0.7;\n  }\n  to {\n    transform: scale(1.8);\n    opacity: 0;\n  }\n}\n/* Wrap a target in this so a placed badge can sit over its corner. It contains the badge (rather than\n   being contained by it), so it's a flat prefixed class, not a scoped element. */\n.pfx-badge-wrapper {\n  position: relative;\n  display: inline-flex;\n}\n.pfx-badge {\n  --pantoken-badge-accent: var(--instui-component-badge-color-primary);\n  /* The primary fill is the brand colour, which flips dark→light between light and dark mode; pair the\n     text so it stays legible either way (white on the light-mode navy, dark on the dark-mode light\n     fill). The saturated status fills below keep white text in both modes. */\n  --pantoken-badge-text: light-dark(\n    var(--instui-component-badge-color),\n    var(--instui-component-badge-color-inverse)\n  );\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--instui-component-badge-size);\n  height: var(--instui-component-badge-size);\n  padding: 0 var(--instui-component-badge-padding);\n  font-family: var(--instui-component-badge-font-family);\n  font-size: var(--instui-component-badge-font-size);\n  font-weight: var(--instui-component-badge-font-weight);\n  line-height: 1;\n  border-radius: var(--instui-component-badge-border-radius);\n  background: var(--pantoken-badge-accent);\n  color: var(--pantoken-badge-text);\n}\n.pfx-badge.-color-success {\n  --pantoken-badge-accent: var(--instui-component-badge-color-success);\n  --pantoken-badge-text: var(--instui-component-badge-color);\n}\n.pfx-badge.-color-danger {\n  --pantoken-badge-accent: var(--instui-component-badge-color-danger);\n  --pantoken-badge-text: var(--instui-component-badge-color);\n}\n/* Inverse swaps fill and text (InstUI): a light chip with dark text, for a colour/dark surface. */\n.pfx-badge.-color-inverse {\n  --pantoken-badge-accent: var(--instui-component-badge-color);\n  --pantoken-badge-text: var(--instui-component-badge-color-inverse);\n}\n/* Notification: a small dot, no count. */\n.pfx-badge.-type-notification {\n  min-width: 0;\n  width: var(--instui-spacing-space-sm);\n  height: var(--instui-spacing-space-sm);\n  padding: 0;\n  font-size: 0;\n}\n/* Pulse: an expanding ring in the badge's accent colour (InstUI `pulse`). */\n.pfx-badge.-pulse::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border: var(--instui-border-width-md) solid var(--pantoken-badge-accent);\n  border-radius: inherit;\n  animation: pantoken-badge-pulse 1.2s ease-out infinite;\n}\n/* Placement: position the badge over a `.badge-wrapper` target. InstUI's countOffset is 0.5rem. */\n.pfx-badge.-placement-top-end,\n.pfx-badge.-placement-top-start,\n.pfx-badge.-placement-bottom-end,\n.pfx-badge.-placement-bottom-start,\n.pfx-badge.-placement-start-center,\n.pfx-badge.-placement-end-center {\n  position: absolute;\n}\n.pfx-badge.-placement-top-end {\n  top: -0.5rem;\n  inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-top-start {\n  top: -0.5rem;\n  inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-bottom-end {\n  bottom: -0.5rem;\n  inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-bottom-start {\n  bottom: -0.5rem;\n  inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-end-center {\n  top: 50%;\n  inset-inline-end: -0.5rem;\n  transform: translateY(-50%);\n}\n.pfx-badge.-placement-start-center {\n  top: 50%;\n  inset-inline-start: -0.5rem;\n  transform: translateY(-50%);\n}\n/* Standalone: the inline chip, in flow — resets any placement. */\n.pfx-badge.-standalone {\n  position: relative;\n  inset: auto;\n  transform: none;\n}\n";
+const billboard$1 = "/**\n * @component billboard\n * @summary A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.\n * @modifier -clickable — Interactive (clickable) styling with hover feedback.\n * @modifier -icon-* — Render a leading icon glyph on `.hero` (e.g. `<span class=\"hero -icon-inbox\"></span>`).\n * @modifier -size-sm — Small: tighter spacing with smaller heading, message, and hero icon.\n * @modifier -size-small — Long-form alias of {@link -size-sm}.\n * @modifier -size-md — Medium (default): standard spacing with medium heading, message, and hero icon.\n * @modifier -size-medium — Long-form alias of {@link -size-md}.\n * @modifier -size-lg — Large: roomier spacing with larger heading, message, and hero icon.\n * @modifier -size-large — Long-form alias of {@link -size-lg}.\n * @part .hero — The optional leading icon or image.\n * @part .heading — The billboard heading.\n * @part .message — The supporting message.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-billboard -size-md -clickable\" tabindex=\"0\">\n *   <span class=\"hero -icon-inbox\"></span>\n *   <div class=\"heading\">No items yet</div>\n *   <div class=\"message\">Create your first item to get started.</div>\n * </div>\n * ```\n * @structure\n * .pfx-billboard {\n *   .hero:optional {}\n *   .heading {}\n *   .message {}\n * }\n * @todo `instructure-design-tokens` is missing several values defined in the `Billboard` component, so we hardcode them here for now. When the tokens are added, we should remove the hardcoded values and use the tokens instead.\n */\n.pfx-billboard {\n  display: block;\n  text-align: center;\n  background: var(--instui-component-billboard-background-color);\n  padding: var(--instui-component-billboard-padding-medium);\n  margin: var(--instui-component-billboard-medium-margin);\n  font-family: var(--instui-component-billboard-font-family);\n  color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-size-sm {\n  padding: var(--instui-component-billboard-padding-small);\n}\n\n.pfx-billboard.-size-md,\n.pfx-billboard.-size-medium {\n  padding: var(--instui-component-billboard-padding-medium);\n}\n\n.pfx-billboard.-size-lg {\n  padding: var(--instui-component-billboard-padding-large);\n  margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-large {\n  padding: var(--instui-component-billboard-padding-large);\n  margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-sm .message {\n  font-size: var(--instui-font-size-text-sm);\n}\n\n.pfx-billboard.-size-md .message,\n.pfx-billboard.-size-medium .message {\n  font-size: var(--instui-font-size-text-base);\n}\n\n.pfx-billboard.-size-lg .message {\n  font-size: 1.375rem;\n}\n\n.pfx-billboard.-size-large .message {\n  font-size: 1.375rem;\n}\n\n.pfx-billboard.-clickable {\n  cursor: pointer;\n  border: var(--instui-component-billboard-button-border-width)\n    var(--instui-component-billboard-button-border-style) transparent;\n  border-radius: var(--instui-component-billboard-button-border-radius);\n}\n\n.pfx-billboard.-clickable:hover {\n  border-style: dashed;\n  border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:focus {\n  border-style: solid;\n  border-color: var(--instui-color-text-base);\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:focus-visible {\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:active {\n  background: var(--instui-component-billboard-clickable-active-bg);\n  border-style: solid;\n  border-color: var(--instui-color-text-base);\n}\n\n/* Fallback for environments where @scope is not applied: keep hero icon sizes in sync with size modifiers. */\n.pfx-billboard > .hero {\n  font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard > .hero[class*=\"-icon-\"] {\n  line-height: 1;\n}\n\n.pfx-billboard.-size-sm > .hero,\n.pfx-billboard.-size-small > .hero {\n  font-size: var(--instui-component-icon-illu-sm);\n}\n\n.pfx-billboard.-size-md > .hero,\n.pfx-billboard.-size-medium > .hero {\n  font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard.-size-lg > .hero,\n.pfx-billboard.-size-large > .hero {\n  font-size: var(--instui-component-icon-illu-lg);\n}\n\n@scope (.pfx-billboard) {\n  /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n  :scope > .hero {\n    display: inline-flex;\n    justify-content: center;\n    margin-block-end: var(--instui-spacing-space-sm);\n    color: var(--instui-color-text-base);\n    font-size: var(--instui-component-icon-illu-md);\n  }\n\n  /* The documented `-icon-*` modifier lives directly on .hero. */\n  :scope > .hero[class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope.-size-sm > .hero {\n    font-size: var(--instui-component-icon-illu-sm);\n  }\n\n  :scope.-size-md > .hero,\n  :scope.-size-medium > .hero {\n    font-size: var(--instui-component-icon-illu-md);\n  }\n\n  :scope.-size-lg > .hero {\n    font-size: var(--instui-component-icon-illu-lg);\n  }\n\n  :scope.-size-large > .hero {\n    font-size: var(--instui-component-icon-illu-lg);\n  }\n\n  :scope.-size-sm > .hero[class*=\"-icon-\"] {\n    font-size: var(--instui-component-icon-illu-sm);\n  }\n\n  :scope.-size-small > .hero[class*=\"-icon-\"] {\n    font-size: var(--instui-component-icon-illu-sm);\n  }\n\n  :scope.-size-md > .hero[class*=\"-icon-\"],\n  :scope.-size-medium > .hero[class*=\"-icon-\"] {\n    font-size: var(--instui-component-icon-illu-md);\n  }\n\n  :scope.-size-lg > .hero[class*=\"-icon-\"] {\n    font-size: var(--instui-component-icon-illu-lg);\n  }\n\n  :scope.-size-large > .hero[class*=\"-icon-\"] {\n    font-size: var(--instui-component-icon-illu-lg);\n  }\n\n  /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n  :scope > .heading {\n    margin: 0 0 var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-base);\n    font-weight: bold;\n    font-size: var(--instui-component-text-font-size-x-x-large);\n  }\n\n  :scope > .message {\n    color: var(--instui-color-text-base);\n    font-size: var(--instui-font-size-text-base);\n  }\n\n  :scope.-clickable:hover > .hero {\n    color: var(--instui-component-link-text-color);\n  }\n\n  :scope.-clickable:active > .hero {\n    color: var(--instui-component-link-on-color-text-color);\n  }\n}\n";
+const breadcrumb$1 = "/**\n * @component breadcrumb\n * @summary A breadcrumb trail with `/` separators; the last crumb is the current page.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -icon-* — Render a glyph icon in a crumb link (for example, home in the first crumb).\n * @part .item — A crumb; the last one is the current page.\n * @pseudo ::after — Renders the `/` separator after every crumb except the last.\n * @a11y Wrap the trail in `<nav aria-label>` and mark the current page's crumb with `aria-current=\"page\"`.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n *   <span class=\"item\">\n *     <a href=\"#\"><span class=\"pfx-icon -icon-house\"></span> Home</a>\n *   </span>\n *   <span class=\"item\"><a href=\"#\">Guides</a></span>\n *   <span class=\"item\"><a href=\"#\">Components</a></span>\n *   <span class=\"item\" aria-current=\"page\">Breadcrumb</span>\n * </nav>\n * @structure\n * .pfx-breadcrumb {\n *   .item {\n *     a {\n *       [class*=\"-icon-\"]:optional {}\n *     }\n *   }\n * }\n * @related link — Styles each crumb as a link.\n */\n.pfx-breadcrumb {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-breadcrumb-gap-md);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm {\n  gap: var(--instui-component-breadcrumb-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-lg {\n  gap: var(--instui-component-breadcrumb-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n}\n\n.pfx-breadcrumb.-size-sm .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n}\n\n.pfx-breadcrumb.-size-lg .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n}\n\n@scope (.pfx-breadcrumb) {\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope > .item:not(:last-child)::after {\n    content: \"/\";\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n    color: var(--instui-color-text-muted);\n  }\n}\n";
+const byline$1 = "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <div class=\"pfx-byline -size-md\">\n *   <span class=\"pfx-icon -icon-megaphone\"></span>\n *   <div>\n *     <div class=\"title\">What's new</div>\n *     <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n *   </div>\n * </div>\n * @structure\n * .pfx-byline {\n *   [class*=\"-icon-\"]:optional {}\n *   div {\n *     .title {}\n *     .description {}\n *   }\n * }\n */\n.pfx-byline {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-byline-figure-margin);\n  background: var(--instui-component-byline-background);\n  color: var(--instui-component-byline-color);\n  font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n  align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n  align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n   (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n  max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n  max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n  max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n  :scope > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  .title {\n    margin: 0 0 var(--instui-component-byline-title-margin);\n    font-size: var(--instui-component-byline-title-font-size);\n    font-weight: var(--instui-component-byline-title-font-weight);\n    line-height: var(--instui-component-byline-title-line-height);\n  }\n\n  .description {\n    font-size: var(--instui-component-byline-description-font-size);\n    font-weight: var(--instui-component-byline-description-font-weight);\n    line-height: var(--instui-component-byline-description-line-height);\n  }\n}\n";
+const calendar$1 = "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @part .day — A day cell; `-today`, `-selected`, and `-outside-month` mark its state.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n *   <div class=\"nav\">\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n *     <strong>March 2026</strong>\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n *   </div>\n *   <div class=\"grid\">\n *     <span class=\"weekday\">Su</span>\n *     <span class=\"weekday\">Mo</span>\n *     <span class=\"weekday\">Tu</span>\n *     <span class=\"weekday\">We</span>\n *     <span class=\"weekday\">Th</span>\n *     <span class=\"weekday\">Fr</span>\n *     <span class=\"weekday\">Sa</span>\n *     <span class=\"day -outside-month\">23</span>\n *     <span class=\"day -outside-month\">24</span>\n *     <span class=\"day -outside-month\">25</span>\n *     <span class=\"day -outside-month\">26</span>\n *     <span class=\"day -outside-month\">27</span>\n *     <span class=\"day -outside-month\">28</span>\n *     <span class=\"day\">1</span>\n *     <span class=\"day\">2</span>\n *     <span class=\"day\">3</span>\n *     <span class=\"day\">4</span>\n *     <span class=\"day\">5</span>\n *     <span class=\"day\">6</span>\n *     <span class=\"day -today\">7</span>\n *     <span class=\"day\">8</span>\n *     <span class=\"day\">9</span>\n *     <span class=\"day\">10</span>\n *     <span class=\"day\">11</span>\n *     <span class=\"day -selected\">12</span>\n *     <span class=\"day\">13</span>\n *     <span class=\"day\">14</span>\n *     <span class=\"day\">15</span>\n *   </div>\n * </div>\n * @structure\n * .pfx-calendar {\n *   .nav {\n *     .pfx-button {}\n *     strong {}\n *   }\n *   .grid {\n *     .weekday {}\n *     .day {}\n *   }\n * }\n */\n.pfx-calendar {\n  display: inline-block;\n  text-align: center;\n  background: var(--instui-component-calendar-background);\n  color: var(--instui-component-calendar-color);\n  font-family: var(--instui-component-calendar-font-family);\n  font-size: var(--instui-component-calendar-font-size);\n  font-weight: var(--instui-component-calendar-font-weight);\n  line-height: var(--instui-component-calendar-line-height);\n}\n@scope (.pfx-calendar) {\n  /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n   only spaces the row below itself, so margin is block-end only — no inline inset). */\n  :scope > .nav {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-block-end: var(--instui-component-calendar-nav-margin);\n  }\n  /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n   off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n   whose day table spaces cells with the browser-default border-spacing in both directions. */\n  :scope > .grid {\n    display: grid;\n    grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n    justify-content: center;\n    gap: var(--instui-spacing-space2xs);\n  }\n  .weekday,\n  .day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n  }\n  .weekday {\n    font-weight: var(--instui-font-weight-interactive);\n  }\n  .day {\n    font-size: var(--instui-component-calendar-day-font-size);\n    color: var(--instui-component-calendar-day-color);\n    background: var(--instui-component-calendar-day-background);\n    cursor: pointer;\n  }\n  .day.-outside-month {\n    color: var(--instui-component-calendar-day-outside-month-color);\n  }\n  .day.-today {\n    background: var(--instui-component-calendar-day-today-background);\n    color: var(--instui-component-calendar-day-today-color);\n    border-radius: var(--instui-component-calendar-day-today-border-radius);\n  }\n  .day.-selected {\n    background: var(--instui-component-calendar-day-selected-background);\n    color: var(--instui-component-calendar-day-selected-color);\n    border-radius: var(--instui-component-calendar-day-selected-border-radius);\n  }\n}\n";
+const checkbox$1 = "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * <label class=\"pfx-checkbox\"><input type=\"checkbox\" checked> Checked</label>\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n}\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n@scope (.pfx-checkbox) {\n  :scope.-required .asterisk {\n    color: var(--instui-component-checkbox-asterisk-color);\n  }\n}\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n";
+const closeButton$1 = "/**\n * @component close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n.pfx-close-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1;\n  min-height: var(--instui-component-base-button-medium-height);\n  padding: var(--instui-spacing-space-xs);\n  border: 0;\n  background: transparent;\n  border-radius: var(--instui-component-base-button-border-radius);\n  color: var(--instui-color-text-interactive-action-secondary-base);\n  cursor: pointer;\n}\n.pfx-close-button::before {\n  content: \"\";\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n  -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n  mask: var(--instui-icon-x) center / contain no-repeat;\n}\n.pfx-close-button:hover {\n  background: var(--instui-color-background-interactive-action-tertiary-hover);\n}\n.pfx-close-button:active {\n  background: var(--instui-color-background-interactive-action-tertiary-active);\n}\n.pfx-close-button.-size-sm {\n  min-height: var(--instui-component-base-button-small-height);\n}\n.pfx-close-button.-size-lg {\n  min-height: var(--instui-component-base-button-large-height);\n}\n.pfx-close-button.-color-inverse {\n  color: var(--instui-component-base-button-primary-inverse-ghost-color);\n}\n";
+const contextView$1 = "/**\n * @component context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n.pfx-context-view {\n  position: relative;\n  display: inline-block;\n  padding: var(--instui-spacing-space-md);\n  background: var(--instui-color-background-elevated-surface-base);\n  color: var(--instui-color-text-base);\n  border: var(--instui-component-context-view-arrow-border-width) solid\n    var(--instui-component-context-view-arrow-border-color);\n  border-radius: var(--instui-component-context-view-border-radius);\n  /* ContextView floats over content — InstUI gives it a shadow. */\n  box-shadow: var(--instui-elevation-above);\n}\n/* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n   ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n   without it, a surface-coloured caret is invisible against a matching surface. */\n.pfx-context-view::before,\n.pfx-context-view::after {\n  content: \"\";\n  position: absolute;\n  border-style: solid;\n  border-color: transparent;\n}\n.pfx-context-view::before {\n  border-width: calc(\n    var(--instui-component-context-view-arrow-size) +\n      var(--instui-component-context-view-arrow-border-width)\n  );\n}\n.pfx-context-view::after {\n  border-width: var(--instui-component-context-view-arrow-size);\n}\n/* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n   pointing down. */\n.pfx-context-view::before {\n  top: 100%;\n  inset-inline-start: calc(\n    var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n  );\n  border-top-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view::after {\n  top: 100%;\n  inset-inline-start: var(--instui-spacing-space-lg);\n  border-top-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"bottom\": caret on the top edge, pointing up. */\n.pfx-context-view.-placement-bottom::before {\n  top: auto;\n  bottom: 100%;\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-bottom::after {\n  top: auto;\n  bottom: 100%;\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n.pfx-context-view.-placement-start::before,\n.pfx-context-view.-placement-start::after {\n  top: 50%;\n  inset-inline-start: 100%;\n  transform: translateY(-50%);\n  border-top-color: transparent;\n}\n.pfx-context-view.-placement-start::before {\n  border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-start::after {\n  border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n.pfx-context-view.-placement-end::before,\n.pfx-context-view.-placement-end::after {\n  top: 50%;\n  inset-inline-start: auto;\n  inset-inline-end: 100%;\n  transform: translateY(-50%);\n  border-top-color: transparent;\n}\n.pfx-context-view.-placement-end::before {\n  border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-end::after {\n  border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n.pfx-context-view.-color-inverse {\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::before {\n  border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::after {\n  border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::before {\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::after {\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::before {\n  border-top-color: transparent;\n  border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::after {\n  border-top-color: transparent;\n  border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::before {\n  border-top-color: transparent;\n  border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::after {\n  border-top-color: transparent;\n  border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n/* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n   above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n   and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n   supported; elsewhere the UA centres it. */\n[popover].pfx-context-view {\n  position: fixed;\n  overflow: visible;\n  margin: 0;\n}\n[popover].pfx-context-view:not(:popover-open) {\n  display: none;\n}\n/* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n   popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n   trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n@supports (position-area: block-end) {\n  [popover].pfx-context-view {\n    position-anchor: --pantoken-anchor;\n    position-try-fallbacks: flip-block, flip-inline;\n  }\n  [popover].pfx-context-view.-placement-top {\n    position-area: block-start;\n  }\n  [popover].pfx-context-view.-placement-bottom {\n    position-area: block-end;\n  }\n  [popover].pfx-context-view.-placement-start {\n    position-area: inline-start center;\n  }\n  [popover].pfx-context-view.-placement-end {\n    position-area: inline-end center;\n  }\n}\n";
+const fileDrop$1 = "/**\n * @component file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n *   <span class=\"pfx-icon -icon-cloud-upload\"></span>\n *   <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n *   <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n *   <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n *   [class*=\"-icon-\"]:optional {}\n *   .pfx-text {\n *     strong {}\n *   }\n *   .pfx-text {}\n *   input {}\n * }\n */\n.pfx-file-drop {\n  display: block;\n  text-align: center;\n  padding: var(--instui-spacing-space-lg);\n  color: var(--instui-color-text-base);\n  background: var(--instui-component-file-drop-background-color);\n  border: var(--instui-component-file-drop-border-width)\n    var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n  border-radius: var(--instui-component-file-drop-border-radius);\n}\n\n.pfx-file-drop:hover,\n.pfx-file-drop.-hover {\n  border-color: var(--instui-component-file-drop-hover-border-color);\n}\n\n.pfx-file-drop.-accepted {\n  border-color: var(--instui-component-file-drop-accepted-color);\n}\n\n.pfx-file-drop.-rejected {\n  border-color: var(--instui-component-file-drop-rejected-color);\n}\n\n.pfx-file-drop > [class*=\"-icon-\"] {\n  line-height: 1;\n}\n";
+const formFieldGroup$1 = "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n *   <legend>Shipping address</legend>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">First name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">Last name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">City</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">State</span>\n *     <span class=\"controls\">\n *       <select class=\"pfx-simple-select\">\n *         <option>CA</option>\n *         <option>NY</option>\n *         <option>TX</option>\n *       </select>\n *     </span>\n *   </label>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n *   </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n *   legend {}\n *   .pfx-form-field {}\n *   .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n.pfx-form-field-group > legend {\n  grid-column: 1 / -1;\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-form-field-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n.pfx-form-field-group.-row-spacing-none {\n  row-gap: 0;\n}\n.pfx-form-field-group.-row-spacing-small {\n  row-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-row-spacing-medium {\n  row-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-row-spacing-large {\n  row-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-col-spacing-none {\n  column-gap: 0;\n}\n.pfx-form-field-group.-col-spacing-small {\n  column-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-col-spacing-medium {\n  column-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-col-spacing-large {\n  column-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-v-align-top {\n  align-items: start;\n}\n.pfx-form-field-group.-v-align-middle {\n  align-items: center;\n}\n.pfx-form-field-group.-v-align-bottom {\n  align-items: end;\n}\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n   label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n   just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n  .pfx-form-field-group.-layout-aligned {\n    grid-template-columns: auto 1fr;\n    align-items: center;\n  }\n  .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n    display: grid;\n    grid-column: 1 / -1;\n    grid-template-columns: subgrid;\n    grid-template-areas: \"label controls\" \". messages\";\n    align-items: center;\n  }\n}\n";
+const formFieldMessages$1 = "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n";
+const formField$1 = "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n *   <span class=\"label\">Email address</span>\n *   <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *     <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n *   </div>\n * </label>\n * @structure\n * .pfx-form-field {\n *   .label {}\n *   .controls {\n *     .pfx-text-input {}\n *   }\n *   .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n}\n@scope (.pfx-form-field) {\n  :scope > .label {\n    grid-area: label;\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n  :scope > .controls {\n    grid-area: controls;\n  }\n}\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n  grid-area: messages;\n}\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n   (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n   control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n  display: none;\n}\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n  display: inline-flex;\n}\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n.pfx-form-field.-layout-inline {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"label controls\" \". messages\";\n  align-items: center;\n  column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n";
+const img$1 = "/**\n * @component img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n.pfx-img {\n  display: inline-block;\n  max-inline-size: 100%;\n  block-size: auto;\n  --pantoken-img-filter: none;\n  filter: var(--pantoken-img-filter);\n  transition: filter var(--instui-component-img-effect-transition-duration) ease;\n}\n.pfx-img.-display-block {\n  display: block;\n}\n/* constrain: fill a sized box (the consumer sets width/height). */\n.pfx-img.-constrain-cover {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n}\n.pfx-img.-constrain-contain {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: contain;\n}\n/* Effects compose through the custom property, so grayscale + blur can apply together. */\n.pfx-img.-with-grayscale {\n  --pantoken-img-filter: grayscale(1);\n}\n.pfx-img.-with-blur {\n  --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n}\n.pfx-img.-with-grayscale.-with-blur {\n  --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n}\n";
+const inPlaceEdit$1 = "/**\n * @component in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n.pfx-in-place-edit {\n  display: inline-block;\n  min-inline-size: 2rem;\n  padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n  border: var(--instui-component-text-input-border-width) solid transparent;\n  border-radius: var(--instui-component-text-input-border-radius);\n  color: var(--instui-color-text-base);\n  font: inherit;\n  cursor: text;\n}\n/* Hover affordance: it's editable. */\n.pfx-in-place-edit:hover {\n  background: var(--instui-color-background-muted);\n}\n/* Focus = edit mode: input chrome + the focus ring. */\n.pfx-in-place-edit:focus {\n  background: var(--instui-component-text-input-background-color);\n  border-color: var(--instui-component-text-input-border-color);\n  outline: none;\n}\n.pfx-in-place-edit:focus-visible {\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n.pfx-in-place-edit.-readonly {\n  cursor: default;\n}\n.pfx-in-place-edit.-readonly:hover {\n  background: transparent;\n}\n";
+const link$1 = "/**\n * @component link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links.\n */\n.pfx-link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-link-gap-md);\n  color: var(--instui-component-link-text-color);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n  font-weight: var(--instui-component-link-font-weight);\n  line-height: var(--instui-component-link-line-height-md);\n  text-decoration: var(--instui-component-link-text-decoration-outside-text);\n  cursor: pointer;\n}\n.pfx-link:hover {\n  color: var(--instui-component-link-text-hover-color);\n}\n.pfx-link[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-text-disabled-color);\n  cursor: not-allowed;\n}\n.pfx-link.-size-sm {\n  gap: var(--instui-component-link-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n  line-height: var(--instui-component-link-line-height-sm);\n}\n.pfx-link.-size-lg {\n  gap: var(--instui-component-link-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n  line-height: var(--instui-component-link-line-height-lg);\n}\n.pfx-link.-color-inverse {\n  color: var(--instui-component-link-on-color-text-color);\n}\n.pfx-link.-color-inverse:hover {\n  color: var(--instui-component-link-on-color-text-hover-color);\n}\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-on-color-text-disabled-color);\n}\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n  display: inline;\n  font-family: var(--instui-component-link-inline-link-medium-font-family);\n  font-size: var(--instui-component-link-inline-link-medium-font-size);\n  font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n  line-height: var(--instui-component-link-inline-link-medium-line-height);\n  text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n.pfx-link.-inline.-sm {\n  font-size: var(--instui-component-link-inline-link-small-font-size);\n  font-weight: var(--instui-component-link-inline-link-small-font-weight);\n  line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n.pfx-link.-inline.-lg {\n  font-size: var(--instui-component-link-inline-link-large-font-size);\n  font-weight: var(--instui-component-link-inline-link-large-font-weight);\n  line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n.pfx-link.-unstyled {\n  color: var(--instui-component-link-unstyled-text-color);\n  text-decoration: none;\n}\n";
+const list$1 = "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @modifier -ordered — Ordered-list numbering.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -delimiter-solid — Separate items with a solid rule.\n * @modifier -delimiter-dashed — Separate items with a dashed rule.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n * @structure\n * .pfx-list {\n *   li {}\n * }\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n.pfx-list > li {\n  margin: var(--instui-component-list-item-spacing-medium) 0;\n}\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n.pfx-list.-size-sm > li {\n  margin: var(--instui-component-list-item-spacing-small) 0;\n}\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n.pfx-list.-size-lg > li {\n  margin: var(--instui-component-list-item-spacing-large) 0;\n}\n.pfx-list.-ordered > li::marker {\n  font-weight: var(--instui-component-list-ordered-number-font-weight);\n}\n.pfx-list.-ordered > li {\n  padding-inline-start: var(--instui-component-list-ordered-number-margin);\n}\n.pfx-list.-delimiter-solid > li + li {\n  border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n    var(--instui-component-list-item-delimiter-solid-border-style)\n    var(--instui-component-list-item-delimiter-solid-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n.pfx-list.-delimiter-dashed > li + li {\n  border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n    var(--instui-component-list-item-delimiter-dashed-border-style)\n    var(--instui-component-list-item-delimiter-dashed-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n  list-style: none;\n  padding-inline-start: 0;\n}\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--instui-component-list-item-spacing-medium);\n  list-style: none;\n  padding-inline-start: 0;\n}\n.pfx-list.-inline > li {\n  margin: 0;\n}\n";
+const menu$1 = "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example\n * <div class=\"pfx-menu\">\n *   <div class=\"group\">Actions</div>\n *   <div class=\"item\">Edit</div>\n *   <div class=\"item -active\">Duplicate</div>\n *   <div class=\"separator\"></div>\n *   <div class=\"item\">Delete</div>\n * </div>\n * @structure\n * .pfx-menu {\n *   .group {}\n *   .item {}\n *   .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n * @demo self:menu\n */\n.pfx-menu {\n  min-width: var(--instui-component-menu-min-width);\n  max-width: var(--instui-component-menu-max-width);\n  background: var(--instui-component-menu-item-background);\n  border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-spacing-space-xs) 0;\n}\n@scope (.pfx-menu) {\n  :scope > .item {\n    display: block;\n    padding: var(--instui-component-menu-item-padding-vertical)\n      var(--instui-component-menu-item-padding-horizontal);\n    color: var(--instui-component-menu-item-label-color);\n    font-family: var(--instui-component-menu-item-font-family);\n    font-size: var(--instui-component-menu-item-font-size);\n    font-weight: var(--instui-component-menu-item-font-weight);\n    line-height: var(--instui-component-menu-item-line-height);\n    cursor: pointer;\n  }\n  /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n  :scope > .item.-disabled {\n    opacity: var(--instui-opacity-disabled);\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n  :scope > .item:hover,\n  :scope > .item.-highlighted {\n    background: var(--instui-component-menu-item-highlighted-background);\n    color: var(--instui-component-menu-item-highlighted-label-color);\n  }\n  :scope > .item.-active,\n  :scope > .item[aria-checked=\"true\"] {\n    background: var(--instui-component-menu-item-active-background);\n    color: var(--instui-component-menu-item-active-label-color);\n  }\n  :scope > .item.-active:hover,\n  :scope > .item[aria-checked=\"true\"]:hover {\n    background: var(--instui-component-menu-item-selected-highlighted-background);\n  }\n  /* Secondary line inside an item (a description or shortcut). */\n  .item-info {\n    color: var(--instui-component-menu-item-label-info-color);\n  }\n  :scope > .item:hover .item-info,\n  :scope > .item.-highlighted .item-info {\n    color: var(--instui-component-menu-item-highlighted-label-info-color);\n  }\n  /* A labelled group of items. */\n  :scope > .group {\n    padding: var(--instui-component-menu-group-padding-vertical)\n      var(--instui-component-menu-group-padding-horizontal);\n    background: var(--instui-component-menu-group-background);\n    color: var(--instui-component-menu-group-color);\n    font-family: var(--instui-component-menu-group-font-family);\n    font-size: var(--instui-component-menu-group-font-size);\n    font-weight: var(--instui-component-menu-group-font-weight);\n  }\n  :scope > .separator {\n    height: var(--instui-component-menu-separator-height);\n    background: var(--instui-component-menu-separator-background);\n    margin: var(--instui-component-menu-separator-margin-vertical)\n      var(--instui-component-menu-separator-margin-horizontal);\n  }\n}\n";
+const metric$1 = "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n *   <span class=\"value\">1,284</span>\n *   <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n *   .value {}\n *   .label {}\n * }\n */\n.pfx-metric {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--instui-component-metric-gap-texts);\n  padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n@scope (.pfx-metric) {\n  :scope > .value {\n    color: var(--instui-component-metric-value-color);\n    font-family: var(--instui-component-metric-value-font-family);\n    font-size: var(--instui-component-metric-value-font-size);\n    font-weight: var(--instui-component-metric-value-font-weight);\n    line-height: var(--instui-component-metric-value-line-height);\n  }\n  :scope > .label {\n    color: var(--instui-component-metric-label-color);\n    font-family: var(--instui-component-metric-label-font-family);\n    font-size: var(--instui-component-metric-label-font-size);\n    font-weight: var(--instui-component-metric-label-font-weight);\n    line-height: var(--instui-component-metric-label-line-height);\n  }\n}\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n   actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n   covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n  align-items: flex-start;\n  text-align: start;\n}\n.pfx-metric.-text-align-center {\n  align-items: center;\n  text-align: center;\n}\n.pfx-metric.-text-align-end {\n  align-items: flex-end;\n  text-align: end;\n}\n";
+const modal$1 = "/**\n * @component modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body).\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body.\n * @part .header — The title row.\n * @part .body — The content region (a lone <img> goes full-bleed).\n * @part .footer — The actions row.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n *   <div class=\"header\"><strong>Small</strong></div>\n *   <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n *   <div class=\"footer\">\n *     <button class=\"pfx-button\">Close</button>\n *   </div>\n * </dialog>\n * @structure\n * .pfx-modal.-size-sm {\n *   .header {\n *     strong {}\n *   }\n *   .body {\n *     code {}\n *   }\n *   .footer {\n *     .pfx-button {}\n *   }\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n.pfx-modal {\n  max-width: var(--instui-component-modal-medium-max-width);\n  background: var(--instui-component-modal-background-color);\n  color: var(--instui-component-modal-text-color);\n  border: var(--instui-component-modal-border-width) solid\n    var(--instui-component-modal-border-color);\n  border-radius: var(--instui-component-modal-border-radius);\n  font-family: var(--instui-component-modal-font-family);\n  overflow: hidden;\n  /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n  box-shadow: var(--instui-elevation-topmost);\n}\n/* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n   no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n   optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\ndialog.pfx-modal {\n  margin: auto;\n  padding: 0;\n}\ndialog.pfx-modal::backdrop {\n  background: var(--instui-component-mask-background-color);\n}\ndialog.pfx-modal.-blur::backdrop {\n  backdrop-filter: blur(0.5rem);\n}\n.pfx-modal.-size-sm {\n  max-width: var(--instui-component-modal-small-max-width);\n}\n.pfx-modal.-size-lg {\n  max-width: var(--instui-component-modal-large-max-width);\n}\n.pfx-modal.-size-auto {\n  max-width: none;\n  min-width: var(--instui-component-modal-auto-min-width);\n}\n/* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n   inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n   `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n   at the viewport edge. */\n.pfx-modal.-size-fullscreen {\n  position: fixed;\n  inset: 0;\n  width: auto;\n  height: auto;\n  max-width: none;\n  max-height: none;\n  margin: 0;\n  border-radius: 0;\n}\n/* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n   stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n.pfx-modal.-overflow-fit {\n  display: flex;\n  flex-direction: column;\n  max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n}\n.pfx-modal.-color-inverse {\n  background: var(--instui-component-modal-inverse-background-color);\n  color: var(--instui-component-modal-inverse-text-color);\n  border-color: var(--instui-component-modal-inverse-border-color);\n}\n@scope (.pfx-modal) {\n  :scope.-overflow-fit > .body {\n    overflow-y: auto;\n  }\n  :scope > .header {\n    padding: var(--instui-component-modal-header-padding);\n    background: var(--instui-component-modal-header-background-color);\n    border-bottom: var(--instui-component-modal-header-border-width) solid\n      var(--instui-component-modal-header-border-color);\n  }\n  :scope > .body {\n    padding: var(--instui-component-modal-body-padding);\n  }\n  /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n   modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n  :scope > .body:has(> img) {\n    padding: 0;\n  }\n  :scope > .body:has(> img) img {\n    display: block;\n    width: 100%;\n  }\n  :scope > .footer {\n    padding: var(--instui-component-modal-footer-padding);\n    background: var(--instui-component-modal-footer-background-color);\n    border-top: var(--instui-component-modal-footer-border-width) solid\n      var(--instui-component-modal-footer-border-color);\n    border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n      var(--instui-component-modal-footer-border-radius);\n  }\n  :scope.-density-compact > .header {\n    padding: var(--instui-component-modal-header-padding-compact);\n  }\n  :scope.-density-compact > .body {\n    padding: var(--instui-component-modal-body-padding-compact);\n  }\n  :scope.-density-compact > .footer {\n    padding: var(--instui-component-modal-footer-padding-compact);\n  }\n  :scope.-color-inverse > .header {\n    background: var(--instui-component-modal-header-inverse-background-color);\n    border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n  }\n  :scope.-color-inverse > .body {\n    background: var(--instui-component-modal-body-inverse-background-color);\n  }\n  :scope.-color-inverse > .footer {\n    background: var(--instui-component-modal-footer-inverse-background-color);\n    border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n  }\n}\n";
+const pagination$1 = "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @part .page — A page link or button; the current page carries `[aria-current]`.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate current\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n *   <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n *   <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n *   <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n *   <a class=\"page\" href=\"#\">2</a>\n *   <a class=\"page\" href=\"#\">3</a>\n *   <span class=\"ellipsis\">…</span>\n *   <a class=\"page\" href=\"#\">12</a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n *   .arrow {\n *     [class*=\"-icon-\"]:optional {}\n *   }\n *   .page {}\n *   .ellipsis {}\n * }\n */\n.pfx-pagination {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-pagination-page-indicator-gap);\n  font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n  /* A page number or a nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .page,\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .page:hover,\n  :scope > .arrow:hover {\n    background: var(--instui-color-background-muted);\n    color: var(--instui-color-text-interactive-navigation-primary-hover);\n  }\n\n  /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n\n  /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n";
+const pill$1 = "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * <span class=\"pfx-pill\">Draft</span>\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n * @demo self:pill\n */\n.pfx-pill {\n  display: inline-flex;\n  align-items: center;\n  height: var(--instui-component-pill-height);\n  max-width: var(--instui-component-pill-max-width);\n  padding: 0 var(--instui-component-pill-padding-horizontal);\n  background: var(--instui-component-pill-background-color);\n  color: var(--instui-component-pill-base-text-color);\n  border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n    var(--instui-component-pill-base-border-color);\n  border-radius: var(--instui-component-pill-border-radius);\n  font-family: var(--instui-component-pill-font-family);\n  font-size: var(--instui-component-pill-text-font-size);\n  font-weight: var(--instui-component-pill-text-font-weight);\n  line-height: var(--instui-component-pill-line-height);\n}\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n   inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n  inline-size: var(--instui-font-size-text-xs);\n  block-size: var(--instui-font-size-text-xs);\n  margin-inline-end: 0.375rem;\n}\n.pfx-pill.-color-info {\n  color: var(--instui-component-pill-info-text-color);\n  border-color: var(--instui-component-pill-info-border-color);\n}\n.pfx-pill.-color-success {\n  color: var(--instui-component-pill-success-text-color);\n  border-color: var(--instui-component-pill-success-border-color);\n}\n.pfx-pill.-color-warning {\n  color: var(--instui-component-pill-warning-text-color);\n  border-color: var(--instui-component-pill-warning-border-color);\n}\n.pfx-pill.-color-danger {\n  color: var(--instui-component-pill-error-text-color);\n  border-color: var(--instui-component-pill-error-border-color);\n}\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n  font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n";
+const popover$1 = "/**\n * @component popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n *   <div class=\"pfx-heading -level-h4\">Share this page</div>\n *   <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n *   .pfx-heading {}\n *   .pfx-text {\n *     code {}\n *   }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n.pfx-popover {\n  background: var(--instui-color-background-elevated-surface-base);\n  color: var(--instui-color-text-base);\n  border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n  border-radius: var(--instui-component-popover-border-radius);\n  padding: var(--instui-spacing-space-sm);\n  box-shadow: var(--instui-elevation-above);\n}\n[popover].pfx-popover {\n  margin: 0;\n}\n/* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n   popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n   modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n   then centres the popover in the top layer. */\n@supports (position-area: block-end) {\n  [popover].pfx-popover {\n    position-anchor: --pantoken-anchor;\n    position-try-fallbacks: flip-block, flip-inline;\n  }\n  [popover].pfx-popover.-placement-top {\n    position-area: block-start;\n  }\n  [popover].pfx-popover.-placement-bottom {\n    position-area: block-end;\n  }\n  [popover].pfx-popover.-placement-start {\n    position-area: inline-start center;\n  }\n  [popover].pfx-popover.-placement-end {\n    position-area: inline-end center;\n  }\n}\n/* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n@supports (transition-behavior: allow-discrete) {\n  [popover].pfx-popover {\n    transition:\n      opacity 0.15s ease,\n      transform 0.15s ease,\n      overlay 0.15s allow-discrete,\n      display 0.15s allow-discrete;\n    opacity: 1;\n    transform: translateY(0);\n  }\n  [popover].pfx-popover:not(:popover-open) {\n    opacity: 0;\n    transform: translateY(-0.25rem);\n  }\n  @starting-style {\n    [popover].pfx-popover:popover-open {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n  }\n}\n";
+const progressCircle$1 = "/**\n * @component progress-circle\n * @summary A circular progress ring driven by a `--value` (0–100) custom property.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; the `--value` custom property drives the arc.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @cssproperty --value <number> — The progress percentage (0–100) that drives the arc; registered with @property so it can transition.\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Give it role=\"img\" and an aria-label stating the percentage, since the ring is drawn in CSS.\n * @compat Registers `--value` with `@property` (so the arc can transition) and paints with CSS `mask` and `conic-gradient`; where `@property` is unsupported the ring still renders but won't animate.\n * @example\n * <span class=\"pfx-progress-circle -size-sm\" role=\"img\" aria-label=\"25 percent\">\n *   <span class=\"value\">25%</span>\n * </span>\n * @related progress — The linear bar form of the same determinate progress.\n */\n/* --value (0–100) drives the arc; registered so the conic-gradient re-evaluates (and can transition). */\n@property --value {\n  syntax: \"<number>\";\n  inherits: true;\n  initial-value: 0;\n}\n.pfx-progress-circle {\n  --value: 0;\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  color: var(--instui-component-progress-circle-color);\n  font-family: var(--instui-component-progress-circle-font-family);\n  font-weight: var(--instui-component-progress-circle-font-weight);\n  line-height: var(--instui-component-progress-circle-line-height);\n}\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: conic-gradient(\n    var(--pantoken-pc-fill) calc(var(--value) * 1%),\n    var(--pantoken-pc-track) 0\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    #0000 calc(100% - var(--pantoken-pc-stroke)),\n    #000 0\n  );\n  mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n}\n.pfx-progress-circle .value {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.pfx-progress-circle.-size-xs {\n  width: var(--instui-component-progress-circle-x-small-size);\n  height: var(--instui-component-progress-circle-x-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n.pfx-progress-circle.-size-sm {\n  width: var(--instui-component-progress-circle-small-size);\n  height: var(--instui-component-progress-circle-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n.pfx-progress-circle.-size-lg {\n  width: var(--instui-component-progress-circle-large-size);\n  height: var(--instui-component-progress-circle-large-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n.pfx-progress-circle.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n.pfx-progress-circle.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n.pfx-progress-circle.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n.pfx-progress-circle.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n.pfx-progress-circle.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n.pfx-progress-circle.-color-primary-inverse {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n  color: var(--instui-component-progress-circle-color-inverse);\n}\n";
+const progress$1 = "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks The value label is a separate sibling element (`.pfx-progress-value`), not a child of the bar.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @accessibility Expose progress via `role=\"progressbar\"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` (or `role=\"img\"` plus `aria-label`), mirroring how progress-circle is labelled.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * <div class=\"pfx-progress -color-brand\">\n *   <div class=\"bar\"></div>\n * </div>\n * @related progress-circle — The circular form of the same determinate progress.\n */\n.pfx-progress {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: var(--instui-component-progress-bar-medium-height);\n  background: var(--instui-component-progress-bar-track-color);\n  /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n  border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n    var(--instui-component-progress-bar-border-color);\n  border-radius: var(--instui-component-progress-bar-border-radius);\n  overflow: hidden;\n}\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n   border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n   the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n  content: \"\";\n  position: absolute;\n  inset-inline: 0;\n  bottom: 0;\n  height: var(--instui-component-progress-bar-track-bottom-border-width);\n  background: var(--instui-component-progress-bar-track-bottom-border-color);\n  pointer-events: none;\n}\n.pfx-progress.-size-xs {\n  height: var(--instui-component-progress-bar-x-small-height);\n}\n.pfx-progress.-size-sm {\n  height: var(--instui-component-progress-bar-small-height);\n}\n.pfx-progress.-size-lg {\n  height: var(--instui-component-progress-bar-large-height);\n}\n@scope (.pfx-progress) {\n  :scope > .bar {\n    height: 100%;\n    background: var(--instui-color-background-brand);\n    border-radius: var(--instui-component-progress-bar-border-radius);\n  }\n  :scope.-should-animate > .bar {\n    transition: width 0.5s ease;\n  }\n}\n.pfx-progress.-color-brand .bar {\n  background: var(--instui-color-background-brand);\n}\n.pfx-progress.-color-info .bar {\n  background: var(--instui-color-background-info);\n}\n.pfx-progress.-color-success .bar {\n  background: var(--instui-color-background-success);\n}\n.pfx-progress.-color-warning .bar {\n  background: var(--instui-color-background-warning);\n}\n.pfx-progress.-color-danger .bar {\n  background: var(--instui-color-background-error);\n}\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n   InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n   wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n  background: var(--instui-component-progress-bar-track-color-inverse);\n  border-color: var(--instui-component-progress-bar-border-color-inverse);\n  color: var(--instui-component-progress-bar-text-color-inverse);\n}\n.pfx-progress.-color-primary-inverse::after {\n  background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n.pfx-progress.-color-primary-inverse .bar {\n  background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n.pfx-progress-value {\n  padding: 0 var(--instui-component-progress-bar-value-padding);\n  color: var(--instui-component-progress-bar-text-color);\n  font-family: var(--instui-component-progress-bar-font-family);\n  font-size: var(--instui-component-progress-bar-medium-value-font-size);\n  font-weight: var(--instui-component-progress-bar-font-weight);\n  line-height: var(--instui-component-progress-bar-line-height);\n}\n.pfx-progress.-color-inverse ~ .pfx-progress-value,\n.pfx-progress-value.-color-inverse {\n  color: var(--instui-component-progress-bar-text-color-inverse);\n}\n";
+const radioInputGroup$1 = "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n *   legend {}\n *   .pfx-radio.-variant-toggle {\n *     input {}\n *   }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n.pfx-radio-input-group > legend {\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-radio-input-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n  flex-flow: row wrap;\n  align-items: center;\n  column-gap: var(--instui-spacing-space-md);\n}\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n  flex-basis: 100%;\n}\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n   no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n   own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n   isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n  flex-flow: row wrap;\n  align-items: center;\n  gap: 0;\n}\n.pfx-radio-input-group.-variant-toggle > legend {\n  flex-basis: 100%;\n}\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n  z-index: 1;\n}\n";
+const radio$1 = "/**\n * @component radio\n * @summary A native radio button and its label.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-radio-input-gap);\n  color: var(--instui-component-radio-input-label-base-color);\n  font-family: var(--instui-component-radio-input-font-family);\n  font-size: var(--instui-component-radio-input-font-size-md);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  line-height: var(--instui-component-radio-input-line-height-md);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-radio-input-control-size-md);\n  height: var(--instui-component-radio-input-control-size-md);\n  margin-block: var(--instui-component-radio-input-control-vertical-margin);\n  border: var(--instui-component-radio-input-border-width) solid\n    var(--instui-component-radio-input-border-color);\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-background-color);\n  cursor: pointer;\n  transition:\n    border-color 0.15s ease,\n    background-color 0.15s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n  content: \"\";\n  width: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-border-selected-color);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n  border-color: var(--instui-component-radio-input-border-hover-color);\n  background: var(--instui-component-radio-input-background-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n  border-color: var(--instui-component-radio-input-border-selected-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n  transform: scale(1);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n  border-color: var(--instui-component-radio-input-border-disabled-color);\n  background: var(--instui-component-radio-input-background-disabled-color);\n  cursor: not-allowed;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n  color: var(--instui-component-radio-input-label-disabled-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n  color: var(--instui-component-radio-input-label-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n  font-size: var(--instui-component-radio-input-font-size-lg);\n  line-height: var(--instui-component-radio-input-line-height-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-lg);\n  height: var(--instui-component-radio-input-control-size-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n  color: var(--instui-component-radio-input-label-readonly-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n  border-color: var(--instui-component-radio-input-border-readonly-color);\n  background: var(--instui-component-radio-input-background-readonly-color);\n}\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n   uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n   NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n   rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n   one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n  position: relative;\n  justify-content: center;\n  gap: 0;\n  height: var(--instui-component-radio-input-toggle-medium-height);\n  padding-inline: 0.875rem;\n  border-radius: var(--instui-component-radio-input-toggle-border-radius);\n  background: transparent;\n  color: var(--instui-component-radio-input-label-base-color);\n  font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n.pfx-radio.-variant-toggle.-context-off {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n.pfx-radio.-variant-toggle.-context-success {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n.pfx-radio.-variant-toggle.-context-danger {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n.pfx-radio.-variant-toggle.-context-warning {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n  background: var(--pantoken-rt-fill);\n  color: var(--instui-component-radio-input-toggle-handle-text);\n  box-shadow: var(--instui-elevation-depth1);\n}\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n  text-decoration: underline;\n}\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n  content: \"\";\n  position: absolute;\n  inset: -0.25rem;\n  border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n  pointer-events: none;\n}\n.pfx-radio.-variant-toggle:has(input:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.pfx-radio.-variant-toggle.-size-sm {\n  height: var(--instui-component-radio-input-toggle-small-height);\n  font-size: var(--instui-component-radio-input-toggle-small-font-size);\n  padding-inline: 0.5rem;\n}\n.pfx-radio.-variant-toggle.-size-lg {\n  height: var(--instui-component-radio-input-toggle-large-height);\n  font-size: var(--instui-component-radio-input-toggle-large-font-size);\n  padding-inline: 1rem;\n}\n";
+const rangeInput$1 = "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n  -webkit-appearance: none;\n  appearance: none;\n  inline-size: 100%;\n  min-inline-size: var(--instui-component-range-input-min-width);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n.pfx-range-input::-webkit-slider-runnable-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n.pfx-range-input::-moz-range-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n  outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n     the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n  align-self: center;\n  margin-inline-start: 0.5rem;\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-component-range-input-value-medium-padding);\n  font-family: var(--instui-component-range-input-value-font-family);\n  font-size: var(--instui-component-range-input-value-medium-font-size);\n  font-weight: var(--instui-component-range-input-value-font-weight);\n  line-height: 1;\n}\n.pfx-range-input-value::before {\n  content: \"\";\n  position: absolute;\n  inset-inline-start: -0.375rem;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  border-block: 0.375rem solid transparent;\n  border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n  border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n  padding: var(--instui-component-range-input-value-small-padding);\n  font-size: var(--instui-component-range-input-value-small-font-size);\n  line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n  padding: var(--instui-component-range-input-value-large-padding);\n  font-size: var(--instui-component-range-input-value-large-font-size);\n  line-height: var(--instui-component-range-input-value-large-line-height);\n}\n";
+const rating$1 = "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n *   <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n *   <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n *   [class*=\"-icon-\"] {}\n *   .label {}\n * }\n */\n.pfx-rating {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-rating-icon-icon-margin);\n  font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n  color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n  font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n  font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n  /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n  .-icon-star-solid {\n    color: var(--instui-component-rating-icon-icon-filled-color);\n  }\n\n  /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n  :scope > .label {\n    margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n    color: var(--instui-color-text-base);\n    font-family: var(--instui-font-family-base);\n    font-size: var(--instui-font-size-text-base);\n  }\n}\n";
+const select = "/* Experimental: CSS Customizable Select (`appearance: base-select`, Chrome 135+, not yet Baseline).\n   Enhances .pfx-simple-select; degrades to the plain control where unsupported. */\n@supports (appearance: base-select) {\n  .pfx-simple-select,\n  .pfx-simple-select::picker(select) {\n    appearance: base-select;\n  }\n  /* Keep simple-select's own background-image caret; hide the UA-generated picker icon. */\n  .pfx-simple-select::picker-icon {\n    display: none;\n  }\n  .pfx-simple-select::picker(select) {\n    border: var(--instui-component-select-popover-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-border-radius-lg);\n    box-shadow: var(--instui-elevation-topmost);\n    background-color: var(--instui-component-options-item-background);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n  }\n  .pfx-simple-select option {\n    padding: var(--instui-component-options-item-padding-vertical)\n      var(--instui-component-options-item-padding-horizontal);\n    background-color: var(--instui-component-options-item-background);\n    color: var(--instui-component-options-item-color);\n    font-family: var(--instui-component-options-item-font-family);\n    font-weight: var(--instui-component-options-item-font-weight);\n    font-size: var(--instui-component-options-item-font-size);\n    line-height: var(--instui-component-options-item-line-height);\n    cursor: pointer;\n  }\n  /* Hide the UA checkmark; the selected row gets our own trailing check via background-image. */\n  .pfx-simple-select option::checkmark {\n    display: none;\n  }\n  .pfx-simple-select option:hover,\n  .pfx-simple-select option:focus {\n    background-color: var(--instui-component-options-item-highlighted-background);\n    color: var(--instui-component-options-item-highlighted-label-color);\n    outline: none;\n  }\n  .pfx-simple-select option:checked {\n    background-color: var(--instui-component-options-item-selected-background);\n    color: var(--instui-component-options-item-selected-label-color);\n    font-weight: var(--instui-component-options-item-font-weight-selected);\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right var(--instui-component-options-item-padding-horizontal) center;\n    background-size: 1rem 1rem;\n    padding-inline-end: calc(var(--instui-component-options-item-padding-horizontal) + 1.5rem);\n  }\n}\n";
+const sideNavBar$1 = "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @modifier -minimized — Collapse to icons only (labels hidden).\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .item — A navigation entry; `-selected` marks the active one.\n * @part .label — An item's text label; hidden when the rail is minimized.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n * @structure\n * .pfx-side-nav-bar {\n *   .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n@scope (.pfx-side-nav-bar) {\n  :scope > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n";
+const spinner$1 = "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * <span class=\"pfx-spinner -size-xs\" role=\"status\" aria-label=\"Loading\"></span>\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.pfx-spinner {\n  display: inline-block;\n  width: var(--instui-component-spinner-spinner-size-md);\n  height: var(--instui-component-spinner-spinner-size-md);\n  border: var(--instui-component-spinner-stroke-width-md) solid\n    var(--instui-component-spinner-track-color);\n  border-top-color: var(--instui-component-spinner-color);\n  border-radius: 50%;\n  animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n.pfx-spinner.-size-xs {\n  width: var(--instui-component-spinner-spinner-size-xs);\n  height: var(--instui-component-spinner-spinner-size-xs);\n  border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n.pfx-spinner.-size-sm {\n  width: var(--instui-component-spinner-spinner-size-sm);\n  height: var(--instui-component-spinner-spinner-size-sm);\n  border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n.pfx-spinner.-size-lg {\n  width: var(--instui-component-spinner-spinner-size-lg);\n  height: var(--instui-component-spinner-spinner-size-lg);\n  border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n.pfx-spinner.-color-inverse {\n  border-top-color: var(--instui-component-spinner-inverse-color);\n}\n";
+const table$1 = "/**\n * @component table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`.\n * @modifier -hover — Highlight rows on hover.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`.\n * @pseudo ::before — Renders each cell's `data-label` as its column heading in the stacked layout.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n *   <caption>Top-rated films</caption>\n *   <thead>\n *     <tr>\n *       <th scope=\"col\">Rank</th>\n *       <th scope=\"col\">Title</th>\n *       <th scope=\"col\">Year</th>\n *       <th scope=\"col\">Rating</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <th scope=\"row\">1</th>\n *       <td>The Shawshank Redemption</td>\n *       <td>1994</td>\n *       <td>9.3</td>\n *     </tr>\n *     <tr>\n *       <th scope=\"row\">2</th>\n *       <td>The Godfather</td>\n *       <td>1972</td>\n *       <td>9.2</td>\n *     </tr>\n *     <tr>\n *       <th scope=\"row\">3</th>\n *       <td>The Godfather: Part II</td>\n *       <td>1974</td>\n *       <td>9.0</td>\n *     </tr>\n *   </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n *   caption {}\n *   thead {\n *     tr {\n *       th {}\n *     }\n *   }\n *   tbody {\n *     tr {\n *       th {}\n *       td {}\n *     }\n *   }\n * }\n */\n.pfx-table {\n  border-collapse: collapse;\n  width: 100%;\n  background: var(--instui-component-table-background);\n  color: var(--instui-component-table-color);\n  font-family: var(--instui-component-table-font-family);\n  font-size: var(--instui-component-table-font-size);\n}\n.pfx-table caption {\n  text-align: start;\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n}\n/* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n.pfx-table.-layout-fixed {\n  table-layout: fixed;\n}\n.pfx-table thead {\n  background: var(--instui-component-table-head-background);\n}\n.pfx-table th {\n  text-align: start;\n  background: var(--instui-component-table-col-header-background);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n  line-height: var(--instui-component-table-col-header-line-height);\n  padding: var(--instui-component-table-col-header-padding-vertical)\n    var(--instui-component-table-col-header-padding-horizontal);\n}\n/* The column-header underline lives on the head only — a distinct 2px rule under the header row. */\n.pfx-table thead th {\n  border-bottom: var(--instui-border-width-md) solid var(--instui-component-table-row-border-color);\n}\n/* A row-header cell (th scope=row) — styled from the row-header tokens, not the column-header ones. */\n.pfx-table tbody th,\n.pfx-table th[scope=\"row\"] {\n  background: var(--instui-component-table-row-header-background);\n  color: var(--instui-component-table-row-header-color);\n  font-weight: var(--instui-component-table-row-header-font-weight);\n  line-height: var(--instui-component-table-row-header-line-height);\n  padding: var(--instui-component-table-row-header-padding-vertical)\n    var(--instui-component-table-row-header-padding-horizontal);\n}\n.pfx-table td {\n  color: var(--instui-component-table-cell-color);\n  line-height: var(--instui-component-table-cell-line-height);\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n}\n/* Body cells carry no border of their own — the separator lives on the row. Reset with tbody\n   specificity (0,1,2) so a host stylesheet's cell borders (e.g. `.pantoken-prose td`, 0,1,1) can't leak\n   in and double the row line (very visible in the stacked layout, where cells are display:block). */\n.pfx-table tbody td,\n.pfx-table tbody th {\n  border: 0;\n}\n/* The row separator is a single border on the ROW (InstUI puts it there), so it's uniform across the\n   row-header and data cells — no mismatched per-cell borders. */\n.pfx-table tbody tr {\n  border-bottom: var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color);\n}\n/* hover=\"true\" (InstUI's opt-in `hover` prop): every row reserves a transparent 3px inline border and\n   colours it with the brand hover-border on hover — a vertical bar on each edge, NOT a full box, and\n   no layout shift. Only rows in a `.-hover` table react. */\n.pfx-table.-hover tbody tr {\n  border-inline: 0.1875rem solid transparent;\n}\n.pfx-table.-hover tbody tr:hover {\n  border-inline-color: var(--instui-component-table-row-hover-border-color);\n}\n/* layout=\"stacked\": each row becomes a card and cells stack, labelled by their column. InstUI does this\n   by re-rendering the DOM; pure CSS can't pull the <th> text into each cell, so the author supplies a\n   `data-label` per cell and it's shown via ::before. Always-on (toggle the class responsively). */\n.pfx-table.-layout-stacked thead {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n.pfx-table.-layout-stacked,\n.pfx-table.-layout-stacked tbody,\n.pfx-table.-layout-stacked tr,\n.pfx-table.-layout-stacked td,\n.pfx-table.-layout-stacked th {\n  display: block;\n  width: auto;\n}\n/* InstUI's stacked row is just padding + the single bottom-border separator (the row's existing\n   border-bottom carries over) — NOT a full card box. */\n.pfx-table.-layout-stacked tbody tr {\n  padding: var(--instui-component-table-row-padding-vertical)\n    var(--instui-component-table-row-padding-horizontal);\n}\n.pfx-table.-layout-stacked tbody td[data-label]::before,\n.pfx-table.-layout-stacked tbody th[data-label]::before {\n  content: attr(data-label);\n  display: block;\n  font-weight: var(--instui-component-table-head-font-weight);\n  color: var(--instui-component-table-col-header-color);\n}\n";
+const tabs$1 = "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks Selected and disabled styling matches either the `-selected`/`-disabled` class or the `aria-selected`/`aria-disabled` attribute, so you can drive state from markup or from ARIA.\n * @part .list — The row of tabs.\n * @part .tab — A single tab; `-selected` marks the active one.\n * @part .panel — The content panel for a tab.\n * @cssstate selected\n * @cssstate disabled\n * @cssstate hidden\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab {}\n *   }\n *   .panel {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n@scope (.pfx-tabs) {\n  :scope > .list {\n    display: flex;\n    width: 100%;\n    flex-flow: row wrap;\n  }\n  :scope.-overflow-scroll > .list {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n  :scope.-overflow-scroll > .list::-webkit-scrollbar {\n    display: none;\n  }\n  .tab {\n    appearance: none;\n    -webkit-appearance: none;\n    background: transparent;\n    border: 0;\n    color: var(--instui-component-tabs-tab-default-text-color);\n    font-family: var(--instui-component-tabs-tab-font-family);\n    font-size: var(--instui-component-tabs-tab-font-size);\n    font-weight: var(--instui-component-tabs-tab-font-weight);\n    line-height: 1;\n    padding: 1rem 1.25rem;\n    cursor: pointer;\n    user-select: none;\n    white-space: nowrap;\n    position: relative;\n    z-index: 1;\n    /* Layout-stable underline: always 0.25rem, coloured only when hovered or selected. */\n    border-bottom: 0.25rem solid transparent;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n  }\n  .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n    [aria-disabled=\"true\"]\n  ) {\n    border-bottom-color: var(--instui-component-tabs-tab-default-hover-border-color);\n  }\n  .tab.-selected,\n  .tab[aria-selected=\"true\"] {\n    border-bottom-color: var(--instui-component-tabs-tab-default-selected-border-color);\n  }\n  .tab.-disabled,\n  .tab[aria-disabled=\"true\"],\n  .tab:disabled {\n    opacity: 0.5;\n    font-weight: normal;\n    cursor: default;\n  }\n  /* Secondary variant: rounded \"folder\" tabs; the selected tab's bottom border matches the panel\n   background so it visually connects into the panel below. */\n  :scope.-variant-secondary .tab {\n    padding: 0.75rem 1rem;\n    line-height: var(--instui-component-tabs-tab-line-height);\n    color: var(--instui-component-tabs-tab-secondary-text-color);\n    margin-inline-end: 0.2em;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n    border: var(--instui-component-tabs-panel-border-width) solid transparent;\n    border-radius: 0.1875rem 0.1875rem 0 0;\n  }\n  :scope.-variant-secondary .tab:first-of-type {\n    margin-inline-start: 0;\n  }\n  :scope.-variant-secondary\n    .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n      [aria-disabled=\"true\"]\n    ) {\n    background: var(--instui-component-tabs-tab-secondary-selected-background);\n    border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n    color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n  }\n  :scope.-variant-secondary .tab.-selected,\n  :scope.-variant-secondary .tab[aria-selected=\"true\"] {\n    background: var(--instui-component-tabs-tab-secondary-selected-background);\n    border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n    border-bottom-color: var(--instui-component-tabs-tab-secondary-selected-background);\n    color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n  }\n  :scope > .panel {\n    box-sizing: border-box;\n    border-top: var(--instui-component-tabs-panel-border-width) solid\n      var(--instui-component-tabs-panel-border-color);\n    background: var(--instui-component-tabs-panel-background);\n    color: var(--instui-component-tabs-panel-text-color);\n    font-family: var(--instui-component-tabs-panel-font-family);\n    font-size: var(--instui-component-tabs-panel-font-size);\n    font-weight: var(--instui-component-tabs-panel-font-weight);\n    line-height: var(--instui-component-tabs-panel-line-height);\n    padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n      var(--instui-spacing-space-md);\n  }\n  :scope > .panel[hidden] {\n    display: none;\n  }\n}\n";
+const tag$1 = "/**\n * @component tag\n * @summary An inline chip for a keyword or filter.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n.pfx-tag {\n  display: inline-flex;\n  align-items: center;\n  height: var(--instui-component-tag-height-medium);\n  max-width: var(--instui-component-tag-max-width);\n  padding: 0 var(--instui-component-tag-padding-horizontal);\n  background: var(--instui-component-tag-default-background);\n  color: var(--instui-component-tag-default-color);\n  border: var(--instui-component-tag-default-border-width)\n    var(--instui-component-tag-default-border-style)\n    var(--instui-component-tag-default-border-color);\n  border-radius: var(--instui-component-tag-default-border-radius);\n  font-family: var(--instui-component-tag-font-family);\n  font-size: var(--instui-component-tag-font-size-medium);\n}\n.pfx-tag:hover {\n  background: var(--instui-component-tag-default-background-hover);\n}\n.pfx-tag.-size-sm {\n  height: var(--instui-component-tag-height-small);\n  padding: 0 var(--instui-component-tag-padding-horizontal-small);\n  font-size: var(--instui-component-tag-font-size-small);\n}\n.pfx-tag.-size-lg {\n  height: var(--instui-component-tag-height-large);\n  font-size: var(--instui-component-tag-font-size-large);\n}\n.pfx-tag.-inline {\n  gap: var(--instui-spacing-space-xs);\n  background: var(--instui-component-tag-inline-background);\n  color: var(--instui-component-tag-inline-color);\n  border-color: var(--instui-component-tag-inline-border-color);\n  border-radius: var(--instui-component-tag-inline-border-radius);\n  cursor: pointer;\n}\n.pfx-tag.-inline:hover {\n  background: var(--instui-component-tag-inline-background-hover);\n}\n.pfx-tag.-inline::after {\n  content: \"\";\n  flex: none;\n  width: 1em;\n  height: 1em;\n  background: var(--instui-component-tag-inline-icon-color);\n  -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n  mask: var(--instui-icon-x) center / contain no-repeat;\n}\n.pfx-tag.-inline:hover::after {\n  background: var(--instui-component-tag-inline-icon-hover-color);\n}\n/* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n.pfx-tag.-readonly {\n  cursor: default;\n  background: var(--instui-component-tag-default-background);\n}\n.pfx-tag.-readonly.-inline::after {\n  display: none;\n}\n";
+const text$1 = "/**\n * @component text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — AI-accent text colour.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * <span class=\"pfx-text -size-xs\">x-small text</span>\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n */\n.pfx-text {\n  font-family: var(--instui-component-text-content-font-family);\n  color: var(--instui-component-text-base-color);\n  font-size: var(--instui-component-text-font-size-medium);\n  font-weight: var(--instui-component-text-font-weight-normal);\n  line-height: var(--instui-component-text-content-line-height);\n}\n.pfx-text.-size-xs {\n  font-size: var(--instui-component-text-font-size-x-small);\n}\n.pfx-text.-size-sm {\n  font-size: var(--instui-component-text-font-size-small);\n}\n.pfx-text.-size-lg {\n  font-size: var(--instui-component-text-font-size-large);\n}\n.pfx-text.-size-xl {\n  font-size: var(--instui-component-text-font-size-x-large);\n}\n.pfx-text.-weight-bold {\n  font-weight: var(--instui-component-text-font-weight-bold);\n}\n.pfx-text.-style-italic {\n  font-style: italic;\n}\n.pfx-text.-color-secondary {\n  color: var(--instui-component-text-muted-color);\n}\n.pfx-text.-color-brand {\n  color: var(--instui-component-text-primary-color);\n}\n.pfx-text.-color-success {\n  color: var(--instui-component-text-success-color);\n}\n.pfx-text.-color-danger {\n  color: var(--instui-component-text-error-color);\n}\n.pfx-text.-color-warning {\n  color: var(--instui-component-text-warning-color);\n}\n.pfx-text.-color-primary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n.pfx-text.-color-ai {\n  color: var(--instui-component-text-ai-color);\n  background: var(--instui-component-text-ai-background-color);\n}\n.pfx-text.-variant-description-page {\n  font-size: var(--instui-component-text-description-page-font-size);\n  line-height: var(--instui-component-text-description-page-line-height);\n}\n.pfx-text.-variant-description-section {\n  font-size: var(--instui-component-text-description-section-font-size);\n  line-height: var(--instui-component-text-description-section-line-height);\n}\n.pfx-text.-variant-content-small {\n  font-size: var(--instui-component-text-content-small-font-size);\n  line-height: var(--instui-component-text-content-small-line-height);\n}\n.pfx-text.-variant-legend {\n  font-size: var(--instui-component-text-legend-font-size);\n  line-height: var(--instui-component-text-legend-line-height);\n}\n.pfx-text.-transform-uppercase {\n  text-transform: uppercase;\n}\n.pfx-text.-transform-lowercase {\n  text-transform: lowercase;\n}\n.pfx-text.-transform-capitalize {\n  text-transform: capitalize;\n}\n";
+const toggleDetails$1 = "/**\n * @component toggle-details\n * @summary A styled native `<details>` disclosure with a rotating chevron.\n * @remarks Built on the native `<details>` element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.\n * @modifier -variant-filled — Filled (surface) variant.\n * @modifier -chevron-end — Place the chevron after the summary.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-details\" open>\n *   <summary>What ships in this package?</summary>\n *   Class-based component styles, built from the Instructure tokens, plus a prose layer.\n * </details>\n * @structure\n * .pfx-toggle-details {\n *   summary {}\n * }\n * @related toggle-group — The bordered, grouped form of the same disclosure.\n */\n.pfx-toggle-details {\n  color: var(--instui-component-toggle-details-text-color);\n  font-family: var(--instui-component-toggle-details-font-family);\n  font-weight: var(--instui-component-toggle-details-font-weight);\n  line-height: var(--instui-component-toggle-details-line-height);\n}\n.pfx-toggle-details > summary {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-toggle-details-icon-margin);\n  cursor: pointer;\n  list-style: none;\n  font-size: var(--instui-component-toggle-details-font-size-medium);\n  padding: var(--instui-component-toggle-details-toggle-padding);\n  color: var(--instui-component-toggle-details-text-color);\n}\n/* Kill the native disclosure marker; we supply a rotating chevron. */\n.pfx-toggle-details > summary::-webkit-details-marker {\n  display: none;\n}\n.pfx-toggle-details > summary::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n  -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n  mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n  transition: transform 0.2s ease;\n}\n.pfx-toggle-details[open] > summary::before {\n  transform: rotate(90deg);\n}\n/* iconPosition=\"end\" (named -chevron-end, NOT -icon-position-end — a \"-icon-\" class would collide with the\n   generic [class*=\"-icon-\"] glyph painter): push the disclosure chevron to the inline-end. */\n.pfx-toggle-details.-chevron-end > summary::before {\n  order: 1;\n  margin-inline-start: auto;\n}\n/* variant=\"filled\": the summary reads as an action-secondary button. */\n.pfx-toggle-details.-variant-filled > summary {\n  background: var(--instui-color-background-interactive-action-secondary-base);\n  border-radius: var(--instui-component-toggle-details-toggle-border-radius);\n}\n.pfx-toggle-details > :not(summary) {\n  padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-details.-size-sm > summary {\n  font-size: var(--instui-component-toggle-details-font-size-small);\n}\n.pfx-toggle-details.-size-sm > :not(summary) {\n  padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-details.-size-lg > summary {\n  font-size: var(--instui-component-toggle-details-font-size-large);\n}\n.pfx-toggle-details.-size-lg > :not(summary) {\n  padding: var(--instui-component-toggle-details-content-padding-large);\n}\n";
+const toggleGroup$1 = "/**\n * @component toggle-group\n * @summary A bordered disclosure built on `<details>`: a chevron summary row and collapsible content.\n * @remarks Built on the same native `<details>` foundation as toggle-details; put the `<summary>` first so it becomes the clickable header row and the rest is the collapsible content.\n * @modifier -without-border — Remove the border.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary row's disclosure chevron, a masked glyph that rotates to point down when the group is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-group\" open>\n *   <summary>Advanced settings</summary>\n *   <div>These options are revealed when the group is expanded. The header row carries a chevron that rotates on open, and the content sits below a divider.</div>\n * </details>\n * @structure\n * .pfx-toggle-group {\n *   summary {}\n *   div {}\n * }\n * @related toggle-details — The single, unbordered form of the same disclosure.\n */\n.pfx-toggle-group {\n  display: block;\n  border: var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);\n  border-radius: var(--instui-border-radius-md);\n  background: var(--instui-color-background-elevated-surface-base);\n  color: var(--instui-component-toggle-details-text-color);\n  font-family: var(--instui-component-toggle-details-font-family);\n  font-weight: var(--instui-component-toggle-details-font-weight);\n  line-height: var(--instui-component-toggle-details-line-height);\n  overflow: hidden;\n}\n.pfx-toggle-group > summary {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-toggle-details-icon-margin);\n  cursor: pointer;\n  list-style: none;\n  padding: var(--instui-component-toggle-details-content-padding-medium);\n  font-size: var(--instui-component-toggle-details-font-size-medium);\n}\n.pfx-toggle-group > summary::-webkit-details-marker {\n  display: none;\n}\n.pfx-toggle-group > summary::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n  -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n  mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n  transition: transform 0.2s ease;\n}\n.pfx-toggle-group[open] > summary::before {\n  transform: rotate(90deg);\n}\n/* the collapsible content: separated from the header by a top border in the group colour */\n.pfx-toggle-group > :not(summary) {\n  border-block-start: var(--instui-border-width-sm) solid\n    var(--instui-component-toggle-group-border-color);\n  padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-group.-size-sm > summary,\n.pfx-toggle-group.-size-sm > :not(summary) {\n  font-size: var(--instui-component-toggle-details-font-size-small);\n  padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-group.-size-lg > summary,\n.pfx-toggle-group.-size-lg > :not(summary) {\n  font-size: var(--instui-component-toggle-details-font-size-large);\n  padding: var(--instui-component-toggle-details-content-padding-large);\n}\n/* border={false} */\n.pfx-toggle-group.-without-border {\n  border: 0;\n}\n.pfx-toggle-group.-without-border > :not(summary) {\n  border-block-start: 0;\n}\n";
+const tooltip$1 = "/**\n * @component tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n *   <span class=\"pfx-icon -icon-info\"></span>\n *   <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * @structure\n * .pfx-tooltip {\n *   [class*=\"-icon-\"]:optional {}\n *   .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n.pfx-tooltip {\n  position: relative;\n  display: inline-flex;\n}\n\n@scope (.pfx-tooltip) {\n  :scope > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .tip {\n    position: absolute;\n    z-index: 1;\n    inset-block-end: 100%;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n    margin-block-end: var(--instui-spacing-space-xs);\n    padding: var(--instui-component-tooltip-padding);\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-radius: var(--instui-border-radius-sm);\n    font-family: var(--instui-component-tooltip-font-family);\n    font-size: var(--instui-component-tooltip-font-size);\n    font-weight: var(--instui-component-tooltip-font-weight);\n    white-space: nowrap;\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n  }\n}\n\n/* Show on hover or keyboard focus of the trigger. */\n.pfx-tooltip:hover > .tip,\n.pfx-tooltip:focus-within > .tip {\n  opacity: 1;\n  visibility: visible;\n}\n\n/* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n   bubble to the other sides. */\n.pfx-tooltip > .tip.-placement-bottom {\n  inset-block: 100% auto;\n  margin-block: var(--instui-spacing-space-xs) 0;\n}\n\n.pfx-tooltip > .tip.-placement-start {\n  inset-block-end: auto;\n  inset-inline: auto 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0 var(--instui-spacing-space-xs) 0 0;\n}\n\n.pfx-tooltip > .tip.-placement-end {\n  inset-block-end: auto;\n  inset-inline: 100% auto;\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0 0 0 var(--instui-spacing-space-xs);\n}\n";
+const tray$1 = "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * <div class=\"pfx-tray -size-sm\" id=\"tray-start\">\n *   <div>\n *     <strong>Filters</strong>\n *     <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n *   </div>\n *   <p class=\"pfx-text -size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * @structure\n * .pfx-tray {\n *   div {\n *     strong {}\n *     .pfx-close-button {}\n *   }\n *   .pfx-text {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n.pfx-tray {\n  position: fixed;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: var(--instui-component-tray-width-md);\n  max-inline-size: 100%;\n  /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n     height:fit-content; so the edge shadows fall outside the viewport. */\n  block-size: auto;\n  max-block-size: none;\n  background: var(--instui-component-tray-background-color);\n  border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n  padding: var(--instui-component-tray-padding);\n  z-index: var(--instui-component-tray-z-index);\n  box-shadow: var(--instui-elevation-topmost);\n}\n.pfx-tray.-placement-end {\n  inset-inline: auto 0;\n}\n.pfx-tray.-placement-top {\n  inset: 0 0 auto 0;\n  inline-size: 100%;\n  block-size: auto;\n}\n.pfx-tray.-placement-bottom {\n  inset: auto 0 0 0;\n  inline-size: 100%;\n  block-size: auto;\n}\n.pfx-tray.-size-xs {\n  inline-size: var(--instui-component-tray-width-xs);\n}\n.pfx-tray.-size-sm {\n  inline-size: var(--instui-component-tray-width-sm);\n}\n.pfx-tray.-size-lg {\n  inline-size: var(--instui-component-tray-width-lg);\n}\n.pfx-tray.-size-xl {\n  inline-size: var(--instui-component-tray-width-xl);\n}\n[popover].pfx-tray {\n  margin: 0;\n}\ndialog.pfx-tray {\n  margin: 0;\n  padding: var(--instui-component-tray-padding);\n  border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n/* Slide in from the docked edge on open (native popover + @starting-style, no JS). The transform is\n   keyed to placement; inert where allow-discrete transitions aren't supported. */\n@supports (transition-behavior: allow-discrete) {\n  [popover].pfx-tray {\n    transition:\n      transform 0.2s ease,\n      overlay 0.2s allow-discrete,\n      display 0.2s allow-discrete;\n    transform: translateX(0);\n  }\n  [popover].pfx-tray:not(:popover-open) {\n    transform: translateX(-100%);\n  }\n  @starting-style {\n    [popover].pfx-tray:popover-open {\n      transform: translateX(-100%);\n    }\n  }\n  [popover].pfx-tray.-placement-end:not(:popover-open) {\n    transform: translateX(100%);\n  }\n  @starting-style {\n    [popover].pfx-tray.-placement-end:popover-open {\n      transform: translateX(100%);\n    }\n  }\n  [popover].pfx-tray.-placement-top:not(:popover-open) {\n    transform: translateY(-100%);\n  }\n  @starting-style {\n    [popover].pfx-tray.-placement-top:popover-open {\n      transform: translateY(-100%);\n    }\n  }\n  [popover].pfx-tray.-placement-bottom:not(:popover-open) {\n    transform: translateY(100%);\n  }\n  @starting-style {\n    [popover].pfx-tray.-placement-bottom:popover-open {\n      transform: translateY(100%);\n    }\n  }\n}\n";
+const treeBrowser$1 = "/**\n * @component tree-browser\n * @summary A disclosure tree of nested collections and leaf items, with rotating chevrons.\n * @remarks Each collection is a native `<details>`; nesting them inside one another builds the tree, and the browser handles opening and closing every branch.\n * @modifier -icon-* — Render folder/file glyph icons in summaries and leaf items.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .item — A leaf entry in the tree.\n * @pseudo ::before — Draws each collection's disclosure chevron, a masked glyph that rotates to point down when the branch is open.\n * @cssstate open\n * @a11y Mark the root with role=\"tree\" and each nested list with role=\"group\".\n * @example\n * <div class=\"pfx-tree-browser\" role=\"tree\">\n *   <details open>\n *     <summary><span class=\"pfx-icon -icon-folder\"></span> Course files</summary>\n *     <ul role=\"group\">\n *       <li>\n *         <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Syllabus.pdf</a>\n *       </li>\n *       <li>\n *         <details>\n *           <summary><span class=\"pfx-icon -icon-folder\"></span> Week 1</summary>\n *           <ul role=\"group\">\n *             <li>\n *               <a class=\"item -selected\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Reading.pdf</a>\n *             </li>\n *             <li>\n *               <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Slides.pptx</a>\n *             </li>\n *           </ul>\n *         </details>\n *       </li>\n *       <li>\n *         <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Rubric.docx</a>\n *       </li>\n *     </ul>\n *   </details>\n * </div>\n * @structure\n * .pfx-tree-browser {\n *   details {\n *     summary {\n *       [class*=\"-icon-\"]:optional {}\n *     }\n *     ul {\n *       li {\n *         .item {\n *           [class*=\"-icon-\"]:optional {}\n *         }\n *       }\n *     }\n *   }\n * }\n * @related menu — Both present nested, selectable entries.\n */\n.pfx-tree-browser {\n  border-radius: var(--instui-component-tree-browser-border-radius);\n  font-family: var(--instui-component-tree-browser-tree-collection-font-family);\n  color: var(--instui-component-tree-browser-tree-button-name-text-color);\n}\n\n/* A collection node (a <details><summary>) and a leaf (.item) share the button chrome. */\n.pfx-tree-browser details > summary,\n.pfx-tree-browser .item {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);\n  padding: var(--instui-component-tree-browser-tree-button-base-spacing-medium);\n  font-size: var(--instui-component-tree-browser-tree-button-name-font-size-medium);\n  line-height: var(--instui-component-tree-browser-tree-button-text-line-height);\n  color: var(--instui-component-tree-browser-tree-button-name-text-color);\n  border-radius: var(--instui-component-tree-browser-tree-button-border-radius);\n  cursor: pointer;\n  list-style: none;\n}\n\n.pfx-tree-browser details > summary [class*=\"-icon-\"],\n.pfx-tree-browser .item [class*=\"-icon-\"] {\n  line-height: 1;\n}\n\n.pfx-tree-browser details > summary::-webkit-details-marker {\n  display: none;\n}\n\n/* The disclosure chevron rotates open (same technique as toggle-details). */\n.pfx-tree-browser details > summary::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n  -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n  mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n  transition: transform 0.2s ease;\n}\n\n.pfx-tree-browser details[open] > summary::before {\n  transform: rotate(90deg);\n}\n\n.pfx-tree-browser details > summary:hover,\n.pfx-tree-browser .item:hover {\n  background: var(--instui-component-tree-browser-tree-button-hover-background-color);\n  color: var(--instui-component-tree-browser-tree-button-hover-text-color);\n}\n\n.pfx-tree-browser details > summary.-selected,\n.pfx-tree-browser .item.-selected {\n  background: var(--instui-component-tree-browser-tree-button-selected-background-color);\n  color: var(--instui-component-tree-browser-tree-button-selected-text-color);\n}\n\n/* Nested lists indent; the leaf list carries no bullets. */\n.pfx-tree-browser ul {\n  margin: 0;\n  padding-inline-start: var(--instui-component-tree-browser-tree-collection-base-spacing-medium);\n  list-style: none;\n}\n\n.pfx-tree-browser.-size-sm details > summary,\n.pfx-tree-browser.-size-sm .item {\n  padding: var(--instui-component-tree-browser-tree-button-base-spacing-small);\n  font-size: var(--instui-component-tree-browser-tree-button-name-font-size-small);\n}\n\n.pfx-tree-browser.-size-lg details > summary,\n.pfx-tree-browser.-size-lg .item {\n  padding: var(--instui-component-tree-browser-tree-button-base-spacing-large);\n  font-size: var(--instui-component-tree-browser-tree-button-name-font-size-large);\n}\n";
+const truncate$1 = "/**\n * @component truncate\n * @summary Single-line ellipsis truncation, or a multi-line clamp via `--lines`.\n * @remarks The `-lines` clamp switches to `display: -webkit-box` and reads the `--lines` custom property, so the text wraps to that many lines before it ends in an ellipsis.\n * @modifier -lines — Multi-line clamp; set the line count via the `--lines` custom property (default 2).\n * @compat The `-lines` clamp relies on `-webkit-line-clamp` with `display: -webkit-box`, paired with the standard `line-clamp`.\n * @example\n * <div class=\"pfx-truncate\">This single line keeps going past the edge of its box, so it ends in an ellipsis.</div>\n * @related text — Body typography that this truncates.\n */\n.pfx-truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: var(--instui-component-truncate-text-font-family);\n  line-height: var(--instui-component-truncate-text-line-height);\n}\n.pfx-truncate.-lines {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--lines, 2);\n  line-clamp: var(--lines, 2);\n  white-space: normal;\n  overflow: hidden;\n}\n";
+const icon$1 = "/**\n * @utility icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n.pfx-icon {\n  display: inline-flex;\n}\n[class*=\"-icon-\"]::before {\n  content: \"\";\n  display: inline-block;\n  inline-size: 1em;\n  block-size: 1em;\n  flex: none;\n  vertical-align: -0.125em;\n  background: currentColor;\n  -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n  mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n";
+const mask$1 = "/**\n * @utility mask\n * @summary An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native `<dialog>` (its `::backdrop` is the mask).\n * @modifier -fullscreen — Fixed to the viewport, covering it at a high z-index.\n * @modifier -blur — Blur what's behind the mask with a backdrop-filter.\n * @example\n * <div style=\"position: relative\">\n *   <div class=\"instui-mask\">\n *     <span class=\"instui-spinner\"></span>\n *   </div>\n * </div>\n */\n/* An in-flow overlay for non-modal cases (e.g. a spinner over a card). For a modal, prefer a native\n   <dialog>: its ::backdrop is the mask and reuses the same `--instui-component-mask-background-color`\n   token (see modalRules). */\n.pfx-mask {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--instui-component-mask-background-color);\n}\n.pfx-mask.-fullscreen {\n  position: fixed;\n  z-index: 999;\n}\n.pfx-mask.-blur {\n  backdrop-filter: blur(0.5rem);\n}\n";
+const screenReaderContent$1 = "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n.pfx-screen-reader-content {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n";
+//#endregion
+//#region src/utilities/icon.ts
+const icon = defineUtility({
+	name: "icon",
+	css: (p) => icon$1.replaceAll(SENTINEL, p)
+});
+const iconCss = icon.css;
+//#endregion
+//#region src/utilities/mask.ts
+const mask = defineUtility({
+	name: "mask",
+	css: (p) => mask$1.replaceAll(SENTINEL, p)
+});
+const maskCss = mask.css;
+//#endregion
+//#region src/utilities/screen-reader-content.ts
+const screenReaderContent = defineUtility({
+	name: "screen-reader-content",
+	css: (p) => screenReaderContent$1.replaceAll(SENTINEL, p)
+});
+const screenReaderContentCss = screenReaderContent.css;
+//#endregion
+//#region src/components/alert.ts
+const alert = defineComponent({
+	name: "alert",
+	css: (p) => alert$1.replaceAll(SENTINEL, p)
+});
+const alertCss = alert.css;
+//#endregion
+//#region src/components/avatar.ts
+const avatar = defineComponent({
+	name: "avatar",
+	css: (p) => avatar$1.replaceAll(SENTINEL, p)
+});
+const avatarCss = avatar.css;
+//#endregion
+//#region src/components/badge.ts
+const badge = defineComponent({
+	name: "badge",
+	css: (p) => badge$1.replaceAll(SENTINEL, p)
+});
+const badgeCss = badge.css;
+//#endregion
+//#region src/components/billboard.ts
+const billboard = defineComponent({
+	name: "billboard",
+	css: (p) => billboard$1.replaceAll(SENTINEL, p)
+});
+const billboardCss = billboard.css;
+//#endregion
+//#region src/components/breadcrumb.ts
+const breadcrumb = defineComponent({
+	name: "breadcrumb",
+	css: (p) => breadcrumb$1.replaceAll(SENTINEL, p)
+});
+const breadcrumbCss = breadcrumb.css;
+//#endregion
+//#region src/lib/css.ts
+/**
+* The `css` tagged-template — an identity tag that just returns the interpolated string. Authoring the
+* record builders as `` css`…` `` (rather than a bare template literal) follows the cssdoc convention:
+* `@cssdoc/embedded`'s scanner recognizes a `css`-tagged template as an embedded stylesheet, so the
+* editor / language server and any `.ts`-level lint read the CSS (selectors and all), not just the doc
+* comment. It changes nothing at runtime — the emitted CSS is byte-for-byte what the plain template
+* produced.
+*
+* @module
+*/
+/** Identity tagged-template: rebuild the string from the cooked chunks + interpolated values. */
+const css = (strings, ...values) => strings.reduce((out, chunk, i) => out + (i ? String(values[i - 1]) : "") + chunk, "");
+//#endregion
+//#region src/components/button.ts
+const button = defineComponent({
+	name: "button",
+	css: (p) => css`
+/**
+ * @component button
+ * @summary An accessible action control, styled from the token palette; primary by default.
+ * @remarks The AI variants layer two gradients — a padding-box fill and a border-box stroke — for their frame, and \`-color-ai-secondary\` can't paint gradient text and a fill at once, so its centre stays transparent at rest and fills on hover or active. Ghost hover and active derive a low-opacity, slightly-darkened brand wash rather than using the raw hover-background tokens, which would print same-colour-on-same-colour text.
+ * @modifier -color-secondary — A lower-emphasis secondary action.
+ * @modifier -color-tertiary — A text-style action (no fill or border until hover).
+ * @modifier -color-danger — A destructive action.
+ * @modifier -shape-circle — A round icon button.
+ * @modifier -condensed — Tighter padding for dense toolbars.
+ * @modifier -toggle — A pressed-state toggle button (drive with aria-pressed).
+ * @modifier -without-background — Drop the fill (ghost).
+ * @modifier -color-success — A positive/confirming action.
+ * @modifier -color-ai — An AI action.
+ * @modifier -color-ai-secondary — A lower-emphasis AI action.
+ * @modifier -color-primary-inverse — Primary action for dark backgrounds.
+ * @modifier -size-sm — Small.
+ * @modifier -size-lg — Large.
+ * @modifier -shape-square — A square icon button.
+ * @modifier -display-block — Full-width block button.
+ * @modifier -ghost — Outline (ghost) style: a border in the colour's ghost tokens, no fill.
+ * @modifier -without-border — Remove the border.
+ * @modifier -icon-* — Render a glyph from the icon set before the label (e.g. \`-icon-arrow-right\`), painted in the button's text colour; pair with \`-shape-square\`/\`-shape-circle\` for an icon-only button.
+ * @pseudo ::before — The AI glyph, added automatically to AI buttons and masked in the variant's own colour.
+ * @pseudo ::after — The AI-secondary gradient border ring, masked to just the button's frame.
+ * @cssstate disabled
+ * @cssstate pressed
+ * @a11y Drive the \`-toggle\` variant's pressed state with \`aria-pressed\`, and mark a disabled button with \`aria-disabled\` (or the native \`disabled\`).
+ * @example
+ * <button class="${p}button">Primary</button>
+ * @related close-button — The icon-only dismiss button.
+ * @demo self:button
+ */
+.${p}button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--instui-spacing-space-xs);
+  min-height: var(--instui-component-base-button-medium-height);
+  padding: var(--instui-spacing-space-xs) var(--instui-component-base-button-medium-padding-horizontal);
+  font-family: var(--instui-font-family-base);
+  font-size: var(--instui-component-base-button-medium-font-size);
+  font-weight: var(--instui-font-weight-interactive);
+  line-height: var(--instui-line-height-standalone-text-base);
+  border: var(--instui-border-width-md) solid transparent;
+  border-radius: var(--instui-component-base-button-border-radius);
+  cursor: pointer;
+  background: var(--instui-color-background-interactive-action-primary-base);
+  color: var(--instui-color-text-interactive-action-primary-base);
+}
+.${p}button:hover { background: var(--instui-color-background-interactive-action-primary-hover); }
+.${p}button:active { background: var(--instui-color-background-interactive-action-primary-active); }
+.${p}button:disabled,
+.${p}button[aria-disabled="true"] {
+  background: var(--instui-color-background-interactive-action-primary-disabled);
+  color: var(--instui-color-text-interactive-action-primary-disabled);
+  cursor: not-allowed;
+}
+.${p}button.-color-secondary {
+  background: var(--instui-color-background-interactive-action-secondary-base);
+  color: var(--instui-color-text-interactive-action-secondary-base);
+  border-color: var(--instui-color-stroke-interactive-action-secondary-base);
+}
+.${p}button.-color-secondary:hover {
+  background: var(--instui-color-background-interactive-action-secondary-hover);
+  border-color: var(--instui-color-stroke-interactive-action-secondary-hover);
+}
+.${p}button.-color-secondary:active {
+  background: var(--instui-color-background-interactive-action-secondary-active);
+  border-color: var(--instui-color-stroke-interactive-action-secondary-active);
+}
+.${p}button.-color-danger {
+  background: var(--instui-color-background-interactive-action-destructive-base);
+  color: var(--instui-color-text-interactive-action-status-base);
+}
+.${p}button.-color-danger:hover { background: var(--instui-color-background-interactive-action-destructive-hover); }
+.${p}button.-color-danger:active { background: var(--instui-color-background-interactive-action-destructive-active); }
+.${p}button.-color-success {
+  background: var(--instui-color-background-interactive-action-success-base);
+  color: var(--instui-color-text-interactive-action-status-base);
+}
+.${p}button.-color-success:hover { background: var(--instui-color-background-interactive-action-success-hover); }
+.${p}button.-color-tertiary {
+  background: transparent;
+  color: var(--instui-color-text-interactive-action-tertiary-base);
+  border-color: var(--instui-color-stroke-interactive-action-tertiary-base);
+}
+.${p}button.-color-tertiary:hover { background: var(--instui-color-background-interactive-action-tertiary-hover); }
+.${p}button.-color-tertiary:active { background: var(--instui-color-background-interactive-action-tertiary-active); }
+.${p}button.-color-primary-inverse {
+  background: var(--instui-component-base-button-primary-inverse-background);
+  color: var(--instui-component-base-button-primary-inverse-color);
+  border-color: var(--instui-component-base-button-primary-inverse-border-color);
+}
+/* On hover the border tracks the (light) hover fill, so it reads as no visible border. */
+.${p}button.-color-primary-inverse:hover {
+  background: var(--instui-component-base-button-primary-inverse-hover-background);
+  border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);
+}
+.${p}button.-color-primary-inverse:active {
+  background: var(--instui-component-base-button-primary-inverse-active-background);
+  border-color: var(--instui-component-base-button-primary-on-color-active-border-color);
+}
+/*
+ * AI buttons carry two gradients: the fill (padding-box) and a distinct stroke gradient (border-box)
+ * that shows through the transparent border — InstUI's ai-primary technique. The ai glyph is added
+ * automatically via ::before.
+ */
+.${p}button.-color-ai {
+  color: var(--instui-color-text-interactive-action-ai-base);
+  border-color: transparent;
+  background:
+    linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-background-interactive-action-ai-bottom-gradient-base) 100%) padding-box,
+    linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%) border-box;
+}
+.${p}button.-color-ai:hover {
+  color: var(--instui-color-text-interactive-action-ai-hover);
+  background:
+    linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-top-gradient-hover) 0%, var(--instui-color-background-interactive-action-ai-bottom-gradient-hover) 100%) padding-box,
+    linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-hover) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-hover) 100%) border-box;
+}
+.${p}button.-color-ai:active {
+  color: var(--instui-color-text-interactive-action-ai-active);
+  background:
+    linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-top-gradient-active) 0%, var(--instui-color-background-interactive-action-ai-bottom-gradient-active) 100%) padding-box,
+    linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-active) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-active) 100%) border-box;
+}
+/*
+ * ai-secondary matches InstUI: a transparent rest fill, a violet→sea gradient border ring (::after,
+ * masked to just the frame), and violet→sea gradient text (background-clip: text). The ai glyph
+ * (::before) picks up the same gradient. A single element can't paint gradient text and a fill at
+ * once, so — like InstUI's rest state — the centre stays transparent.
+ */
+.${p}button.-color-ai-secondary {
+  position: relative;
+  border-color: transparent;
+  background: linear-gradient(to bottom, var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base) 0%, var(--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+/*
+ * The ring spans the border-box (outermost) edge, so it isn't inset past the base button's
+ * transparent border. The negative inset reaches out over that border; the radius is inherited, so
+ * it stays concentric with the button's outer corners.
+ */
+.${p}button.-color-ai-secondary::after {
+  content: "";
+  position: absolute;
+  inset: calc(-1 * var(--instui-border-width-md));
+  border-radius: inherit;
+  padding: var(--instui-border-width-sm);
+  background: linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+/*
+ * Hover/active trade the clipped gradient text for InstUI's subtle gradient fill plus solid text —
+ * one element can't paint clipped gradient text and a fill at once, so the interactive states fill.
+ */
+.${p}button.-color-ai-secondary:hover,
+.${p}button.-color-ai-secondary:active {
+  -webkit-background-clip: border-box;
+  background-clip: border-box;
+  color: var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base);
+  -webkit-text-fill-color: currentColor;
+}
+.${p}button.-color-ai-secondary:hover {
+  background: linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-secondary-hover-top-gradient) 0%, var(--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient) 100%);
+}
+.${p}button.-color-ai-secondary:active {
+  background: linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-secondary-active-top-gradient) 0%, var(--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient) 100%);
+}
+/* The ai glyph, added automatically to every AI button and painted in its own colour. */
+.${p}button.-color-ai::before,
+.${p}button.-color-ai-secondary::before {
+  content: "";
+  inline-size: 1em;
+  block-size: 1em;
+  flex: none;
+  -webkit-mask: ${AI_ICON_MASK};
+  mask: ${AI_ICON_MASK};
+}
+.${p}button.-color-ai::before { background: var(--instui-color-text-interactive-action-ai-base); }
+.${p}button.-color-ai-secondary::before {
+  background: linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%);
+}
+/*
+ * --ghost is InstUI's withBackground={false}: an outline button in the colour's ghost tokens
+ * (transparent fill, coloured border + text). Defaults to primary; compose with --secondary for the
+ * secondary ghost.
+ */
+.${p}button.-without-background {
+  background: var(--instui-component-base-button-primary-ghost-background);
+  color: var(--instui-component-base-button-primary-ghost-color);
+  border-color: var(--instui-component-base-button-primary-ghost-border-color);
+}
+.${p}button.-color-secondary.-ghost {
+  background: var(--instui-component-base-button-secondary-ghost-background);
+  color: var(--instui-component-base-button-secondary-ghost-color);
+  border-color: var(--instui-component-base-button-secondary-ghost-border-color);
+}
+/*
+ * Ghost hover/active derive a subtle wash from the brand token via @pantoken/plugin-colors —
+ * a low-opacity, slightly-darkened brand, exactly as InstUI's runtime computes it
+ * (alpha(darken(brand), n)). The *-ghost-hover-background *tokens* resolve to the solid brand fill,
+ * which would print same-colour-on-same-colour text; deriving the wash keeps the rest text legible
+ * and tracks the brand. See the upstream token issue for why the raw tokens can't be used directly.
+ */
+.${p}button.-without-background:hover {
+  background: ${alpha(darken("var(--instui-component-base-button-primary-ghost-color)", 10), 10)};
+}
+.${p}button.-without-background:active {
+  background: ${alpha(darken("var(--instui-component-base-button-primary-ghost-color)", 10), 20)};
+}
+.${p}button.-color-secondary.-ghost:hover {
+  background: ${alpha(darken("var(--instui-component-base-button-secondary-ghost-color)", 10), 10)};
+}
+.${p}button.-color-secondary.-ghost:active {
+  background: ${alpha(darken("var(--instui-component-base-button-secondary-ghost-color)", 10), 20)};
+}
+/* --block is InstUI's display="block": a full-width button. */
+.${p}button.-display-block {
+  display: flex;
+  width: 100%;
+}
+.${p}button.-size-sm {
+  font-size: var(--instui-component-base-button-small-font-size);
+  min-height: var(--instui-component-base-button-small-height);
+  padding-inline: var(--instui-component-base-button-small-padding-horizontal);
+}
+.${p}button.-size-lg {
+  font-size: var(--instui-component-base-button-large-font-size);
+  min-height: var(--instui-component-base-button-large-height);
+  padding-inline: var(--instui-component-base-button-large-padding-horizontal);
+}
+.${p}button.-shape-square {
+  padding: var(--instui-spacing-space-xs);
+  aspect-ratio: 1;
+}
+.${p}button.-shape-circle {
+  padding: var(--instui-spacing-space-xs);
+  aspect-ratio: 1;
+  border-radius: 50%;
+}
+/*
+ * A composed \`-icon-<name>\` rides the shared icon painter (utilities/icon), so a text button needs no
+ * button-specific glyph CSS — the ::before already inherits the label's colour and 1em size. Icon-only
+ * shape buttons carry no label, so grow the glyph to fill the square control rather than tracking a
+ * (missing) label's cap height.
+ */
+.${p}button.-shape-square[class*="-icon-"]::before,
+.${p}button.-shape-circle[class*="-icon-"]::before {
+  inline-size: 1.25em;
+  block-size: 1.25em;
+}
+.${p}button.-condensed {
+  background: transparent;
+  border-color: transparent;
+  min-height: 0;
+  color: var(--instui-color-text-interactive-action-secondary-base);
+  padding-inline: var(--instui-spacing-space-xs);
+}
+.${p}button.-condensed:hover { background: var(--instui-color-background-muted); }
+.${p}button.-toggle[aria-pressed="true"] {
+  background: var(--instui-color-background-interactive-action-secondary-active);
+  border-color: var(--instui-color-stroke-interactive-action-secondary-active);
+  color: var(--instui-color-text-interactive-action-secondary-base);
+}
+/* InstUI's withBorder={false}: drop the border but keep the button's box (border-box sizing). */
+.${p}button.-without-border { border-style: none; }`
+});
+const buttonCss = button.css;
+//#endregion
+//#region src/components/byline.ts
+const byline = defineComponent({
+	name: "byline",
+	css: (p) => byline$1.replaceAll(SENTINEL, p)
+});
+const bylineCss = byline.css;
+//#endregion
+//#region src/components/calendar.ts
+const calendar = defineComponent({
+	name: "calendar",
+	css: (p) => calendar$1.replaceAll(SENTINEL, p)
+});
+const calendarCss = calendar.css;
+//#endregion
+//#region src/components/checkbox.ts
+const checkbox = defineComponent({
+	name: "checkbox",
+	css: (p) => checkbox$1.replaceAll(SENTINEL, p)
+});
+const checkboxCss = checkbox.css;
+//#endregion
+//#region src/components/close-button.ts
+const closeButton = defineComponent({
+	name: "close-button",
+	css: (p) => closeButton$1.replaceAll(SENTINEL, p)
+});
+const closeButtonCss = closeButton.css;
+//#endregion
+//#region src/components/context-view.ts
+const contextView = defineComponent({
+	name: "context-view",
+	css: (p) => contextView$1.replaceAll(SENTINEL, p)
+});
+const contextViewCss = contextView.css;
+//#endregion
+//#region src/components/file-drop.ts
+const fileDrop = defineComponent({
+	name: "file-drop",
+	css: (p) => fileDrop$1.replaceAll(SENTINEL, p)
+});
+const fileDropCss = fileDrop.css;
+//#endregion
+//#region src/components/form-field.ts
+const formField = defineComponent({
+	name: "form-field",
+	css: (p) => formField$1.replaceAll(SENTINEL, p)
+});
+const formFieldCss = formField.css;
+//#endregion
+//#region src/components/form-field-group.ts
+const formFieldGroup = defineComponent({
+	name: "form-field-group",
+	css: (p) => formFieldGroup$1.replaceAll(SENTINEL, p)
+});
+const formFieldGroupCss = formFieldGroup.css;
+//#endregion
+//#region src/components/form-field-messages.ts
+const formFieldMessages = defineComponent({
+	name: "form-field-messages",
+	css: (p) => formFieldMessages$1.replaceAll(SENTINEL, p)
+});
+const formFieldMessagesCss = formFieldMessages.css;
+//#endregion
+//#region src/lib/headings.ts
+/**
+* The six document heading levels and their per-level size/weight rules — shared by the Heading
+* component (`.instui-heading.-level-h1`) and prose (`.pantoken-prose h1`) so both read one source of
+* truth from the `--instui-component-heading-<level>-*` tokens.
+*
+* @module
+*/
+/** The six document heading levels, in order. */
+const HEADING_LEVELS = [
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+];
+/**
+* Per-level heading size + weight, straight from the `--instui-component-heading-<level>-*` tokens.
+* `selector(level)` maps a level (`"h1"`) to the selector that should carry its type styles.
+*/
+const headingLevelRules = (selector) => HEADING_LEVELS.map((l) => `${selector(l)} { font-size: var(--instui-component-heading-${l}-font-size); font-weight: var(--instui-component-heading-${l}-font-weight); }`).join("\n");
+//#endregion
+//#region src/components/heading.ts
+const heading = defineComponent({
+	name: "heading",
+	css: (p) => css`
+/**
+ * @component heading
+ * @summary Heading typography from \`-level-h1\` to \`-level-h6\`.
+ * @modifier -level-h1 — Render at the h1 type scale.
+ * @modifier -level-h2 — Render at the h2 type scale.
+ * @modifier -level-h3 — Render at the h3 type scale.
+ * @modifier -level-h4 — Render at the h4 type scale.
+ * @modifier -level-h5 — Render at the h5 type scale.
+ * @modifier -level-h6 — Render at the h6 type scale.
+ * @modifier -color-secondary — Secondary (muted) colour.
+ * @modifier -color-ai — AI-accent colour.
+ * @modifier -color-primary-inverse — On-dark (primary inverse) colour.
+ * @modifier -border-top — Add a top rule.
+ * @modifier -border-bottom — Add a bottom rule.
+ * @modifier -variant-label — Label type preset.
+ * @modifier -variant-title-page — Page-title preset.
+ * @modifier -variant-title-section — Section-title preset.
+ * @modifier -variant-title-card-mini — Mini card-title preset.
+ * @modifier -variant-title-card-regular — Regular card-title preset.
+ * @modifier -variant-title-card-section — Card section-title preset.
+ * @accessibility These classes set the visual level only, so render a real \`<h1>\`–\`<h6>\` (or use \`role="heading"\` with \`aria-level\`) to convey the heading level.
+ * @example
+ * <div class="${p}heading -level-h1">Heading h1</div>
+ * @related text — Body typography for non-heading text.
+ */
+.${p}heading {
+  display: block;
+  margin: 0;
+  font-family: var(--instui-component-heading-h1-font-family);
+  color: var(--instui-component-heading-base-color);
+  line-height: var(--instui-component-heading-line-height);
+  font-size: var(--instui-component-heading-h1-font-size);
+  font-weight: var(--instui-component-heading-h1-font-weight);
+}
+${headingLevelRules((l) => `.${p}heading.-level-${l}`)}
+.${p}heading.-variant-title-page { font-size: var(--instui-component-heading-title-page-desktop-font-size); font-weight: var(--instui-component-heading-title-page-desktop-font-weight); }
+.${p}heading.-variant-title-section { font-size: var(--instui-component-heading-title-section-font-size); font-weight: var(--instui-component-heading-title-section-font-weight); }
+.${p}heading.-variant-title-card-section { font-size: var(--instui-component-heading-title-card-section-font-size); font-weight: var(--instui-component-heading-title-card-section-font-weight); }
+.${p}heading.-variant-title-card-regular { font-size: var(--instui-component-heading-title-card-regular-font-size); font-weight: var(--instui-component-heading-title-card-regular-font-weight); }
+.${p}heading.-variant-title-card-mini { font-size: var(--instui-component-heading-title-card-mini-font-size); font-weight: var(--instui-component-heading-title-card-mini-font-weight); }
+.${p}heading.-variant-label { font-size: var(--instui-component-heading-label-font-size); font-weight: var(--instui-component-heading-label-font-weight); }
+.${p}heading.-color-secondary { color: var(--instui-component-heading-muted-color); }
+.${p}heading.-color-primary-inverse { color: var(--instui-component-heading-inverse-color); }
+.${p}heading.-color-ai {
+  background: linear-gradient(to bottom, var(--instui-component-heading-ai-text-top-gradient-color) 0%, var(--instui-component-heading-ai-text-bottom-gradient-color) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+.${p}heading.-border-bottom {
+  border-bottom: var(--instui-component-heading-border-width) solid var(--instui-component-heading-border-color);
+  padding-bottom: var(--instui-component-heading-border-padding);
+}
+.${p}heading.-border-top {
+  border-top: var(--instui-component-heading-border-width) solid var(--instui-component-heading-border-color);
+  padding-top: var(--instui-component-heading-border-padding);
+}`
+});
+const headingCss = heading.css;
+//#endregion
+//#region src/components/img.ts
+const img = defineComponent({
+	name: "img",
+	css: (p) => img$1.replaceAll(SENTINEL, p)
+});
+const imgCss = img.css;
+//#endregion
+//#region src/components/in-place-edit.ts
+const inPlaceEdit = defineComponent({
+	name: "in-place-edit",
+	css: (p) => inPlaceEdit$1.replaceAll(SENTINEL, p)
+});
+const inPlaceEditCss = inPlaceEdit.css;
+//#endregion
+//#region src/lib/field-controls.ts
+/**
+* The shared form-control CSS bases used by several input records:
+* - {@link fieldControlBase} — the native-control chrome (border/bg/radius/states) for TextInput,
+*   TextArea, and SimpleSelect, keyed off a `--instui-component-<family>-*` token family.
+* - {@link inputFacadeBase} — the wrapped-input facade (a flex row that carries the text-input chrome
+*   so icon/arrow content can sit inside the field) shared by InputGroup and NumberInput.
+*
+* Both take the already-`ns()`-joined prefix `p` and return a CSS fragment; the component records that
+* use them interpolate the fragment into their own `css:(p)=>…` body.
+*
+* @module
+*/
+/** The native-control chrome for TextInput/TextArea/SimpleSelect, from the `<fam>-*` token family. */
+function fieldControlBase(p, cls, fam) {
+	const t = (s) => `var(--instui-component-${fam}-${s})`;
+	const root = `.${p}${cls}`;
+	return `
+${root} {
+  display: block;
+  inline-size: 100%;
+  box-sizing: border-box;
+  font-family: ${t("font-family")};
+  font-weight: ${t("font-weight")};
+  color: ${t("text-color")};
+  background-color: ${t("background-color")};
+  border: ${t("border-width")} solid ${t("border-color")};
+  border-radius: ${t("border-radius")};
+}
+${root}::placeholder { color: ${t("placeholder-color")}; }
+${root}:hover {
+  background-color: ${t("background-hover-color")};
+  border-color: ${t("border-hover-color")};
+}
+${root}:hover::placeholder { color: ${t("placeholder-hover-color")}; }
+${root}:disabled,
+${root}.-disabled {
+  background-color: ${t("background-disabled-color")};
+  border-color: ${t("border-disabled-color")};
+  color: ${t("text-disabled-color")};
+  cursor: not-allowed;
+}
+${root}.-readonly {
+  background-color: ${t("background-readonly-color")};
+  border-color: ${t("border-readonly-color")};
+  color: ${t("text-readonly-color")};
+}
+${root}.-invalid { border-color: ${t("error-border-color")}; }
+${root}.-success { border-color: ${t("success-border-color")}; }
+/* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after the
+   user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */
+${root}:is(.-invalid, :user-invalid):focus-visible { outline-color: var(--instui-focus-outline-color-danger); }
+${root}.-success:focus-visible { outline-color: var(--instui-focus-outline-color-success); }
+`;
+}
+/**
+* The wrapped-input facade shared by InputGroup and NumberInput: a flex row that carries the text-input
+* chrome (border/bg/radius/height/states/sizes from `text-input-*`) so icon/arrow content can sit INSIDE
+* the field beside the input. The real `<input>` inside sheds its own border/bg/padding; the facade shows
+* the focus ring (via `:has(:focus-visible)`) since the input is chromeless. `cls` is the root class.
+*/
+function inputFacadeBase(p, cls) {
+	const t = (s) => `var(--instui-component-text-input-${s})`;
+	const root = `.${p}${cls}`;
+	return `
+${root} {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  box-sizing: border-box;
+  block-size: ${t("height-md")};
+  padding-inline: ${t("padding-horizontal-md")};
+  gap: ${t("gap-content")};
+  background-color: ${t("background-color")};
+  border: ${t("border-width")} solid ${t("border-color")};
+  border-radius: ${t("border-radius")};
+  color: ${t("text-color")};
+  font-family: ${t("font-family")};
+  font-size: ${t("font-size-md")};
+}
+${root}:hover { background-color: ${t("background-hover-color")}; border-color: ${t("border-hover-color")}; }
+/* The inner control is chromeless — the facade provides border/bg/ring. */
+${root} > input,
+${root} .${p}text-input {
+  flex: 1;
+  min-inline-size: 0;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  block-size: auto;
+  font: inherit;
+  color: inherit;
+  outline: none;
+}
+${root} > input::placeholder { color: ${t("placeholder-color")}; }
+/* Leading/trailing content slots (icons ride the -icon-* glyph painter). */
+${root} .before,
+${root} .after { display: inline-flex; align-items: center; flex: none; color: ${t("text-color")}; }
+${root}.-disabled,
+${root}:has(> input:disabled) {
+  background-color: ${t("background-disabled-color")};
+  border-color: ${t("border-disabled-color")};
+  color: ${t("text-disabled-color")};
+  cursor: not-allowed;
+}
+${root}.-readonly {
+  background-color: ${t("background-readonly-color")};
+  border-color: ${t("border-readonly-color")};
+  color: ${t("text-readonly-color")};
+}
+${root}.-invalid { border-color: ${t("error-border-color")}; }
+${root}.-success { border-color: ${t("success-border-color")}; }
+/* Focus ring lives on the facade (the input has no chrome). */
+${root}:has(:focus-visible) {
+  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);
+  outline-offset: var(--instui-focus-outline-offset);
+  border-radius: var(--instui-focus-outline-radius);
+}
+${root}:is(.-invalid, :has(> input:user-invalid)):has(:focus-visible) { outline-color: var(--instui-focus-outline-color-danger); }
+${root}.-success:has(:focus-visible) { outline-color: var(--instui-focus-outline-color-success); }
+${root}.-size-sm { block-size: ${t("height-sm")}; padding-inline: ${t("padding-horizontal-sm")}; font-size: ${t("font-size-sm")}; }
+${root}.-size-lg { block-size: ${t("height-lg")}; padding-inline: ${t("padding-horizontal-lg")}; font-size: ${t("font-size-lg")}; }
+`;
+}
+//#endregion
+//#region src/components/input-group.ts
+const inputGroup = defineComponent({
+	name: "input-group",
+	css: (p) => css`
+/**
+ * @component input-group
+ * @summary A facade around a text input with leading and trailing icon slots.
+ * @modifier -disabled — Disabled state.
+ * @modifier -invalid — Invalid (error) state.
+ * @modifier -readonly — Read-only state.
+ * @modifier -success — Success (valid) state.
+ * @modifier -size-sm — Small.
+ * @modifier -size-lg — Large.
+ * @modifier -should-not-wrap — Keep the group on one line (no wrapping).
+ * @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.
+ * @cssstate disabled
+ * @example
+ * <span class="${p}input-group">
+ *   <span class="before">@</span>
+ *   <input type="text" placeholder="username">
+ * </span>
+ * @related text-input — Wraps a text input, adding leading and trailing icon slots.
+ */
+${inputFacadeBase(p, "input-group")}
+.${p}input-group.-should-not-wrap { flex-wrap: nowrap; }`
+});
+const inputGroupCss = inputGroup.css;
+//#endregion
+//#region src/components/link.ts
+const link = defineComponent({
+	name: "link",
+	css: (p) => link$1.replaceAll(SENTINEL, p)
+});
+const linkCss = link.css;
+//#endregion
+//#region src/components/list.ts
+const list = defineComponent({
+	name: "list",
+	css: (p) => list$1.replaceAll(SENTINEL, p)
+});
+const listCss = list.css;
+//#endregion
+//#region src/components/menu.ts
+const menu = defineComponent({
+	name: "menu",
+	css: (p) => menu$1.replaceAll(SENTINEL, p)
+});
+const menuCss = menu.css;
+//#endregion
+//#region src/components/metric.ts
+const metric = defineComponent({
+	name: "metric",
+	css: (p) => metric$1.replaceAll(SENTINEL, p)
+});
+const metricCss = metric.css;
+//#endregion
+//#region src/components/modal.ts
+const modal = defineComponent({
+	name: "modal",
+	css: (p) => modal$1.replaceAll(SENTINEL, p)
+});
+const modalCss = modal.css;
+//#endregion
+//#region src/components/number-input.ts
+const numberInput = defineComponent({
+	name: "number-input",
+	css: (p) => {
+		const t = (s) => `var(--instui-component-text-input-${s})`;
+		const a = (s) => `var(--instui-component-text-input-arrows-${s})`;
+		const root = `.${p}number-input`;
+		return css`
+/**
+ * @component number-input
+ * @summary A number-input facade with a +/- spinner column.
+ * @modifier -disabled — Disabled state.
+ * @modifier -invalid — Invalid (error) state.
+ * @modifier -readonly — Read-only state.
+ * @modifier -success — Success (valid) state.
+ * @modifier -size-sm — Small.
+ * @modifier -size-lg — Large.
+ * @part .arrows — The +/- spinner column at the inline-end.
+ * @part .down — The decrement button; the unclassed button increments.
+ * @pseudo ::before — The masked chevron glyph on each spinner button: up to increment, down on \`.down\`.
+ * @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.
+ * @cssstate disabled
+ * @accessibility Put the accessible name on the \`<input>\` (e.g. \`aria-label\`) so the field owns the value; the +/- spinner buttons are decorative and marked \`aria-hidden="true"\`.
+ * @example
+ * <span class="${p}number-input">
+ *   <input id="qty" type="number" value="1" aria-label="Quantity">
+ *   <span class="arrows">
+ *     <button type="button" id="up" aria-hidden="true"></button>
+ *     <button class="down" type="button" id="down" aria-hidden="true"></button>
+ *   </span>
+ * </span>
+ * @structure
+ * .${p}number-input {
+ *   input {}
+ *   .arrows {
+ *     button {}
+ *     .down {}
+ *   }
+ * }
+ * @related text-input — Shares the same input facade chrome.
+ * @related range-input — Another numeric input control.
+ */
+${inputFacadeBase(p, "number-input")}
+/* the arrow column sits flush at the inline-end; drop the facade's end padding, and clip the column to
+   the facade's radius so it doesn't overhang the rounded corners (Firefox especially). The focus ring
+   is an outline, so overflow:hidden doesn't clip it. */
+${root} { padding-inline-end: 0; overflow: hidden; }
+/* native UA spinners off — we supply our own */
+${root} > input::-webkit-outer-spin-button,
+${root} > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+${root} > input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
+${root} .arrows {
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  align-self: stretch;
+  /* the arrows-container-width token is @property-only (value-less upstream), so a literal is used */
+  inline-size: 1.5rem;
+  border-inline-start: ${t("border-width")} solid ${t("border-color")};
+}
+${root} .arrows button {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: ${a("background-color")};
+  color: var(--instui-color-icon-interactive-action-secondary-base);
+  cursor: pointer;
+}
+${root} .arrows button + button { border-block-start: ${t("border-width")} solid ${t("border-color")}; }
+${root} .arrows button:hover { background: ${a("background-hover-color")}; }
+${root} .arrows button:active { background: ${a("background-active-color")}; }
+${root} .arrows button:disabled { background: ${a("background-disabled-color")}; cursor: not-allowed; }
+${root} .arrows button::before {
+  content: "";
+  inline-size: 0.875em;
+  block-size: 0.875em;
+  background: currentColor;
+  -webkit-mask: ${CHEVRON_UP_ICON};
+  mask: ${CHEVRON_UP_ICON};
+}
+${root} .arrows button.down::before { -webkit-mask: ${CHEVRON_DOWN_ICON}; mask: ${CHEVRON_DOWN_ICON}; }`;
+	}
+});
+const numberInputCss = numberInput.css;
+//#endregion
+//#region src/components/pagination.ts
+const pagination = defineComponent({
+	name: "pagination",
+	css: (p) => pagination$1.replaceAll(SENTINEL, p)
+});
+const paginationCss = pagination.css;
+//#endregion
+//#region src/components/pill.ts
+const pill = defineComponent({
+	name: "pill",
+	css: (p) => pill$1.replaceAll(SENTINEL, p)
+});
+const pillCss = pill.css;
+//#endregion
+//#region src/components/popover.ts
+const popover = defineComponent({
+	name: "popover",
+	css: (p) => popover$1.replaceAll(SENTINEL, p)
+});
+const popoverCss = popover.css;
+//#endregion
+//#region src/components/progress.ts
+const progress = defineComponent({
+	name: "progress",
+	css: (p) => progress$1.replaceAll(SENTINEL, p)
+});
+const progressCss = progress.css;
+//#endregion
+//#region src/components/progress-circle.ts
+const progressCircle = defineComponent({
+	name: "progress-circle",
+	css: (p) => progressCircle$1.replaceAll(SENTINEL, p)
+});
+const progressCircleCss = progressCircle.css;
+//#endregion
+//#region src/components/radio.ts
+const radio = defineComponent({
+	name: "radio",
+	css: (p) => radio$1.replaceAll(SENTINEL, p)
+});
+const radioCss = radio.css;
+//#endregion
+//#region src/components/radio-input-group.ts
+const radioInputGroup = defineComponent({
+	name: "radio-input-group",
+	css: (p) => radioInputGroup$1.replaceAll(SENTINEL, p)
+});
+const radioInputGroupCss = radioInputGroup.css;
+//#endregion
+//#region src/components/range-input.ts
+const rangeInput = defineComponent({
+	name: "range-input",
+	css: (p) => rangeInput$1.replaceAll(SENTINEL, p)
+});
+const rangeInputCss = rangeInput.css;
+//#endregion
+//#region src/components/rating.ts
+const rating = defineComponent({
+	name: "rating",
+	css: (p) => rating$1.replaceAll(SENTINEL, p)
+});
+const ratingCss = rating.css;
+//#endregion
+//#region src/components/side-nav-bar.ts
+const sideNavBar = defineComponent({
+	name: "side-nav-bar",
+	css: (p) => sideNavBar$1.replaceAll(SENTINEL, p)
+});
+const sideNavBarCss = sideNavBar.css;
+//#endregion
+//#region src/components/simple-select.ts
+const simpleSelect = defineComponent({
+	name: "simple-select",
+	css: (p) => {
+		const t = (s) => `var(--instui-component-text-input-${s})`;
+		return css`
+/**
+ * @component simple-select
+ * @summary A styled native \`<select>\` with a caret, matching the text-input states and sizes.
+ * @modifier -disabled — Disabled state.
+ * @modifier -invalid — Invalid (error) state.
+ * @modifier -readonly — Read-only state.
+ * @modifier -success — Success (valid) state.
+ * @modifier -size-sm — Small.
+ * @modifier -size-lg — Large.
+ * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.
+ * @cssstate disabled
+ * @example
+ * <select class="${p}simple-select">
+ *   <option>Choose a fruit…</option>
+ *   <option>Apple</option>
+ *   <option>Orange</option>
+ *   <option>Pear</option>
+ * </select>
+ * @structure
+ * .${p}simple-select {
+ *   option {}
+ * }
+ * @related text-input — Shares the same field chrome, states, and sizes.
+ * @related menu — The dropdown surface a richer select reuses.
+ */
+${fieldControlBase(p, "simple-select", "text-input")}
+.${p}simple-select {
+  block-size: ${t("height-md")};
+  padding-inline: ${t("padding-horizontal-md")};
+  padding-inline-end: calc(${t("padding-horizontal-md")} + 1.5rem);
+  font-size: ${t("font-size-md")};
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: ${SELECT_CHEVRON};
+  background-repeat: no-repeat;
+  background-position: right ${t("padding-horizontal-md")} center;
+  background-size: 1em;
+}
+.${p}simple-select.-size-sm { block-size: ${t("height-sm")}; padding-inline: ${t("padding-horizontal-sm")}; padding-inline-end: calc(${t("padding-horizontal-sm")} + 1.5rem); font-size: ${t("font-size-sm")}; }
+.${p}simple-select.-size-lg { block-size: ${t("height-lg")}; padding-inline: ${t("padding-horizontal-lg")}; padding-inline-end: calc(${t("padding-horizontal-lg")} + 1.5rem); font-size: ${t("font-size-lg")}; }`;
+	}
+});
+const simpleSelectCss = simpleSelect.css;
+//#endregion
+//#region src/components/spinner.ts
+const spinner = defineComponent({
+	name: "spinner",
+	css: (p) => spinner$1.replaceAll(SENTINEL, p)
+});
+const spinnerCss = spinner.css;
+//#endregion
+//#region src/components/table.ts
+const table = defineComponent({
+	name: "table",
+	css: (p) => table$1.replaceAll(SENTINEL, p)
+});
+const tableCss = table.css;
+//#endregion
+//#region src/components/tabs.ts
+const tabs = defineComponent({
+	name: "tabs",
+	css: (p) => tabs$1.replaceAll(SENTINEL, p)
+});
+const tabsCss = tabs.css;
+//#endregion
+//#region src/components/tag.ts
+const tag = defineComponent({
+	name: "tag",
+	css: (p) => tag$1.replaceAll(SENTINEL, p)
+});
+const tagCss = tag.css;
+//#endregion
+//#region src/components/text.ts
+const text = defineComponent({
+	name: "text",
+	css: (p) => text$1.replaceAll(SENTINEL, p)
+});
+const textCss = text.css;
+//#endregion
+//#region src/components/text-area.ts
+const textArea = defineComponent({
+	name: "text-area",
+	css: (p) => {
+		const t = (s) => `var(--instui-component-text-area-${s})`;
+		return css`
+/**
+ * @component text-area
+ * @summary A styled, resizable native \`<textarea>\` with the same states and sizes as the text input.
+ * @modifier -disabled — Disabled state.
+ * @modifier -invalid — Invalid (error) state.
+ * @modifier -readonly — Read-only state.
+ * @modifier -success — Success (valid) state.
+ * @modifier -size-sm — Small.
+ * @modifier -size-lg — Large.
+ * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.
+ * @cssstate disabled
+ * @example
+ * <textarea class="${p}text-area" placeholder="Write a comment…"></textarea>
+ * @related text-input — The single-line counterpart with the same states and sizes.
+ */
+${fieldControlBase(p, "text-area", "text-area")}
+.${p}text-area {
+  padding: ${t("padding")};
+  font-size: ${t("font-size-md")};
+  line-height: 1.5;
+  min-block-size: 4rem;
+  resize: vertical;
+}
+.${p}text-area.-size-sm { font-size: ${t("font-size-sm")}; }
+.${p}text-area.-size-lg { font-size: ${t("font-size-lg")}; }`;
+	}
+});
+const textAreaCss = textArea.css;
+//#endregion
+//#region src/components/text-input.ts
+const textInput = defineComponent({
+	name: "text-input",
+	css: (p) => {
+		const t = (s) => `var(--instui-component-text-input-${s})`;
+		return css`
+/**
+ * @component text-input
+ * @summary A styled native \`<input>\` — including \`date\`, \`time\`, and \`datetime-local\`, where the browser supplies the picker — with validation states and sizes.
+ * @modifier -disabled — Disabled state.
+ * @modifier -invalid — Invalid (error) state.
+ * @modifier -readonly — Read-only state.
+ * @modifier -success — Success (valid) state.
+ * @modifier -size-sm — Small.
+ * @modifier -size-lg — Large.
+ * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.
+ * @cssstate disabled
+ * @example
+ * <input class="${p}text-input" placeholder="Default">
+ * @related text-area — The multi-line counterpart with the same states and sizes.
+ * @related number-input — The numeric-entry input sharing this chrome.
+ * @related simple-select — The native select sharing this field chrome.
+ * @related input-group — Wraps this input with leading and trailing slots.
+ */
+${fieldControlBase(p, "text-input", "text-input")}
+.${p}text-input {
+  block-size: ${t("height-md")};
+  padding-inline: ${t("padding-horizontal-md")};
+  font-size: ${t("font-size-md")};
+}
+.${p}text-input.-size-sm { block-size: ${t("height-sm")}; padding-inline: ${t("padding-horizontal-sm")}; font-size: ${t("font-size-sm")}; }
+.${p}text-input.-size-lg { block-size: ${t("height-lg")}; padding-inline: ${t("padding-horizontal-lg")}; font-size: ${t("font-size-lg")}; }`;
+	}
+});
+const textInputCss = textInput.css;
+//#endregion
+//#region src/components/toggle-details.ts
+const toggleDetails = defineComponent({
+	name: "toggle-details",
+	css: (p) => toggleDetails$1.replaceAll(SENTINEL, p)
+});
+const toggleDetailsCss = toggleDetails.css;
+//#endregion
+//#region src/components/toggle-group.ts
+const toggleGroup = defineComponent({
+	name: "toggle-group",
+	css: (p) => toggleGroup$1.replaceAll(SENTINEL, p)
+});
+const toggleGroupCss = toggleGroup.css;
+//#endregion
+//#region src/components/tooltip.ts
+const tooltip = defineComponent({
+	name: "tooltip",
+	css: (p) => tooltip$1.replaceAll(SENTINEL, p)
+});
+const tooltipCss = tooltip.css;
+//#endregion
+//#region src/components/tray.ts
+const tray = defineComponent({
+	name: "tray",
+	css: (p) => tray$1.replaceAll(SENTINEL, p)
+});
+const trayCss = tray.css;
+//#endregion
+//#region src/components/tree-browser.ts
+const treeBrowser = defineComponent({
+	name: "tree-browser",
+	css: (p) => treeBrowser$1.replaceAll(SENTINEL, p)
+});
+const treeBrowserCss = treeBrowser.css;
+//#endregion
+//#region src/components/truncate.ts
+const truncate = defineComponent({
+	name: "truncate",
+	css: (p) => truncate$1.replaceAll(SENTINEL, p)
+});
+const truncateCss = truncate.css;
+//#endregion
+//#region src/components/index.ts
+/** Every component (+ the three in-sheet utilities) in `componentsCss()`'s exact concat order. */
+const COMPONENTS = [
+	button,
+	alert,
+	badge,
+	pill,
+	tag,
+	avatar,
+	tabs,
+	metric,
+	byline,
+	img,
+	table,
+	link,
+	list,
+	icon,
+	checkbox,
+	radio,
+	spinner,
+	progress,
+	menu,
+	modal,
+	breadcrumb,
+	billboard,
+	rating,
+	toggleGroup,
+	contextView,
+	progressCircle,
+	pagination,
+	truncate,
+	toggleDetails,
+	fileDrop,
+	sideNavBar,
+	treeBrowser,
+	calendar,
+	popover,
+	tray,
+	tooltip,
+	rangeInput,
+	mask,
+	screenReaderContent,
+	heading,
+	text,
+	closeButton,
+	formField,
+	formFieldGroup,
+	radioInputGroup,
+	formFieldMessages,
+	textInput,
+	textArea,
+	simpleSelect,
+	inputGroup,
+	numberInput,
+	inPlaceEdit
+];
+//#endregion
+//#region src/declarations/elevation.ts
+/**
+* The `--instui-elevation-*` shadow scale. Helpers only — NOT a documented record and not in any
+* registry: `componentsCss()` leads its sheet with `elevationCss()` so the shadows components
+* reference (modal, alert, menu) resolve from `components.css` alone.
+*
+* @module
+*/
+/** Per-level geometry (`offset-x offset-y blur`) for the [tighter, wider] shadow layers. */
+const ELEVATION_GEOMETRY = {
+	resting: ["0 0.0625rem 0.125rem", "0 0.0625rem 0.1875rem"],
+	above: ["0 0.1875rem 0.375rem", "0 0.1875rem 0.375rem"],
+	topmost: ["0 0.375rem 0.4375rem", "0 0.625rem 1.75rem"]
+};
+/** Aliases InstUI ships alongside the primary level names. */
+const ELEVATION_ALIASES = {
+	depth1: "resting",
+	depth2: "above",
+	depth3: "topmost",
+	card: "resting",
+	cardHover: "topmost"
+};
+/**
+* Every elevation level and alias emitted as `--instui-elevation-<name>` (`resting`, `above`,
+* `topmost`, `depth1`–`depth3`, `card`, `cardHover`). Derived from the geometry + alias maps.
+*/
+const ELEVATION_NAMES = [...Object.keys(ELEVATION_GEOMETRY), ...Object.keys(ELEVATION_ALIASES)];
+const ELEVATION_COLOR_STRONG = "var(--instui-color-drop-shadow-shadow-color1)";
+const ELEVATION_COLOR_SOFT = "var(--instui-color-drop-shadow-shadow-color2)";
+const elevationShadow = ([tight, wide]) => `${tight} ${ELEVATION_COLOR_SOFT}, ${wide} ${ELEVATION_COLOR_STRONG}`;
+/**
+* The `--instui-elevation-*` name/value pairs (each a multi-layer `box-shadow`). Values reference the
+* themed drop-shadow colour tokens, so they adapt per theme wherever a token sheet is loaded.
+*
+* @returns One `[customProperty, value]` pair per level and alias.
+*/
+function elevationDeclarations() {
+	return [...Object.entries(ELEVATION_GEOMETRY), ...Object.entries(ELEVATION_ALIASES).map(([alias, base]) => [alias, ELEVATION_GEOMETRY[base]])].map(([name, geo]) => [`--instui-elevation-${name}`, elevationShadow(geo)]);
+}
+/**
+* Build the elevation token block: `<selector> { --instui-elevation-*: … }`. Shipped inside
+* `components.css` (so shadows are intrinsic — no plugin, no extra import), and reusable by other
+* layered outputs (e.g. the Pendo renderer) via the `selector` option.
+*
+* @param options - `selector` — the rule selector (default `:root`).
+* @returns The CSS string.
+*
+* @example
+* ```ts
+* import { elevationCss } from "@pantoken/components";
+*
+* elevationCss(); // ":root { --instui-elevation-resting: …; --instui-elevation-above: …; … }"
+* ```
+*
+* @demo self:elevation
+*/
+function elevationCss(options = {}) {
+	return `${options.selector ?? ":root"} {\n${elevationDeclarations().map(([name, value]) => `  ${name}: ${value};`).join("\n")}\n}\n`;
+}
+//#endregion
+//#region src/rules/base.ts
+const base = defineRule({
+	name: "base",
+	css: () => css`
+/**
+ * @rule base
+ * @class *
+ * @summary The opt-in global reset: \`box-sizing\`, the page surface, base text colour and font, \`color-scheme\`, and link defaults.
+ * @pseudo ::before — Included in the universal \`box-sizing: border-box\` reset so its generated box sizes predictably.
+ * @pseudo ::after — Included in the universal \`box-sizing: border-box\` reset so its generated box sizes predictably.
+ * @pseudo ::selection — Tints highlighted text with a translucent primary navigation colour.
+ * @example
+ * <html>
+ *   <body>
+ *     <a href="/">A styled link on the base surface.</a>
+ *   </body>
+ * </html>
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+:where(html) {
+  color-scheme: light dark;
+  background: var(--instui-color-background-page);
+  color: var(--instui-color-text-base);
+  font-family: var(--instui-font-family-base);
+  font-size: var(--instui-component-text-content-font-size);
+  line-height: var(--instui-component-text-content-line-height);
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+}
+:where(body) {
+  margin: 0;
+}
+:where(a) {
+  color: var(--instui-color-text-interactive-navigation-primary-base);
+  text-decoration: underline;
+}
+:where(a:hover) {
+  color: var(--instui-color-text-interactive-navigation-primary-hover);
+}
+::selection {
+  background: color-mix(in srgb, var(--instui-color-text-interactive-navigation-primary-base) 25%, transparent);
+}
+`
+});
+base.css;
+//#endregion
+//#region src/declarations/focus.ts
+/**
+* The focus-outline system — the InstUI focus ring, intrinsic to `base.css` so every focusable gets it
+* out of the box when pantoken owns the page. The resting element carries a transparent ring + a
+* transition, and `:focus-visible` reveals the colour and grows the offset. All rules are
+* zero-specificity `:where()`, so any component style overrides without `!important`.
+*
+* This is the one documented `@declaration` record, but it can't use `defineDeclaration` (its CSS is a
+* token block on one selector plus ring rules on another). Instead it exposes {@link focusOutlineCss}
+* (the bespoke builder `base.css` calls directly) and a {@link Definition}-shaped {@link focus} object
+* so the registry + `validate()` can treat it uniformly.
+*
+* @module
+*/
+/** The focus declaration's cssdoc doc comment (authored inline; the CSS body follows in {@link focusOutlineCss}). */
+const FOCUS_DOC = css`/**
+ * @declaration focus
+ * @class :focus-visible
+ * @summary The focus-outline system: the \`--instui-focus-outline-*\` custom properties (declared on \`:root\`) plus the \`:focus-visible\` ring every focusable gets, and opt-in tuning classes.
+ * @modifier -focus-color-success — Success-coloured ring.
+ * @modifier -focus-color-danger — Danger-coloured ring.
+ * @modifier -focus-color-inverse — Inverse (on-dark) ring.
+ * @modifier -focus-position-inset — Draw the ring inset, inside the element's edge.
+ * @modifier -focus-within — Ring the element while a descendant is focused.
+ * @modifier -without-focus-animation — Disable the ring's grow-in animation.
+ * @cssproperty --instui-focus-outline-color — The ring colour once focus is visible (the themed info colour).
+ * @cssproperty --instui-focus-outline-color-start — The resting, transparent ring colour the outline transitions from.
+ * @cssproperty --instui-focus-outline-width — The outline width of the ring.
+ * @cssproperty --instui-focus-outline-offset — The gap between the element's edge and the ring when focused.
+ * @cssproperty --instui-focus-outline-radius — The ring's corner radius when focused.
+ * @cssproperty --instui-focus-outline-style — The outline line style (solid).
+ * @cssproperty --instui-focus-outline-transition — The transition that animates the ring's colour and offset in.
+ * @cssproperty --instui-focus-outline-color-success — The ring colour for the \`-focus-color-success\` modifier.
+ * @cssproperty --instui-focus-outline-color-danger — The ring colour for the \`-focus-color-danger\` modifier.
+ * @cssproperty --instui-focus-outline-color-inverse — The ring colour for the \`-focus-color-inverse\` (on-dark) modifier.
+ * @cssproperty --instui-focus-outline-inset — The outline offset used when \`-focus-position-inset\` draws the ring inside the edge.
+ * @a11y Every focusable element gets a \`:focus-visible\` outline ring so keyboard users can see what's focused.
+ * @example
+ * <button class="instui-button -focus-color-danger">Delete</button>
+ * @demo self:focus-outline
+ */`;
+/** The elements the ring applies to by default (the common interactive/focusable elements). */
+const FOCUSABLE_SELECTOR = "a, button, input, select, textarea, summary, [tabindex]";
+const focusShared = (name) => `var(--instui-component-shared-tokens-focus-outline-${name})`;
+/**
+* The `--instui-focus-outline-*` name/value pairs the ring rules read. Colour/width/offset reference
+* the themed shared focus tokens; the transition, line style, and inset are constants.
+*
+* @returns One `[customProperty, value]` pair per focus-ring variable.
+*/
+function focusOutlineDeclarations() {
+	return [
+		["--instui-focus-outline-color", focusShared("info-color")],
+		["--instui-focus-outline-color-start", "transparent"],
+		["--instui-focus-outline-width", focusShared("width")],
+		["--instui-focus-outline-offset", focusShared("offset")],
+		["--instui-focus-outline-radius", "var(--instui-border-radius-md)"],
+		["--instui-focus-outline-style", "solid"],
+		["--instui-focus-outline-transition", "outline-color 0.2s, outline-offset 0.25s"],
+		["--instui-focus-outline-color-success", focusShared("success-color")],
+		["--instui-focus-outline-color-danger", focusShared("danger-color")],
+		["--instui-focus-outline-color-inverse", focusShared("on-color")],
+		["--instui-focus-outline-inset", "0rem"]
+	];
+}
+/**
+* The focus-ring rules for a given focusable selector: a transparent resting ring that transitions in
+* on `:focus-visible`, plus the `-focus-color-*` / `-focus-position-inset` / `-focus-within` /
+* `-without-focus-animation` modifiers. All `:where()`-wrapped, so zero-specificity.
+*
+* @param selector - The focusable selector the base ring applies to (default {@link FOCUSABLE_SELECTOR}).
+* @returns The CSS rules string.
+*/
+function focusOutlineRules(selector = FOCUSABLE_SELECTOR) {
+	return [
+		`:where(${selector}) {`,
+		`  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color-start);`,
+		`  outline-offset: 0;`,
+		`  transition: var(--instui-focus-outline-transition);`,
+		`}`,
+		`:where(${selector}):where(:focus-visible) {`,
+		`  outline-color: var(--instui-focus-outline-color);`,
+		`  outline-offset: var(--instui-focus-outline-offset);`,
+		`  border-radius: var(--instui-focus-outline-radius);`,
+		`}`,
+		`:where(.-focus-color-success):where(:focus-visible) { outline-color: var(--instui-focus-outline-color-success); }`,
+		`:where(.-focus-color-danger):where(:focus-visible) { outline-color: var(--instui-focus-outline-color-danger); }`,
+		`:where(.-focus-color-inverse):where(:focus-visible) { outline-color: var(--instui-focus-outline-color-inverse); }`,
+		`:where(.-focus-position-inset):where(:focus-visible) { outline-offset: var(--instui-focus-outline-inset); }`,
+		`:where(.-focus-within):where(:focus-within) {`,
+		`  outline-color: var(--instui-focus-outline-color);`,
+		`  outline-offset: var(--instui-focus-outline-offset);`,
+		`  border-radius: var(--instui-focus-outline-radius);`,
+		`}`,
+		`:where(.-without-focus-animation) { transition: none; }`
+	].join("\n");
+}
+/**
+* Build the focus-outline block: the `--instui-focus-outline-*` token defs plus the ring rules.
+* Baked into `base.css` (so focusables get the ring out of the box), and reusable by other layered
+* outputs (e.g. the Pendo renderer) via the `selector`/`tokenSelector` options.
+*
+* @param options - `selector` — the focusable selector; `tokenSelector` — where the token defs land
+*   (default `:where(:root)`).
+* @returns The CSS string.
+*
+* @demo self:focus-outline
+*/
+function focusOutlineCss(options = {}) {
+	const tokenSelector = options.tokenSelector ?? ":where(:root)";
+	const decls = focusOutlineDeclarations().map(([name, value]) => `  ${name}: ${value};`).join("\n");
+	return css`${FOCUS_DOC}\n${tokenSelector} {\n${decls}\n}\n\n${focusOutlineRules(options.selector)}\n`;
+}
+//#endregion
+//#region src/rules/prose.ts
+/**
+* The `prose` rule — typographic defaults for raw HTML under a content-root scope. Unlike the other
+* rules it's parameterized by a `scope` selector (not a class prefix), so it keeps its bespoke
+* `proseCss({ scope })` builder plus a {@link Definition}-shaped {@link prose} object (default
+* `.pantoken-prose` scope) for the registry + `validate()`.
+*
+* @module
+*/
+/** The prose rule's cssdoc doc comment (authored inline; the CSS body follows from {@link proseBody}). */
+const PROSE_DOC = css`/**
+ * @rule prose
+ * @summary Typographic defaults for raw HTML — headings, paragraphs, lists, links, and code — under the \`.pantoken-prose\` scope.
+ * @example
+ * <article class="pantoken-prose">
+ *   <h2>Release notes</h2>
+ *   <p>Body copy with a <a href="/">link</a>.</p>
+ * </article>
+ * @demo self:prose
+ * @related text
+ * @related heading
+ * @related list
+ */`;
+/** Build the InstUI-look prose CSS body (no doc block) under a scope selector `s`. */
+function proseBody(s) {
+	return css`
+/* Body text is InstUI's Text \`content\` type style. */
+${s} {
+  color: var(--instui-component-text-base-color);
+  font-family: var(--instui-component-text-content-font-family);
+  font-size: var(--instui-component-text-content-font-size);
+  font-weight: var(--instui-component-text-content-font-weight);
+  line-height: var(--instui-component-text-content-line-height);
+}
+
+/*
+ * Headings are InstUI's Heading component per level: one heading line-height and colour, but a
+ * per-level font size and weight (h1/h3/h4 are strong, h2/h5/h6 are base — straight from the tokens).
+ */
+${s} h1, ${s} h2, ${s} h3, ${s} h4, ${s} h5, ${s} h6 {
+  color: var(--instui-component-heading-base-color);
+  font-family: var(--instui-component-heading-h1-font-family);
+  line-height: var(--instui-component-heading-line-height);
+  margin: var(--instui-spacing-space-lg) 0 var(--instui-spacing-space-sm);
+}
+${headingLevelRules((l) => `${s} ${l}`)}
+
+${s} p { margin: var(--instui-spacing-space-md) 0; }
+
+${s} a {
+  color: var(--instui-color-text-interactive-navigation-primary-base);
+  text-decoration: underline;
+}
+${s} a:hover { color: var(--instui-color-text-interactive-navigation-primary-hover); }
+
+${s} strong, ${s} b { font-weight: var(--instui-component-text-content-important-font-weight); }
+${s} em, ${s} i { font-style: italic; }
+${s} small { font-size: var(--instui-component-text-content-small-font-size); }
+${s} del, ${s} s { text-decoration: line-through; color: var(--instui-color-text-muted); }
+
+${s} ul, ${s} ol { margin: var(--instui-spacing-space-md) 0; padding-inline-start: var(--instui-spacing-space-lg); }
+${s} li { margin: var(--instui-spacing-space2xs) 0; }
+${s} li.task-list-item { list-style: none; }
+${s} input[type="checkbox"] {
+  accent-color: var(--instui-color-text-interactive-navigation-primary-base);
+  margin-inline-end: var(--instui-spacing-space-xs);
+}
+
+/* Blockquotes use InstUI's Text \`contentQuote\` type style, with a leading rule. */
+${s} blockquote {
+  margin: var(--instui-spacing-space-md) 0;
+  padding-inline-start: var(--instui-spacing-space-md);
+  border-inline-start: var(--instui-border-width-lg) solid var(--instui-color-stroke-base);
+  color: var(--instui-component-text-base-color);
+  font-size: var(--instui-component-text-content-quote-font-size);
+  line-height: var(--instui-component-text-content-quote-line-height);
+}
+
+${s} code {
+  font-family: var(--instui-font-family-code);
+  font-size: 0.9em;
+  background: var(--instui-color-background-muted);
+  padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);
+  border-radius: var(--instui-border-radius-sm);
+}
+${s} pre {
+  font-family: var(--instui-font-family-code);
+  background: var(--instui-color-background-container);
+  color: var(--instui-color-text-base);
+  padding: var(--instui-spacing-space-md);
+  border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);
+  border-radius: var(--instui-border-radius-md);
+  overflow-x: auto;
+}
+${s} pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
+
+${s} hr {
+  border: none;
+  border-top: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);
+  margin: var(--instui-spacing-space-lg) 0;
+}
+${s} img { max-width: 100%; border-radius: var(--instui-border-radius-md); }
+
+/* Prose only styles RAW markdown tables — i.e. classless \`<table>\` output. A classed table
+   (\`.instui-table\` and friends) owns its own layout via its component CSS, so \`:not([class])\` keeps
+   prose from injecting borders/backgrounds into it (prose is for typography of rendered markup, not
+   table layout of components). */
+${s} table:not([class]) {
+  border-collapse: collapse;
+  width: 100%;
+  margin: var(--instui-spacing-space-md) 0;
+  background: var(--instui-component-table-background);
+  color: var(--instui-component-table-color);
+  font-family: var(--instui-component-table-font-family);
+  font-size: var(--instui-component-table-font-size);
+}
+${s} table:not([class]) th {
+  text-align: start;
+  background: var(--instui-component-table-col-header-background);
+  color: var(--instui-component-table-col-header-color);
+  font-weight: var(--instui-component-table-head-font-weight);
+  padding: var(--instui-component-table-col-header-padding-vertical) var(--instui-component-table-col-header-padding-horizontal);
+  border-bottom: var(--instui-border-width-md) solid var(--instui-component-table-row-border-color);
+}
+${s} table:not([class]) td {
+  color: var(--instui-component-table-cell-color);
+  line-height: var(--instui-component-table-cell-line-height);
+  padding: var(--instui-component-table-cell-padding-vertical) var(--instui-component-table-cell-padding-horizontal);
+  border-bottom: var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color);
+}
+`;
+}
+/**
+* Build the InstUI-look prose stylesheet, scoped to `options.scope` (default `.pantoken-prose`).
+*
+* @param options - {@link ProseOptions}.
+* @returns The CSS string.
+*
+* @demo self:prose
+*/
+function proseCss(options = {}) {
+	const scope = options.scope ?? ".pantoken-prose";
+	return `/* InstUI-look prose styles (@pantoken/components) — scope: ${scope} */\n${PROSE_DOC}\n${proseBody(scope).trim()}\n`;
+}
+//#endregion
+//#region src/components/select.ts
+/**
+* The **experimental** customizable-select enhancement for `.<prefix>-simple-select`. Bespoke (no
+* cssdoc record, not in the COMPONENTS registry): everything is gated behind
+* `@supports (appearance: base-select)`, and it ships as its own opt-in `select.css`. The CSS is
+* authored in `select.css` (with the `pfx-` prefix sentinel); this wrapper applies the prefix and the
+* standalone-sheet header.
+*
+* @module
+*/
+/**
+* The **experimental** customizable-select enhancement for `.<prefix>-simple-select`. Everything is
+* gated behind `@supports (appearance: base-select)` (the CSS Customizable Select model — Chrome 135+,
+* NOT yet Baseline), so it's pure progressive enhancement: browsers without support keep the plain
+* `simpleSelectCss` control; supporting browsers get a styled `::picker(select)` panel and styled
+* `option`s (hover/selected) from the `--instui-component-options-item-*` tokens. Shipped as its own
+* opt-in `select.css` (like `fonts.css`) rather than folded into `components.css`, precisely because the
+* feature is experimental — you opt in deliberately.
+*
+* @param options - {@link ComponentOptions}.
+* @returns The CSS string.
+*
+* @example
+* ```ts
+* import { selectCss } from "@pantoken/components";
+*
+* // Load AFTER components.css; enhances the same <select class="instui-simple-select"> element.
+* const css = selectCss();
+* ```
+*
+* @demo self:simple-select
+*/
+function selectCss(options = {}) {
+	const prefix = options.prefix || "";
+	return wrap("select", prefix, select.replaceAll(SENTINEL, ns(prefix)));
+}
+const viewCss = defineUtility({
+	name: "view",
+	css: (p) => {
+		const rule = (mod, decls) => `.${p}view.-${mod} { ${decls} }`;
+		const rules = [`.${p}view { display: block; box-sizing: border-box; }`];
+		for (const bg of [
+			"primary",
+			"secondary",
+			"primary-inverse",
+			"brand",
+			"info",
+			"alert",
+			"success",
+			"danger",
+			"warning"
+		]) rules.push(rule(`background-${bg}`, `background: var(--instui-component-view-background-${bg});`));
+		rules.push(rule("background-transparent", "background: transparent;"));
+		for (const [name, value] of [
+			["small", "var(--instui-border-radius-sm)"],
+			["medium", "var(--instui-border-radius-md)"],
+			["large", "var(--instui-border-radius-lg)"],
+			["circle", "50%"],
+			["pill", "var(--instui-border-radius-full)"]
+		]) rules.push(rule(`border-radius-${name}`, `border-radius: ${value};`));
+		for (const [name, size] of [
+			["small", "sm"],
+			["medium", "md"],
+			["large", "lg"]
+		]) rules.push(rule(`border-width-${name}`, `border-style: solid; border-width: var(--instui-border-width-${size}); border-color: var(--instui-color-stroke-base);`));
+		for (const [name, token] of [
+			["primary", "base"],
+			["brand", "brand"],
+			["success", "success"],
+			["info", "info"],
+			["warning", "warning"],
+			["danger", "error"]
+		]) rules.push(rule(`border-color-${name}`, `border-color: var(--instui-color-stroke-${token});`));
+		for (const s of [
+			"resting",
+			"above",
+			"topmost"
+		]) rules.push(rule(`shadow-${s}`, `box-shadow: var(--instui-elevation-${s});`));
+		for (const d of [
+			"block",
+			"inline-block",
+			"inline",
+			"flex",
+			"inline-flex",
+			"none"
+		]) rules.push(rule(`display-${d}`, `display: ${d};`));
+		for (const pos of [
+			"static",
+			"relative",
+			"absolute",
+			"fixed",
+			"sticky"
+		]) rules.push(rule(`position-${pos}`, `position: ${pos};`));
+		for (const o of [
+			"visible",
+			"hidden",
+			"auto",
+			"scroll",
+			"clip"
+		]) {
+			rules.push(rule(`overflow-x-${o}`, `overflow-x: ${o};`));
+			rules.push(rule(`overflow-y-${o}`, `overflow-y: ${o};`));
+		}
+		for (const c of [
+			"auto",
+			"default",
+			"pointer",
+			"not-allowed",
+			"text",
+			"move",
+			"grab",
+			"wait"
+		]) rules.push(rule(`cursor-${c}`, `cursor: ${c};`));
+		return css`/**
+ * @utility view
+ * @summary The View primitive: a neutral box with key-value modifiers for background, border, radius, shadow, display, position, overflow, and cursor.
+ * @modifier -background-primary — Primary surface background.
+ * @modifier -background-secondary — Secondary surface background.
+ * @modifier -background-primary-inverse — Inverse primary surface background.
+ * @modifier -background-brand — Brand surface background.
+ * @modifier -background-info — Info surface background.
+ * @modifier -background-alert — Alert surface background.
+ * @modifier -background-success — Success surface background.
+ * @modifier -background-danger — Danger surface background.
+ * @modifier -background-warning — Warning surface background.
+ * @modifier -background-transparent — Transparent background.
+ * @modifier -border-radius-small — Small corner radius.
+ * @modifier -border-radius-medium — Medium corner radius.
+ * @modifier -border-radius-large — Large corner radius.
+ * @modifier -border-radius-circle — Fully circular (50%) radius.
+ * @modifier -border-radius-pill — Pill (full) radius.
+ * @modifier -border-width-small — Small solid border in the base stroke colour.
+ * @modifier -border-width-medium — Medium solid border in the base stroke colour.
+ * @modifier -border-width-large — Large solid border in the base stroke colour.
+ * @modifier -border-color-primary — Base stroke border colour.
+ * @modifier -border-color-brand — Brand stroke border colour.
+ * @modifier -border-color-success — Success stroke border colour.
+ * @modifier -border-color-info — Info stroke border colour.
+ * @modifier -border-color-warning — Warning stroke border colour.
+ * @modifier -border-color-danger — Error stroke border colour.
+ * @modifier -shadow-resting — Resting elevation shadow.
+ * @modifier -shadow-above — Above elevation shadow.
+ * @modifier -shadow-topmost — Topmost elevation shadow.
+ * @modifier -display-block — display: block.
+ * @modifier -display-inline-block — display: inline-block.
+ * @modifier -display-inline — display: inline.
+ * @modifier -display-flex — display: flex.
+ * @modifier -display-inline-flex — display: inline-flex.
+ * @modifier -display-none — display: none.
+ * @modifier -position-static — position: static.
+ * @modifier -position-relative — position: relative.
+ * @modifier -position-absolute — position: absolute.
+ * @modifier -position-fixed — position: fixed.
+ * @modifier -position-sticky — position: sticky.
+ * @modifier -overflow-x-visible — overflow-x: visible.
+ * @modifier -overflow-x-hidden — overflow-x: hidden.
+ * @modifier -overflow-x-auto — overflow-x: auto.
+ * @modifier -overflow-x-scroll — overflow-x: scroll.
+ * @modifier -overflow-x-clip — overflow-x: clip.
+ * @modifier -overflow-y-visible — overflow-y: visible.
+ * @modifier -overflow-y-hidden — overflow-y: hidden.
+ * @modifier -overflow-y-auto — overflow-y: auto.
+ * @modifier -overflow-y-scroll — overflow-y: scroll.
+ * @modifier -overflow-y-clip — overflow-y: clip.
+ * @modifier -cursor-auto — cursor: auto.
+ * @modifier -cursor-default — cursor: default.
+ * @modifier -cursor-pointer — cursor: pointer.
+ * @modifier -cursor-not-allowed — cursor: not-allowed.
+ * @modifier -cursor-text — cursor: text.
+ * @modifier -cursor-move — cursor: move.
+ * @modifier -cursor-grab — cursor: grab.
+ * @modifier -cursor-wait — cursor: wait.
+ * @example
+ * <div class="instui-view -background-secondary -border-radius-medium -shadow-resting">A card-like surface.</div>
+ */
+${rules.join("\n")}`;
+	}
+}).css;
+const spacingUtilitiesCss = defineUtility({
+	name: "spacing",
+	css: (p) => {
+		const rules = [];
+		for (const [prop, letters, steps] of [[
+			"margin",
+			["m", "margin"],
+			{
+				...SPACING_STEPS,
+				auto: "auto"
+			}
+		], [
+			"padding",
+			["p", "padding"],
+			SPACING_STEPS
+		]]) for (const letter of letters) for (const [side, suffix] of Object.entries(SPACING_SIDES)) for (const [step, value] of Object.entries(steps)) rules.push(`.${p}${letter}${side}-${step} { ${prop}${suffix}: ${value}; }`);
+		return css`/**
+ * @utility spacing
+ * @class .instui-p-md
+ * @summary Margin and padding utilities — \`.instui-m<side>-<step>\` and \`.instui-p<side>-<step>\` on the spacing scale (sides \`t\`/\`b\`/\`s\`/\`e\`/\`x\`/\`y\` or none; margin also takes \`auto\`).
+ * @example
+ * <div class="instui-p-md instui-mt-lg">Padded box with a large top margin.</div>
+ */
+${rules.join("\n")}`;
+	}
+}).css;
+const layoutUtilitiesCss = defineUtility({
+	name: "layout",
+	css: (p) => css`/**
+ * @utility layout
+ * @class .instui-display-flex
+ * @summary Display and text-align utilities — \`.instui-display-<value>\` and \`.instui-text-align-<value>\` — as composable classes.
+ * @example
+ * <div class="instui-display-flex instui-text-align-center">
+ *   <span>One</span>
+ *   <span>Two</span>
+ * </div>
+ */
+${[...[
+		"block",
+		"inline-block",
+		"inline",
+		"flex",
+		"inline-flex",
+		"none"
+	].map((v) => `.${p}display-${v} { display: ${v}; }`), ...[
+		["start", "start"],
+		["center", "center"],
+		["end", "end"],
+		["justify", "justify"]
+	].map(([name, value]) => `.${p}text-align-${name} { text-align: ${value}; }`)].join("\n")}`
+}).css;
+const responsiveUtilitiesCss = defineUtility({
+	name: "responsive",
+	css: (p) => {
+		const bp = [
+			["sm", "30rem"],
+			["md", "48rem"],
+			["lg", "64rem"],
+			["xl", "80rem"]
+		];
+		return css`
+/**
+ * @utility responsive
+ * @class .instui-hidden-max-md
+ * @summary Responsive visibility: \`.instui-hidden-max-<bp>\` / \`-hidden-min-<bp>\` hide by viewport width; the \`-cq-\` variants react to a \`.instui-container\` ancestor's width instead. Breakpoints \`sm\`/\`md\`/\`lg\`/\`xl\`.
+ * @example
+ * <div class="instui-hidden-max-sm">Hidden at or below the small breakpoint.</div>
+ */${bp.map(([name, w]) => `@media (max-width: ${w}) { .${p}hidden-max-${name} { display: none !important; } }\n@media (min-width: ${w}) { .${p}hidden-min-${name} { display: none !important; } }`).join("\n")}\n.${p}container { container-type: inline-size; }\n${bp.map(([name, w]) => `@container (max-width: ${w}) { .${p}cq-hidden-max-${name} { display: none !important; } }\n@container (min-width: ${w}) { .${p}cq-hidden-min-${name} { display: none !important; } }`).join("\n")}\n`;
+	}
+}).css;
+//#endregion
+//#region src/utilities/icon-glyphs.ts
+/**
+* The glyph-token half of the icon system: one `.<prefix>-icon-<name>` class per icon that points
+* `--pantoken-glyph` at the matching `--instui-icon-<name>` token. Bespoke (no cssdoc record, not in
+* the UTILITIES registry) and shipped as its own large `icons.css`. The painter half — the shared
+* `::before` that masks the glyph — is the documented `icon` utility.
+*
+* @module
+*/
+/**
+* Build the icon-glyph stylesheet: one `.<prefix>-icon-<name>` class per icon that points
+* `--pantoken-glyph` at the matching `--instui-icon-<name>` token. Kept out of the component bundle
+* (it's large); ships as its own `icons.css`. Pass the icon names (e.g. from `@pantoken/icons`).
+*
+* @param names - Icon names without the `--instui-icon-` prefix (e.g. `["megaphone", "check"]`).
+* @param options - {@link IconGlyphsOptions} (adds `deprecatedAliases` to {@link ComponentOptions}).
+* @returns The CSS string.
+*
+* @example
+* ```ts
+* import { iconGlyphsCss } from "@pantoken/components";
+* import { icons } from "@pantoken/icons";
+*
+* const css = iconGlyphsCss(icons.map((i) => i.name)); // .-icon-megaphone { --pantoken-glyph: … }
+* ```
+*
+* This is the glyph-token half of the icon system (the `.-icon-<name>` modifiers, shipped as
+* `icons.css`); the `icon` utility is the painter half (the shared `::before`). They share the `icon`
+* demo.
+*/
+function iconGlyphsCss(names, options = {}) {
+	const prefix = options.prefix || "";
+	ns(prefix);
+	const prefixes = options.deprecatedAliases ? [
+		"-icon",
+		"-render-icon",
+		"-render-custom-icon"
+	] : ["-icon"];
+	const selectors = (name) => prefixes.map((pre) => `.${pre}-${name}`).join(", ");
+	return `/* InstUI icon glyphs (@pantoken/components) — prefix: ${prefix} */\n${names.map((name) => `${selectors(name)} { --pantoken-glyph: var(--instui-icon-${name}); }`).join("\n")}\n`;
+}
+//#endregion
+//#region src/index.ts
+/**
+* `@pantoken/components` — an InstUI-look CSS component library, built from the `--instui-*` tokens.
+*
+* The shipped stylesheets:
+*
+* - **Base** ({@link baseCss}) — opt-in global document defaults from the tokens (box-sizing, body
+*   reset, page surface, base text colour/font, `color-scheme`). It also carries the focus-outline
+*   ring, so every focusable gets an accessible `:focus-visible` outline out of the box. Load it when
+*   pantoken owns the page.
+* - **Prose** ({@link proseCss}) — styles rendered markdown/prose HTML (tables, headings, links,
+*   lists, code) scoped to a content root, so a docs page or content region looks like InstUI
+*   without swapping the DOM for components. This is what the site renderers ship as their
+*   `components.css`.
+* - **Components** ({@link buttonCss}, {@link alertCss}, {@link badgeCss}, aggregated by
+*   {@link componentsCss}) — class-based component styles you apply to your own markup
+*   (`<button class="instui-button">`), for the InstUI look outside a component framework. The
+*   `--instui-elevation-*` shadow scale ({@link elevationCss}) leads this sheet, since enough
+*   components float that shadows are an intrinsic design attribute rather than an add-on.
+* - **Utilities** ({@link viewCss}, {@link spacingUtilitiesCss}, {@link layoutUtilitiesCss}, plus a
+*   curated semantic-colour/token set) — an opt-in layer of cross-cutting classes. The generic
+*   token→class emitters (`colorUtilitiesCss`, `tokenUtilitiesCss`) live in `@pantoken/utils`; this
+*   package feeds them the curated *semantic* names, while `@pantoken/plugin-primitives` feeds the raw
+*   palette.
+* - **Fonts** (opt-in `fonts.css`) — the `@font-face` rules for the Instructure brand fonts. Base
+*   *applies* the font; `fonts.css` *loads* the woff2s, so text degrades gracefully without it.
+*
+* Everything is pure CSS derived from the token IR, so it tracks InstUI through the tokens with no
+* dependency on the InstUI React packages. For the real, interactive components, use
+* `@pantoken/react-markdown` (content) or `@instructure/ui-*` (apps).
+*
+* This module is a barrel: each documented record lives in its own file under
+* `components/`/`utilities/`/`rules/`/`declarations/`, authored with the `lib/` compose API. The
+* registries (`COMPONENTS`/`UTILITIES`/`RULES`/`DECLARATIONS`) drive aggregation + the parity test.
+*
+* @module
+* @beta
+*/
+/**
+* Build the opt-in base/reset stylesheet: global document defaults from the tokens (box-sizing, body
+* reset, page surface, base text colour/font, `color-scheme`, base link), followed by the focus ring
+* (a document-level default that targets bare focusables). Load it once, ahead of the component and
+* prose sheets, when pantoken owns the page.
+*
+* @returns The CSS string.
+*/
+function baseCss() {
+	return `/* InstUI-look base/reset (@pantoken/components) */\n${base.rules("").trim()}\n\n${focusOutlineCss()}`;
+}
+/**
+* Build the aggregated component stylesheet: the `--instui-elevation-*` scale (so shadows are intrinsic)
+* followed by every component's rules in the `COMPONENTS` concat order. The size-alias and
+* deprecated-alias twins are appended PER COMPONENT (within its own chunk) so each alias documents on
+* its own page — the deprecated aliases are discovered from each record's `@deprecated {@link -x}`
+* metadata (see `withAliases`), not a central hand-kept list.
+*
+* @param options - {@link ComponentOptions}.
+* @returns The CSS string.
+*/
+function componentsCss(options = {}) {
+	const prefix = options.prefix || "";
+	const rules = COMPONENTS.map((d) => d.rules(ns(prefix)).trim());
+	return `/* InstUI component styles (@pantoken/components) — prefix: ${prefix} */\n${elevationCss()}\n${rules.join("\n\n")}\n`;
+}
+//#endregion
+export { DEFAULT_PREFIX, ELEVATION_NAMES, FOCUSABLE_SELECTOR, alertCss, avatarCss, badgeCss, baseCss, billboardCss, breadcrumbCss, buttonCss, bylineCss, calendarCss, checkboxCss, closeButtonCss, componentsCss, contextViewCss, elevationCss, elevationDeclarations, fileDropCss, focusOutlineCss, focusOutlineDeclarations, focusOutlineRules, formFieldCss, formFieldGroupCss, formFieldMessagesCss, headingCss, iconCss, iconGlyphsCss, imgCss, inPlaceEditCss, inputGroupCss, layoutUtilitiesCss, linkCss, listCss, maskCss, menuCss, metricCss, modalCss, numberInputCss, paginationCss, pillCss, popoverCss, progressCircleCss, progressCss, proseCss, radioCss, radioInputGroupCss, rangeInputCss, ratingCss, responsiveUtilitiesCss, screenReaderContentCss, selectCss, sideNavBarCss, simpleSelectCss, spacingUtilitiesCss, spinnerCss, tableCss, tabsCss, tagCss, textAreaCss, textCss, textInputCss, toggleDetailsCss, toggleGroupCss, tooltipCss, trayCss, treeBrowserCss, truncateCss, viewCss };