@pantoken/components 1.0.2 → 1.1.0

package/dist/index.mjs

@@ -15,6 +15,32 @@ function deprecatedAliasPairs(rawRecord) {
 		canonical: m[2]
 	}));
 }
+/**
+* Append generated rules to a record body, landing them INSIDE a trailing `@scope (...) { … }` block
+* (right before its closing brace) rather than after it — a top-level `&` outside any nesting context
+* is invalid CSS, and several `.css`-authored records wrap their whole body in `@scope`. Falls back to a
+* plain append when the body doesn't end in a `@scope` block. Exported for records that need to append
+* their own interpolated, scope-relative (`&`) rules — e.g. button's AI-glyph mask and ghost washes.
+*/
+function appendGenerated(css, extra) {
+	const trimmed = css.trimEnd();
+	const startsWithScope = trimmed.startsWith("@scope ");
+	const scopeAt = startsWithScope ? 0 : trimmed.lastIndexOf("\n@scope ") + 1;
+	const openBrace = startsWithScope || scopeAt > 0 ? trimmed.indexOf("{", scopeAt) : -1;
+	if (openBrace < 0 || !trimmed.endsWith("}")) return `${css}\n${extra}\n`;
+	let depth = 0;
+	let closeIdx = -1;
+	for (let i = openBrace; i < trimmed.length; i++) if (trimmed[i] === "{") depth++;
+	else if (trimmed[i] === "}") {
+		depth--;
+		if (depth === 0) {
+			closeIdx = i;
+			break;
+		}
+	}
+	if (closeIdx !== trimmed.length - 1) return `${css}\n${extra}\n`;
+	return `${trimmed.slice(0, closeIdx)}\n${extra}\n${trimmed.slice(closeIdx)}\n`;
+}
 /** Long-form spellings for the size scale — emitted as first-class aliases beside the short forms. */
 const SIZE_LONG = {
 	"2xs": "xx-small",
@@ -36,7 +62,7 @@ function withSizeAliases(css) {
 		const long = selector.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\.-size-(2xs|xs|sm|md|lg|xl|2xl)\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;
+	return extra.length ? appendGenerated(css, `/* size aliases */\n${extra.join("\n")}`) : css;
 }
 /**
 * Document the long-form size twins {@link withSizeAliases} emits: for every short size class the body
@@ -80,14 +106,14 @@ function withAliases(css, aliases) {
 			extra.push(`/* alias of .${canonical} */\n${dep} ${body}`);
 		}
 	}
-	return extra.length ? `${css}\n${extra.join("\n")}\n` : css;
+	return extra.length ? appendGenerated(css, extra.join("\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.
+* `wrap` header, and the spacing scales. These carry no per-record content — every
+* `src/{components,utilities,rules,declarations}` module imports what it needs from here.
 *
 * @module
 */
@@ -98,24 +124,6 @@ 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");
-/** Lucide `chevron-down`, masked — the NumberInput down spinner glyph (painted in currentColor). */
-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`.
 */
@@ -292,9 +300,9 @@ const defineRule = (input) => make("rule", input);
 */
 const SENTINEL = "pfx-";
 const alert$1 = {
-	"rebrand": "/**\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 * @selector .pfx-alert\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 — @alias {@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 * @modifier -timeout — @interaction The alert will automatically dismiss after a default of 5 seconds.\n * @modifier -timeout-1 — One second before automatic dismissal.\n * @modifier -timeout-2 — Two seconds before automatic dismissal.\n * @modifier -timeout-3 — Three seconds before automatic dismissal.\n * @modifier -timeout-4 — Four seconds before automatic dismissal.\n * @modifier -timeout-5 — Five seconds before automatic dismissal.\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 * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\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 -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --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 *   <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   @component close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n  syntax: \"<integer>\";\n  inherits: false;\n  initial-value: 5;\n}\n\n@scope (.pfx-alert) {\n  & {\n    --timeout: 0;\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    /* 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-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\n  /* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n  &::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  &::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  &: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  /* screenReaderOnly: announced to assistive tech, but visually hidden. */\n  /* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n  &.-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  &.-color-info {\n    border-color: var(--instui-component-alert-info-border-color);\n  }\n\n  &.-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  &.-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  &.-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  &[class*=\"-icon-\"] {\n    --pantoken-alert-glyph: var(--pantoken-glyph);\n  }\n\n  &[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\n  &.-timeout-1 {\n    --timeout: 1000;\n  }\n\n  &.-timeout-2 {\n    --timeout: 2000;\n  }\n\n  &.-timeout-3 {\n    --timeout: 3000;\n  }\n\n  &.-timeout-4 {\n    --timeout: 4000;\n  }\n\n  &.-timeout-5 {\n    --timeout: 5000;\n  }\n\n  /* Deprecated aliases paired with supported modifiers via :is() for backward compatibility. */\n  &:is(.-has-shadow-false, .-without-shadow) {\n    box-shadow: none;\n  }\n\n  &:is(.-variant-info, .-color-info) {\n    border-color: var(--instui-component-alert-info-border-color);\n  }\n\n  &:is(.-variant-success, .-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  &:is(.-variant-warning, .-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  &:is(.-variant-error, .-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",
-	"canvas": "/**\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 * @selector .pfx-alert\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 — @alias {@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 * @modifier -timeout — @interaction The alert will automatically dismiss after a default of 5 seconds.\n * @modifier -timeout-1 — One second before automatic dismissal.\n * @modifier -timeout-2 — Two seconds before automatic dismissal.\n * @modifier -timeout-3 — Three seconds before automatic dismissal.\n * @modifier -timeout-4 — Four seconds before automatic dismissal.\n * @modifier -timeout-5 — Five seconds before automatic dismissal.\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 * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\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 -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --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 *   <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   @component close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n  syntax: \"<integer>\";\n  inherits: false;\n  initial-value: 5;\n}\n\n@scope (.pfx-alert) {\n  & {\n    --timeout: 0;\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    /* 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-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\n  /* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n  &::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  &::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  &: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  /* screenReaderOnly: announced to assistive tech, but visually hidden. */\n  /* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n  &.-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  &.-color-info {\n    border-color: var(--instui-component-alert-info-border-color);\n  }\n\n  &.-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  &.-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  &.-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  &[class*=\"-icon-\"] {\n    --pantoken-alert-glyph: var(--pantoken-glyph);\n  }\n\n  &[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\n  &.-timeout-1 {\n    --timeout: 1000;\n  }\n\n  &.-timeout-2 {\n    --timeout: 2000;\n  }\n\n  &.-timeout-3 {\n    --timeout: 3000;\n  }\n\n  &.-timeout-4 {\n    --timeout: 4000;\n  }\n\n  &.-timeout-5 {\n    --timeout: 5000;\n  }\n\n  /* Deprecated aliases paired with supported modifiers via :is() for backward compatibility. */\n  &:is(.-has-shadow-false, .-without-shadow) {\n    box-shadow: none;\n  }\n\n  &:is(.-variant-info, .-color-info) {\n    border-color: var(--instui-component-alert-info-border-color);\n  }\n\n  &:is(.-variant-success, .-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  &:is(.-variant-warning, .-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  &:is(.-variant-error, .-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",
-	"canvasHighContrast": "/**\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 * @selector .pfx-alert\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 — @alias {@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 * @modifier -timeout — @interaction The alert will automatically dismiss after a default of 5 seconds.\n * @modifier -timeout-1 — One second before automatic dismissal.\n * @modifier -timeout-2 — Two seconds before automatic dismissal.\n * @modifier -timeout-3 — Three seconds before automatic dismissal.\n * @modifier -timeout-4 — Four seconds before automatic dismissal.\n * @modifier -timeout-5 — Five seconds before automatic dismissal.\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 * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\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 -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --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 *   <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   @component close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n  syntax: \"<integer>\";\n  inherits: false;\n  initial-value: 5;\n}\n\n@scope (.pfx-alert) {\n  & {\n    --timeout: 0;\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    /* 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-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\n  /* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n  &::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  &::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  &: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  /* screenReaderOnly: announced to assistive tech, but visually hidden. */\n  /* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n  &.-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  &.-color-info {\n    border-color: var(--instui-component-alert-info-border-color);\n  }\n\n  &.-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  &.-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  &.-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  &[class*=\"-icon-\"] {\n    --pantoken-alert-glyph: var(--pantoken-glyph);\n  }\n\n  &[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\n  &.-timeout-1 {\n    --timeout: 1000;\n  }\n\n  &.-timeout-2 {\n    --timeout: 2000;\n  }\n\n  &.-timeout-3 {\n    --timeout: 3000;\n  }\n\n  &.-timeout-4 {\n    --timeout: 4000;\n  }\n\n  &.-timeout-5 {\n    --timeout: 5000;\n  }\n\n  /* Deprecated aliases paired with supported modifiers via :is() for backward compatibility. */\n  &:is(.-has-shadow-false, .-without-shadow) {\n    box-shadow: none;\n  }\n\n  &:is(.-variant-info, .-color-info) {\n    border-color: var(--instui-component-alert-info-border-color);\n  }\n\n  &:is(.-variant-success, .-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  &:is(.-variant-warning, .-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  &:is(.-variant-error, .-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"
+	"rebrand": "/**\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. A direct close button defaults to small; add a size modifier to override it.\n * @selector .pfx-alert\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 — @alias {@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 * @modifier -timeout — @interaction The alert will automatically dismiss after a default of 5 seconds.\n * @modifier -timeout-1 — One second before automatic dismissal.\n * @modifier -timeout-2 — Two seconds before automatic dismissal.\n * @modifier -timeout-3 — Three seconds before automatic dismissal.\n * @modifier -timeout-4 — Four seconds before automatic dismissal.\n * @modifier -timeout-5 — Five seconds before automatic dismissal.\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 * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\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 -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --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 *   <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   @component close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n  syntax: \"<integer>\";\n  inherits: false;\n  initial-value: 5;\n}\n\n@scope (.pfx-alert) {\n  & {\n    --timeout: 0;\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    /* 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-close-button:not([class*=\"-size-\"]) {\n      min-height: var(--instui-component-base-button-small-height);\n    }\n\n    > .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\n  /* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n  &::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  &::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  &: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  /* screenReaderOnly: announced to assistive tech, but visually hidden. */\n  /* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n  &.-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  &.-color-info {\n    border-color: var(--instui-component-alert-info-border-color);\n  }\n\n  &.-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  &.-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  &.-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  &[class*=\"-icon-\"] {\n    --pantoken-alert-glyph: var(--pantoken-glyph);\n  }\n\n  &[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\n  &.-timeout-1 {\n    --timeout: 1000;\n  }\n\n  &.-timeout-2 {\n    --timeout: 2000;\n  }\n\n  &.-timeout-3 {\n    --timeout: 3000;\n  }\n\n  &.-timeout-4 {\n    --timeout: 4000;\n  }\n\n  &.-timeout-5 {\n    --timeout: 5000;\n  }\n\n  /* Deprecated aliases paired with supported modifiers via :is() for backward compatibility. */\n  &:is(.-has-shadow-false, .-without-shadow) {\n    box-shadow: none;\n  }\n\n  &:is(.-variant-info, .-color-info) {\n    border-color: var(--instui-component-alert-info-border-color);\n  }\n\n  &:is(.-variant-success, .-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  &:is(.-variant-warning, .-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  &:is(.-variant-error, .-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",
+	"canvas": "/**\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. A direct close button defaults to small; add a size modifier to override it.\n * @selector .pfx-alert\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 — @alias {@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 * @modifier -timeout — @interaction The alert will automatically dismiss after a default of 5 seconds.\n * @modifier -timeout-1 — One second before automatic dismissal.\n * @modifier -timeout-2 — Two seconds before automatic dismissal.\n * @modifier -timeout-3 — Three seconds before automatic dismissal.\n * @modifier -timeout-4 — Four seconds before automatic dismissal.\n * @modifier -timeout-5 — Five seconds before automatic dismissal.\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 * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\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 -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --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 *   <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   @component close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n  syntax: \"<integer>\";\n  inherits: false;\n  initial-value: 5;\n}\n\n@scope (.pfx-alert) {\n  & {\n    --timeout: 0;\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    /* 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-close-button:not([class*=\"-size-\"]) {\n      min-height: var(--instui-component-base-button-small-height);\n    }\n\n    > .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\n  /* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n  &::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  &::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  &: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  /* screenReaderOnly: announced to assistive tech, but visually hidden. */\n  /* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n  &.-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  &.-color-info {\n    border-color: var(--instui-component-alert-info-border-color);\n  }\n\n  &.-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  &.-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  &.-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  &[class*=\"-icon-\"] {\n    --pantoken-alert-glyph: var(--pantoken-glyph);\n  }\n\n  &[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\n  &.-timeout-1 {\n    --timeout: 1000;\n  }\n\n  &.-timeout-2 {\n    --timeout: 2000;\n  }\n\n  &.-timeout-3 {\n    --timeout: 3000;\n  }\n\n  &.-timeout-4 {\n    --timeout: 4000;\n  }\n\n  &.-timeout-5 {\n    --timeout: 5000;\n  }\n\n  /* Deprecated aliases paired with supported modifiers via :is() for backward compatibility. */\n  &:is(.-has-shadow-false, .-without-shadow) {\n    box-shadow: none;\n  }\n\n  &:is(.-variant-info, .-color-info) {\n    border-color: var(--instui-component-alert-info-border-color);\n  }\n\n  &:is(.-variant-success, .-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  &:is(.-variant-warning, .-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  &:is(.-variant-error, .-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",
+	"canvasHighContrast": "/**\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. A direct close button defaults to small; add a size modifier to override it.\n * @selector .pfx-alert\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 — @alias {@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 * @modifier -timeout — @interaction The alert will automatically dismiss after a default of 5 seconds.\n * @modifier -timeout-1 — One second before automatic dismissal.\n * @modifier -timeout-2 — Two seconds before automatic dismissal.\n * @modifier -timeout-3 — Three seconds before automatic dismissal.\n * @modifier -timeout-4 — Four seconds before automatic dismissal.\n * @modifier -timeout-5 — Five seconds before automatic dismissal.\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 * @cssproperty --timeout <integer> — Milliseconds before automatic dismissal; `0` disables it. Requires the alert interaction bundle.\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 -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone --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 *   <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   @component close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n  syntax: \"<integer>\";\n  inherits: false;\n  initial-value: 5;\n}\n\n@scope (.pfx-alert) {\n  & {\n    --timeout: 0;\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    /* 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-close-button:not([class*=\"-size-\"]) {\n      min-height: var(--instui-component-base-button-small-height);\n    }\n\n    > .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\n  /* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n  &::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  &::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  &: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  /* screenReaderOnly: announced to assistive tech, but visually hidden. */\n  /* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n  &.-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  &.-color-info {\n    border-color: var(--instui-component-alert-info-border-color);\n  }\n\n  &.-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  &.-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  &.-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  &[class*=\"-icon-\"] {\n    --pantoken-alert-glyph: var(--pantoken-glyph);\n  }\n\n  &[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\n  &.-timeout-1 {\n    --timeout: 1000;\n  }\n\n  &.-timeout-2 {\n    --timeout: 2000;\n  }\n\n  &.-timeout-3 {\n    --timeout: 3000;\n  }\n\n  &.-timeout-4 {\n    --timeout: 4000;\n  }\n\n  &.-timeout-5 {\n    --timeout: 5000;\n  }\n\n  /* Deprecated aliases paired with supported modifiers via :is() for backward compatibility. */\n  &:is(.-has-shadow-false, .-without-shadow) {\n    box-shadow: none;\n  }\n\n  &:is(.-variant-info, .-color-info) {\n    border-color: var(--instui-component-alert-info-border-color);\n  }\n\n  &:is(.-variant-success, .-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  &:is(.-variant-warning, .-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  &:is(.-variant-error, .-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"
 }.rebrand;
 const avatar$1 = {
 	"rebrand": "/**\n * @component avatar\n * @selector .pfx-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. For a full display name, put it in the content (so it stays in the accessibility tree) and add `data-initials=\"XX\"` for the compact visual — the real text is what a screen reader announces. Without `data-initials`, overflowing content just hard-clips (no ellipsis); wrap it in `.name` for a precise single-leading-letter clip instead, or split it into `.first-name`/`.last-name` for two clipped letters (either half can be omitted and the other stays centred).\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-always — Force the border ring on, even over an image or an inverse fill.\n * @modifier -show-border-never — Force the border ring off.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (the default).\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 * @modifier -show-border — @alias {@link -show-border-always}\n * @part .name — Optional: wrap the full name to clip it to a single leading letter without data-initials or JS.\n * @part .first-name — Optional (pairs with .last-name): wraps the given name, clipped to its leading letter.\n * @part .last-name — Optional (pairs with .first-name): wraps the family name, clipped to its leading letter.\n * @a11y Give an image avatar a meaningful `alt` (the person's name), not a generic \"avatar\"; for initials-only avatars, prefer real name content (bare text, data-initials, .name, or .first-name/.last-name) over pre-abbreviated letters, so assistive tech announces the real name.\n * @example\n * ```html\n * <span class=\"pfx-avatar --me-sm\">LH</span>\n * <span class=\"pfx-avatar -color-ai --me-sm\">AI</span>\n * <span class=\"pfx-avatar --me-sm\" data-initials=\"NV\">Dr. Nguyen Van Thoc</span>\n * <span class=\"pfx-avatar\"><span class=\"name\">Miguel Sanchez</span></span>\n * <span class=\"pfx-avatar\"><span class=\"first-name\">Miguel</span> <span class=\"last-name\">Sanchez</span></span>\n * ```\n * @structure\n * The avatar shows one of: an <img>, bare/data-initials text, a .name wrap, or a .first-name/.last-name pair.\n * .pfx-avatar {\n *   img:optional {}\n *   .name:optional {}\n *   .first-name:optional {}\n *   .last-name:optional {}\n * }\n * @related byline — Can host an avatar as its leading hero figure.\n * @sealed\n * @stable\n */\n@scope (.pfx-avatar) {\n  :scope {\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    white-space: nowrap;\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 transparent;\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    &.-shape-rectangle {\n      border-radius: var(--instui-component-avatar-rectangle-radius);\n    }\n\n    /* showBorder (unset/auto): only an avatar without an image gets the default border ring. */\n    &:not(:has(> img)) {\n      border-color: var(--instui-component-avatar-border-color);\n    }\n\n    /* data-initials: the real name stays as content for accessibility; ::before shows the compact form. */\n    &[data-initials] {\n      font-size: 0;\n\n      &::before {\n        content: attr(data-initials);\n        font-size: var(--instui-component-avatar-font-size-md);\n      }\n    }\n\n    /* A photo: an <img> child fills the chip and covers the initials (image takes priority). Its\n       radius is duplicated per shape (not `inherit`) so a sealed record never carries a reset-like\n       value. */\n    > img {\n      inline-size: 100%;\n      block-size: 100%;\n      object-fit: cover;\n      border-radius: 50%;\n    }\n\n    &.-shape-rectangle > img {\n      border-radius: var(--instui-component-avatar-rectangle-radius);\n    }\n\n    /* .name / .first-name+.last-name are mutually exclusive alternatives for a display name, so each\n       guards against the other's markup also being present; either way, each part clips to a single\n       leading letter — an inline-block can be clamped to 1ch independently of the host's own fixed\n       dimensions, which a bare text node inside the flex host cannot. Missing one of first/last just\n       leaves the other centred (the host is already a centred flex box) — a precise no-data-initials,\n       no-JS fallback either way. */\n    &:not(:has([class*=\"-name\"])) .name,\n    &:not(:has(.name)) .first-name,\n    &:not(:has(.name)) .last-name {\n      display: inline-block;\n      max-width: 1ch;\n      overflow: hidden;\n      white-space: nowrap;\n      vertical-align: middle;\n    }\n  }\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/* Explicit (redundant-with-default) so the medium long-form size alias has a rule to clone. */\n.pfx-avatar.-size-md {\n  width: var(--instui-component-avatar-size-md);\n  height: var(--instui-component-avatar-size-md);\n  font-size: var(--instui-component-avatar-font-size-md);\n}\n\n.pfx-avatar.-size-2xs[data-initials]::before {\n  font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs[data-initials]::before {\n  font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-sm[data-initials]::before {\n  font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-lg[data-initials]::before {\n  font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl[data-initials]::before {\n  font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl[data-initials]::before {\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-always {\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/* showBorder=\"never\": force the ring off, even without an image. */\n.pfx-avatar.-show-border-never {\n  border-color: transparent;\n}\n",
@@ -307,9 +315,9 @@ const badge$1 = {
 	"canvasHighContrast": "/**\n * @component badge\n * @selector .pfx-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 * ```html\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 * ```\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\n  to {\n    transform: scale(1.8);\n    opacity: 0;\n  }\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\n@scope (.pfx-badge) {\n  :scope {\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    &.-color-success {\n      --pantoken-badge-accent: var(--instui-component-badge-color-success);\n      --pantoken-badge-text: var(--instui-component-badge-color);\n    }\n\n    &.-color-danger {\n      --pantoken-badge-accent: var(--instui-component-badge-color-danger);\n      --pantoken-badge-text: var(--instui-component-badge-color);\n    }\n\n    /* Inverse swaps fill and text (InstUI): a light chip with dark text, for a colour/dark surface. */\n    &.-color-inverse {\n      --pantoken-badge-accent: var(--instui-component-badge-color);\n      --pantoken-badge-text: var(--instui-component-badge-color-inverse);\n    }\n\n    /* Notification: a small dot, no count. */\n    &.-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\n    /* Pulse: an expanding ring in the badge's accent colour (InstUI `pulse`). */\n    &.-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\n    /* Placement: position the badge over a `.badge-wrapper` target. InstUI's countOffset is 0.5rem. */\n    &.-placement-top-end,\n    &.-placement-top-start,\n    &.-placement-bottom-end,\n    &.-placement-bottom-start,\n    &.-placement-start-center,\n    &.-placement-end-center {\n      position: absolute;\n    }\n\n    &.-placement-top-end {\n      top: -0.5rem;\n      inset-inline-end: -0.5rem;\n    }\n\n    &.-placement-top-start {\n      top: -0.5rem;\n      inset-inline-start: -0.5rem;\n    }\n\n    &.-placement-bottom-end {\n      bottom: -0.5rem;\n      inset-inline-end: -0.5rem;\n    }\n\n    &.-placement-bottom-start {\n      bottom: -0.5rem;\n      inset-inline-start: -0.5rem;\n    }\n\n    &.-placement-end-center {\n      top: 50%;\n      inset-inline-end: -0.5rem;\n      transform: translateY(-50%);\n    }\n\n    &.-placement-start-center {\n      top: 50%;\n      inset-inline-start: -0.5rem;\n      transform: translateY(-50%);\n    }\n\n    /* Standalone: the inline chip, in flow — resets any placement. */\n    &.-standalone {\n      position: relative;\n      inset: auto;\n      transform: none;\n    }\n  }\n}\n"
 }.rebrand;
 const billboardByTheme = {
-	"rebrand": "/**\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  :scope {\n    /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n    > .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    > .hero[class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    &.-size-sm > .hero {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero,\n    &.-size-medium > .hero {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-sm > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-small > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero[class*=\"-icon-\"],\n    &.-size-medium > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-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    > .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    > .message {\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-font-size-text-base);\n    }\n\n    &.-clickable:hover > .hero {\n      color: var(--instui-component-link-text-color);\n    }\n\n    &.-clickable:active > .hero {\n      color: var(--instui-component-link-on-color-text-color);\n    }\n  }\n}\n",
-	"canvas": "/**\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:hover {\n    border-color: var(--instui-component-link-text-color);\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 {\n    border-style: dashed;\n    border-color: var(--instui-component-link-text-color);\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.pfx-billboard.-clickable:active {\n    border-style: dashed;\n    background: var(--instui-focus-outline-color);\n    border-color: var(--instui-component-link-text-color);\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  :scope {\n    /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n    > .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    > .hero[class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    &.-size-sm > .hero {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero,\n    &.-size-medium > .hero {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-sm > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-small > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero[class*=\"-icon-\"],\n    &.-size-medium > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-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    > .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    > .message {\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-font-size-text-base);\n    }\n\n    &.-clickable:hover > .hero {\n      color: var(--instui-component-link-text-color);\n    }\n\n    &.-clickable:active > .hero {\n      color: var(--instui-component-link-on-color-text-color);\n    }\n  }\n}\n",
-	"canvasHighContrast": "/**\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:hover {\n    border-color: var(--instui-component-link-text-color);\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 {\n    border-style: dashed;\n    border-color: var(--instui-component-link-text-color);\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.pfx-billboard.-clickable:active {\n    border-style: dashed;\n    background: var(--instui-focus-outline-color);\n    border-color: var(--instui-component-link-text-color);\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  :scope {\n    /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n    > .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    > .hero[class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    &.-size-sm > .hero {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero,\n    &.-size-medium > .hero {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-sm > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-small > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero[class*=\"-icon-\"],\n    &.-size-medium > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-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    > .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    > .message {\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-font-size-text-base);\n    }\n\n    &.-clickable:hover > .hero {\n      color: var(--instui-component-link-text-color);\n    }\n\n    &.-clickable:active > .hero {\n      color: var(--instui-component-link-on-color-text-color);\n    }\n  }\n}\n"
+	"rebrand": "/**\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 * @remarks The `.hero`/`.heading`/`.message` parts are composed by the consumer's markup, not enforced structure; `-clickable` only adds hover styling, so a real click target still needs `tabindex` and a keyboard handler.\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  :scope {\n    /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n    > .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    > .hero[class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    &.-size-sm > .hero {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero,\n    &.-size-medium > .hero {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-sm > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-small > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero[class*=\"-icon-\"],\n    &.-size-medium > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-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    > .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    > .message {\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-font-size-text-base);\n    }\n\n    &.-clickable:hover > .hero {\n      color: var(--instui-component-link-text-color);\n    }\n\n    &.-clickable:active > .hero {\n      color: var(--instui-component-link-on-color-text-color);\n    }\n  }\n}\n",
+	"canvas": "/**\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 * @remarks The `.hero`/`.heading`/`.message` parts are composed by the consumer's markup, not enforced structure; `-clickable` only adds hover styling, so a real click target still needs `tabindex` and a keyboard handler.\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:hover {\n    border-color: var(--instui-component-link-text-color);\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 {\n    border-style: dashed;\n    border-color: var(--instui-component-link-text-color);\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.pfx-billboard.-clickable:active {\n    border-style: dashed;\n    background: var(--instui-focus-outline-color);\n    border-color: var(--instui-component-link-text-color);\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  :scope {\n    /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n    > .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    > .hero[class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    &.-size-sm > .hero {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero,\n    &.-size-medium > .hero {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-sm > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-small > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero[class*=\"-icon-\"],\n    &.-size-medium > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-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    > .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    > .message {\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-font-size-text-base);\n    }\n\n    &.-clickable:hover > .hero {\n      color: var(--instui-component-link-text-color);\n    }\n\n    &.-clickable:active > .hero {\n      color: var(--instui-component-link-on-color-text-color);\n    }\n  }\n}\n",
+	"canvasHighContrast": "/**\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 * @remarks The `.hero`/`.heading`/`.message` parts are composed by the consumer's markup, not enforced structure; `-clickable` only adds hover styling, so a real click target still needs `tabindex` and a keyboard handler.\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:hover {\n    border-color: var(--instui-component-link-text-color);\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 {\n    border-style: dashed;\n    border-color: var(--instui-component-link-text-color);\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.pfx-billboard.-clickable:active {\n    border-style: dashed;\n    background: var(--instui-focus-outline-color);\n    border-color: var(--instui-component-link-text-color);\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  :scope {\n    /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n    > .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    > .hero[class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    &.-size-sm > .hero {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero,\n    &.-size-medium > .hero {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-sm > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-small > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero[class*=\"-icon-\"],\n    &.-size-medium > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-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    > .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    > .message {\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-font-size-text-base);\n    }\n\n    &.-clickable:hover > .hero {\n      color: var(--instui-component-link-text-color);\n    }\n\n    &.-clickable:active > .hero {\n      color: var(--instui-component-link-on-color-text-color);\n    }\n  }\n}\n"
 };
 billboardByTheme.rebrand;
 const breadcrumb$1 = {
@@ -322,6 +330,11 @@ const breadcrumbLink$1 = {
 	"canvas": "/**\n * @component breadcrumb.link\n * @memberOf breadcrumb\n * @selector li\n * @summary A crumb (InstUI `Breadcrumb.Link`), an `<li>` in the parent's `<ol>`; the last one is the current page.\n * @remarks The parent `breadcrumb`'s `-size-sm`/`-size-lg` modifiers adjust this member's separator spacing — see `breadcrumb`'s own doc for those modifiers.\n * @pseudo ::after — Renders the chevron separator after every crumb except the last; mirrors to `chevron-left` in `[dir=\"rtl\"]`.\n * @pseudo ::before — In a collapsed parent draws a masked back-arrow before this crumb's second-to-last link.\n * @media (--breakpoint-large-down) — Collapses the trail, showing only the previous crumb and a back arrow.\n * @a11y Mark the current page's crumb with `aria-current=\"page\"` — on its `<a>` if it's a link, otherwise on the `<li>` itself.\n * @structure\n * @component breadcrumb {\n *   ol {\n *     li {\n *       a {}\n *     }\n *   }\n * }\n * @sealed\n * @stable\n */\n\n@scope (.pfx-breadcrumb) {\n  :scope {\n    &.-size-sm li:not(:last-child)::after {\n      margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n    }\n\n    &.-size-md li:not(:last-child)::after {\n      margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n    }\n\n    &.-size-lg li:not(:last-child)::after {\n      margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n    }\n\n    > ol > li {\n      margin: 0;\n    }\n\n    a {\n      color: var(--instui-component-link-text-color);\n      text-decoration: none;\n    }\n\n    a[class*=\"-icon-\"]::before {\n      margin-inline-end: var(--instui-spacing-space2xs);\n    }\n\n    a:hover {\n      color: var(--instui-component-link-text-hover-color);\n      text-decoration: underline;\n    }\n\n    li:not(:last-child) {\n      color: var(--instui-color-text-muted);\n    }\n\n    li:not(:last-child)::after {\n      content: \"\";\n      display: inline-block;\n      inline-size: 1em;\n      block-size: 1em;\n      vertical-align: -0.125em;\n      margin-inline-start: var(--instui-component-breadcrumb-gap-md);\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    }\n\n    [dir=\"rtl\"] & li:not(:last-child)::after {\n      -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n      mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n    }\n\n    @media (max-width: 47.9375em) {\n      > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n        display: none;\n      }\n\n      li:not(:last-child)::after {\n        display: none;\n      }\n\n      li:nth-last-child(2)::before {\n        content: \"\";\n        display: inline-block;\n        inline-size: 1em;\n        block-size: 1em;\n        vertical-align: -0.125em;\n        margin-inline-end: var(--instui-component-breadcrumb-gap-md);\n        background: currentColor;\n        -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n        mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n      }\n\n      [dir=\"rtl\"] & > li:nth-last-child(2) > a::before {\n        -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n        mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n      }\n    }\n  }\n}\n",
 	"canvasHighContrast": "/**\n * @component breadcrumb.link\n * @memberOf breadcrumb\n * @selector li\n * @summary A crumb (InstUI `Breadcrumb.Link`), an `<li>` in the parent's `<ol>`; the last one is the current page.\n * @remarks The parent `breadcrumb`'s `-size-sm`/`-size-lg` modifiers adjust this member's separator spacing — see `breadcrumb`'s own doc for those modifiers.\n * @pseudo ::after — Renders the chevron separator after every crumb except the last; mirrors to `chevron-left` in `[dir=\"rtl\"]`.\n * @pseudo ::before — In a collapsed parent draws a masked back-arrow before this crumb's second-to-last link.\n * @media (--breakpoint-large-down) — Collapses the trail, showing only the previous crumb and a back arrow.\n * @a11y Mark the current page's crumb with `aria-current=\"page\"` — on its `<a>` if it's a link, otherwise on the `<li>` itself.\n * @structure\n * @component breadcrumb {\n *   ol {\n *     li {\n *       a {}\n *     }\n *   }\n * }\n * @sealed\n * @stable\n */\n\n@scope (.pfx-breadcrumb) {\n  :scope {\n    &.-size-sm li:not(:last-child)::after {\n      margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n    }\n\n    &.-size-md li:not(:last-child)::after {\n      margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n    }\n\n    &.-size-lg li:not(:last-child)::after {\n      margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n    }\n\n    > ol > li {\n      margin: 0;\n    }\n\n    a {\n      color: var(--instui-component-link-text-color);\n      text-decoration: none;\n    }\n\n    a[class*=\"-icon-\"]::before {\n      margin-inline-end: var(--instui-spacing-space2xs);\n    }\n\n    a:hover {\n      color: var(--instui-component-link-text-hover-color);\n      text-decoration: underline;\n    }\n\n    li:not(:last-child) {\n      color: var(--instui-color-text-muted);\n    }\n\n    li:not(:last-child)::after {\n      content: \"\";\n      display: inline-block;\n      inline-size: 1em;\n      block-size: 1em;\n      vertical-align: -0.125em;\n      margin-inline-start: var(--instui-component-breadcrumb-gap-md);\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    }\n\n    [dir=\"rtl\"] & li:not(:last-child)::after {\n      -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n      mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n    }\n\n    @media (max-width: 47.9375em) {\n      > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n        display: none;\n      }\n\n      li:not(:last-child)::after {\n        display: none;\n      }\n\n      li:nth-last-child(2)::before {\n        content: \"\";\n        display: inline-block;\n        inline-size: 1em;\n        block-size: 1em;\n        vertical-align: -0.125em;\n        margin-inline-end: var(--instui-component-breadcrumb-gap-md);\n        background: currentColor;\n        -webkit-mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n        mask: var(--instui-icon-chevron-left) center / contain no-repeat;\n      }\n\n      [dir=\"rtl\"] & > li:nth-last-child(2) > a::before {\n        -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n        mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n      }\n    }\n  }\n}\n"
 }.rebrand;
+const button$1 = {
+	"rebrand": "/**\n * @component button\n * @summary An accessible action control, styled from the token palette; primary by default.\n * @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. `-without-background` 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. Also sets its own icon/label `gap` and horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. The optional `.pfx-button-group` wrapper maps Figma's `.buttonGroup` and owns adjacent button spacing.\n * @selector .pfx-button\n * @modifier -color-primary — (default) the primary action.\n * @modifier -color-secondary — A lower-emphasis secondary action.\n * @modifier -color-tertiary — A text-style action (no fill or border until hover).\n * @modifier -color-danger — A destructive action.\n * @modifier -shape-circle — A round icon button.\n * @modifier -condensed — Tighter padding for dense toolbars.\n * @modifier -toggle — A pressed-state toggle button (drive with aria-pressed).\n * @modifier -without-background — Drop the fill (ghost).\n * @modifier -color-success — A positive/confirming action.\n * @modifier -color-ai — An AI action.\n * @modifier -color-ai-secondary — A lower-emphasis AI action.\n * @modifier -color-primary-inverse — @deprecated {@link -on-color}\n * @modifier -on-color — For a button placed on a coloured (non-neutral) surface. Composed with `-color-primary` (default) fills white with dark text; composed with `-color-secondary` stays transparent with a white border and text.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) medium size.\n * @modifier -size-lg — Large.\n * @modifier -shape-square — A square icon button.\n * @modifier -display-block — Full-width block button.\n * @modifier -ghost — @deprecated {@link -color-tertiary}\n * @modifier -without-border — Remove the border.\n * @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.\n * @pseudo ::before — The AI glyph, added automatically to AI buttons and masked in the variant's own colour.\n * @pseudo ::after — The AI-secondary gradient border ring, masked to just the button's frame.\n * @cssstate disabled\n * @cssstate pressed\n * @a11y Drive the `-toggle` variant's pressed state with `aria-pressed`, and mark a disabled button with `aria-disabled` (or the native `disabled`).\n * @example\n * ```html\n * <div class=\"pfx-button-group\">\n *   <button class=\"pfx-button\">Primary</button>\n *   <button class=\"pfx-button -color-secondary\">Secondary</button>\n * </div>\n * ```\n * @wrapper pfx-button-group\n * @structure\n * A group wrapper lays out adjacent buttons with the shared button gap.\n * .pfx-button-group:opt {\n *   .pfx-button:one-or-more {}\n * }\n * @related close-button — The icon-only dismiss button.\n * @demo self:button\n */\n@scope (.pfx-button) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--instui-spacing-space-xs);\n    min-height: var(--instui-component-base-button-medium-height);\n    padding: var(--instui-spacing-space-xs)\n      var(--instui-component-base-button-medium-padding-horizontal);\n    font-family: var(--instui-font-family-base);\n    font-size: var(--instui-component-base-button-medium-font-size);\n    font-weight: var(--instui-font-weight-interactive);\n    line-height: var(--instui-line-height-standalone-text-base);\n    border: var(--instui-border-width-sm) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    cursor: pointer;\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n\n  &:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n  }\n\n  &:active {\n    background: var(--instui-color-background-interactive-action-primary-active);\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    background: var(--instui-component-base-button-primary-disabled-background-color);\n    border-color: var(--instui-component-base-button-primary-disabled-border-color);\n    color: var(--instui-component-base-button-primary-color);\n    cursor: not-allowed;\n  }\n\n  &.-color-primary {\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-stroke-interactive-action-primary-base);\n  }\n\n  &.-color-primary:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-stroke-interactive-action-primary-hover);\n  }\n\n  &.-color-primary:active {\n    background: var(--instui-color-background-interactive-action-primary-active);\n    border-color: var(--instui-color-stroke-interactive-action-primary-active);\n  }\n\n  &.-color-primary:disabled,\n  &.-color-primary[aria-disabled=\"true\"] {\n    background: var(--instui-component-base-button-primary-disabled-background-color);\n    border-color: var(--instui-component-base-button-primary-disabled-border-color);\n    color: var(--instui-component-base-button-primary-color);\n  }\n\n  &.-color-secondary {\n    background: var(--instui-component-base-button-secondary-background);\n    color: var(--instui-component-base-button-secondary-color);\n    border-color: var(--instui-component-base-button-secondary-border-color);\n  }\n\n  &.-color-secondary:hover {\n    background: var(--instui-component-base-button-secondary-hover-background);\n    border-color: var(--instui-component-base-button-secondary-hover-border-color);\n    color: var(--instui-component-base-button-secondary-hover-text-color);\n  }\n\n  &.-color-secondary:active {\n    background: var(--instui-component-base-button-secondary-active-background);\n    border-color: var(--instui-component-base-button-secondary-active-border-color);\n    color: var(--instui-component-base-button-secondary-active-text-color);\n  }\n\n  &.-color-secondary:disabled,\n  &.-color-secondary[aria-disabled=\"true\"] {\n    background: var(--instui-component-base-button-secondary-disabled-background-color);\n    border-color: var(--instui-component-base-button-secondary-disabled-border-color);\n    color: var(--instui-component-base-button-secondary-disabled-text-color);\n  }\n\n  &.-color-danger {\n    background: var(--instui-color-background-interactive-action-destructive-base);\n    color: var(--instui-color-text-interactive-action-status-base);\n  }\n\n  &.-color-danger:hover {\n    background: var(--instui-color-background-interactive-action-destructive-hover);\n  }\n\n  &.-color-danger:active {\n    background: var(--instui-color-background-interactive-action-destructive-active);\n  }\n\n  &.-color-success {\n    background: var(--instui-color-background-interactive-action-success-base);\n    color: var(--instui-color-text-interactive-action-status-base);\n  }\n\n  &.-color-success:hover {\n    background: var(--instui-color-background-interactive-action-success-hover);\n  }\n\n  &.-color-tertiary,\n  &.-ghost {\n    background: transparent;\n    color: var(--instui-component-base-button-primary-ghost-color);\n    border-color: var(--instui-component-base-button-primary-ghost-border-color);\n  }\n\n  &.-color-tertiary:hover,\n  &.-ghost:hover {\n    background: var(--instui-component-base-button-primary-ghost-hover-background);\n    border-color: var(--instui-component-base-button-tertiary-hover-border-color);\n    color: var(--instui-component-base-button-tertiary-hover-text-color);\n  }\n\n  &.-color-tertiary:active,\n  &.-ghost:active {\n    background: var(--instui-component-base-button-primary-ghost-active-background);\n    border-color: var(--instui-component-base-button-tertiary-active-border-color);\n    color: var(--instui-component-base-button-tertiary-active-text-color);\n  }\n\n  &.-color-tertiary:disabled,\n  &.-color-tertiary[aria-disabled=\"true\"],\n  &.-ghost:disabled,\n  &.-ghost[aria-disabled=\"true\"] {\n    background: transparent;\n    border-color: var(--instui-component-base-button-tertiary-disabled-border-color);\n    color: var(--instui-component-base-button-tertiary-disabled-text-color);\n  }\n\n  &.-color-primary-inverse {\n    background: var(--instui-component-base-button-primary-inverse-background);\n    color: var(--instui-component-base-button-primary-inverse-color);\n    border-color: var(--instui-component-base-button-primary-inverse-border-color);\n  }\n\n  /* On hover the border tracks the (light) hover fill, so it reads as no visible border. */\n  &.-color-primary-inverse:hover {\n    background: var(--instui-component-base-button-primary-inverse-hover-background);\n    border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n  }\n\n  &.-color-primary-inverse:active {\n    background: var(--instui-component-base-button-primary-inverse-active-background);\n    border-color: var(--instui-component-base-button-primary-on-color-active-border-color);\n  }\n\n  /*\n   * --on-color composes with primary (default) and secondary for a button placed on a coloured\n   * surface, reading the full base/hover/active/disabled set from the on-color colour tokens rather\n   * than the component layer (which only aliases hover/active/disabled). Primary fills white with\n   * dark text; secondary stays transparent with a white border and text — there's no\n   * secondary-on-color background token, matching InstUI.\n   */\n  &.-on-color:not([class*=\"-color-\"]),\n  &.-color-primary.-on-color {\n    background: var(--instui-component-base-button-primary-inverse-background);\n    border-color: var(--instui-component-base-button-primary-inverse-border-color);\n    color: var(--instui-component-base-button-primary-inverse-color);\n  }\n\n  &.-on-color:not([class*=\"-color-\"]):hover,\n  &.-color-primary.-on-color:hover {\n    background: var(--instui-component-base-button-primary-inverse-hover-background);\n    border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n    color: var(--instui-component-base-button-primary-on-color-hover-text-color);\n  }\n\n  &.-on-color:not([class*=\"-color-\"]):active,\n  &.-color-primary.-on-color:active {\n    background: var(--instui-component-base-button-primary-inverse-active-background);\n    border-color: var(--instui-component-base-button-primary-on-color-active-border-color);\n    color: var(--instui-component-base-button-primary-on-color-active-text-color);\n  }\n\n  &.-on-color:not([class*=\"-color-\"]):disabled,\n  &.-on-color:not([class*=\"-color-\"])[aria-disabled=\"true\"],\n  &.-color-primary.-on-color:disabled,\n  &.-color-primary.-on-color[aria-disabled=\"true\"] {\n    background: var(--instui-component-base-button-primary-on-color-disabled-background-color);\n    border-color: var(--instui-component-base-button-primary-on-color-disabled-border-color);\n    color: var(--instui-component-base-button-primary-on-color-disabled-text-color);\n  }\n\n  &.-color-secondary.-on-color {\n    background: transparent;\n    border-color: var(--instui-component-base-button-primary-inverse-ghost-border-color);\n    color: var(--instui-component-base-button-primary-inverse-ghost-color);\n  }\n\n  &.-color-secondary.-on-color:hover {\n    background: var(--instui-component-base-button-primary-inverse-ghost-hover-background);\n    border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n    color: var(--instui-component-base-button-secondary-on-color-hover-text-color);\n  }\n\n  &.-color-secondary.-on-color:active {\n    background: var(--instui-component-base-button-primary-inverse-ghost-active-background);\n    border-color: var(--instui-component-base-button-secondary-on-color-active-border-color);\n    color: var(--instui-component-base-button-secondary-on-color-active-text-color);\n  }\n\n  &.-color-secondary.-on-color:disabled,\n  &.-color-secondary.-on-color[aria-disabled=\"true\"] {\n    background: transparent;\n    border-color: var(--instui-component-base-button-secondary-on-color-disabled-border-color);\n    color: var(--instui-component-base-button-secondary-on-color-disabled-text-color);\n  }\n\n  /*\n   * AI buttons carry two gradients: the fill (padding-box) and a distinct stroke gradient (border-box)\n   * that shows through the transparent border — InstUI's ai-primary technique. The ai glyph is added\n   * automatically via ::before (appended in index.ts, which needs the shared AI_ICON_MASK constant).\n   */\n  &.-color-ai {\n    color: var(--instui-color-text-interactive-action-ai-base);\n    border-color: transparent;\n    background:\n      linear-gradient(\n          to bottom,\n          var(--instui-color-background-interactive-action-ai-top-gradient-base) 0%,\n          var(--instui-color-background-interactive-action-ai-bottom-gradient-base) 100%\n        )\n        padding-box,\n      linear-gradient(\n          to bottom,\n          var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n          var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n        )\n        border-box;\n  }\n\n  &.-color-ai:hover {\n    color: var(--instui-color-text-interactive-action-ai-hover);\n    background:\n      linear-gradient(\n          to bottom,\n          var(--instui-color-background-interactive-action-ai-top-gradient-hover) 0%,\n          var(--instui-color-background-interactive-action-ai-bottom-gradient-hover) 100%\n        )\n        padding-box,\n      linear-gradient(\n          to bottom,\n          var(--instui-color-stroke-interactive-action-ai-top-gradient-hover) 0%,\n          var(--instui-color-stroke-interactive-action-ai-bottom-gradient-hover) 100%\n        )\n        border-box;\n  }\n\n  &.-color-ai:active {\n    color: var(--instui-color-text-interactive-action-ai-active);\n    background:\n      linear-gradient(\n          to bottom,\n          var(--instui-color-background-interactive-action-ai-top-gradient-active) 0%,\n          var(--instui-color-background-interactive-action-ai-bottom-gradient-active) 100%\n        )\n        padding-box,\n      linear-gradient(\n          to bottom,\n          var(--instui-color-stroke-interactive-action-ai-top-gradient-active) 0%,\n          var(--instui-color-stroke-interactive-action-ai-bottom-gradient-active) 100%\n        )\n        border-box;\n  }\n\n  &.-color-ai:disabled,\n  &.-color-ai[aria-disabled=\"true\"] {\n    color: var(--instui-component-base-button-ai-disabled-text-color);\n    border-color: var(--instui-component-base-button-ai-disabled-border-color);\n    background: var(--instui-component-base-button-ai-disabled-background-color);\n  }\n\n  /*\n   * ai-secondary matches InstUI: a transparent rest fill, a violet→sea gradient border ring (::after,\n   * masked to just the frame), and violet→sea gradient text (background-clip: text). The ai glyph\n   * (::before) picks up the same gradient. A single element can't paint gradient text and a fill at\n   * once, so — like InstUI's rest state — the centre stays transparent.\n   */\n  &.-color-ai-secondary {\n    position: relative;\n    border-color: transparent;\n    background: linear-gradient(\n      to bottom,\n      var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base) 0%,\n      var(--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base) 100%\n    );\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    color: transparent;\n  }\n\n  /*\n   * The ring spans the border-box (outermost) edge, so it isn't inset past the base button's\n   * transparent border. The negative inset reaches out over that border; the radius is inherited, so\n   * it stays concentric with the button's outer corners.\n   */\n  &.-color-ai-secondary::after {\n    content: \"\";\n    position: absolute;\n    inset: calc(-1 * var(--instui-border-width-md));\n    border-radius: inherit;\n    padding: var(--instui-border-width-sm);\n    background: linear-gradient(\n      to bottom,\n      var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n      var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n    );\n    -webkit-mask:\n      linear-gradient(#fff 0 0) content-box,\n      linear-gradient(#fff 0 0);\n    -webkit-mask-composite: xor;\n    mask:\n      linear-gradient(#fff 0 0) content-box,\n      linear-gradient(#fff 0 0);\n    mask-composite: exclude;\n    pointer-events: none;\n  }\n\n  /*\n   * Hover/active trade the clipped gradient text for InstUI's subtle gradient fill plus solid text —\n   * one element can't paint clipped gradient text and a fill at once, so the interactive states fill.\n   */\n  &.-color-ai-secondary:hover,\n  &.-color-ai-secondary:active {\n    -webkit-background-clip: border-box;\n    background-clip: border-box;\n    color: var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base);\n    -webkit-text-fill-color: currentColor;\n  }\n\n  &.-color-ai-secondary:hover {\n    background: linear-gradient(\n      to bottom,\n      var(--instui-color-background-interactive-action-ai-secondary-hover-top-gradient) 0%,\n      var(--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient) 100%\n    );\n  }\n\n  &.-color-ai-secondary:active {\n    background: linear-gradient(\n      to bottom,\n      var(--instui-color-background-interactive-action-ai-secondary-active-top-gradient) 0%,\n      var(--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient) 100%\n    );\n  }\n\n  &.-color-ai-secondary:disabled,\n  &.-color-ai-secondary[aria-disabled=\"true\"] {\n    background: transparent;\n    border-color: var(--instui-component-base-button-ai-disabled-border-color);\n    color: var(--instui-component-base-button-ai-disabled-text-color);\n    -webkit-text-fill-color: currentColor;\n  }\n\n  /* The ai glyph's background; the mask itself is appended in index.ts (needs the shared AI_ICON_MASK). */\n  &.-color-ai::before {\n    background: var(--instui-color-text-interactive-action-ai-base);\n  }\n\n  &.-color-ai-secondary::before {\n    background: linear-gradient(\n      to bottom,\n      var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n      var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n    );\n  }\n\n  &.-color-ai:disabled::before,\n  &.-color-ai[aria-disabled=\"true\"]::before,\n  &.-color-ai-secondary:disabled::before,\n  &.-color-ai-secondary[aria-disabled=\"true\"]::before {\n    background: var(--instui-component-icon-action-ai-disabled-color);\n  }\n\n  /*\n   * --without-background is InstUI's withBackground={false}: a transparent button in the\n   * primary ghost tokens. `-ghost` is a deprecated alias of `-color-tertiary` above.\n   */\n  &.-without-background {\n    background: var(--instui-component-base-button-primary-ghost-background);\n    color: var(--instui-component-base-button-primary-ghost-color);\n    border-color: var(--instui-component-base-button-primary-ghost-border-color);\n  }\n\n  /* --block is InstUI's display=\"block\": a full-width button. */\n  &.-display-block {\n    display: flex;\n    width: 100%;\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-base-button-small-font-size);\n    min-height: var(--instui-component-base-button-small-height);\n    padding-inline: var(--instui-component-base-button-small-padding-horizontal);\n  }\n\n  &.-size-md {\n    font-size: var(--instui-component-base-button-medium-font-size);\n    min-height: var(--instui-component-base-button-medium-height);\n    padding-inline: var(--instui-component-base-button-medium-padding-horizontal);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-base-button-large-font-size);\n    min-height: var(--instui-component-base-button-large-height);\n    padding-inline: var(--instui-component-base-button-large-padding-horizontal);\n  }\n\n  &.-shape-square {\n    padding: var(--instui-spacing-space-xs);\n    aspect-ratio: 1;\n  }\n\n  &.-shape-circle {\n    padding: var(--instui-spacing-space-xs);\n    aspect-ratio: 1;\n    border-radius: 50%;\n  }\n\n  /*\n   * A composed `-icon-<name>` rides the shared icon painter (utilities/icon), so a text button needs no\n   * button-specific glyph CSS — the ::before already inherits the label's colour and 1em size. Icon-only\n   * shape buttons carry no label, so grow the glyph to fill the square control rather than tracking a\n   * (missing) label's cap height.\n   */\n  &.-shape-square[class*=\"-icon-\"]::before,\n  &.-shape-circle[class*=\"-icon-\"]::before {\n    inline-size: 1.25em;\n    block-size: 1.25em;\n  }\n\n  &.-condensed {\n    background: transparent;\n    border-color: transparent;\n    min-height: 0;\n    color: var(--instui-color-text-interactive-action-secondary-base);\n    padding-inline: var(--instui-spacing-space-xs);\n  }\n\n  &.-condensed:hover {\n    background: var(--instui-color-background-muted);\n  }\n\n  &.-toggle[aria-pressed=\"true\"] {\n    background: var(--instui-color-background-interactive-action-secondary-active);\n    border-color: var(--instui-color-stroke-interactive-action-secondary-active);\n    color: var(--instui-color-text-interactive-action-secondary-base);\n  }\n\n  /* InstUI's withBorder={false}: drop the border but keep the button's box (border-box sizing). */\n  &.-without-border {\n    border-style: none;\n  }\n}\n\n.pfx-button-group {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-shared-tokens-spacing-gap-buttons);\n}\n",
+	"canvas": "/**\n * @component button\n * @summary An accessible action control, styled from the token palette; primary by default.\n * @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. `-without-background` 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. Also sets its own icon/label `gap` and horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. The optional `.pfx-button-group` wrapper maps Figma's `.buttonGroup` and owns adjacent button spacing.\n * @selector .pfx-button\n * @modifier -color-primary — (default) the primary action.\n * @modifier -color-secondary — A lower-emphasis secondary action.\n * @modifier -color-tertiary — A text-style action (no fill or border until hover).\n * @modifier -color-danger — A destructive action.\n * @modifier -shape-circle — A round icon button.\n * @modifier -condensed — Tighter padding for dense toolbars.\n * @modifier -toggle — A pressed-state toggle button (drive with aria-pressed).\n * @modifier -without-background — Drop the fill (ghost).\n * @modifier -color-success — A positive/confirming action.\n * @modifier -color-ai — An AI action.\n * @modifier -color-ai-secondary — A lower-emphasis AI action.\n * @modifier -color-primary-inverse — @deprecated {@link -on-color}\n * @modifier -on-color — For a button placed on a coloured (non-neutral) surface. Composed with `-color-primary` (default) fills white with dark text; composed with `-color-secondary` stays transparent with a white border and text.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) medium size.\n * @modifier -size-lg — Large.\n * @modifier -shape-square — A square icon button.\n * @modifier -display-block — Full-width block button.\n * @modifier -ghost — @deprecated {@link -color-tertiary}\n * @modifier -without-border — Remove the border.\n * @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.\n * @pseudo ::before — The AI glyph, added automatically to AI buttons and masked in the variant's own colour.\n * @pseudo ::after — The AI-secondary gradient border ring, masked to just the button's frame.\n * @cssstate disabled\n * @cssstate pressed\n * @a11y Drive the `-toggle` variant's pressed state with `aria-pressed`, and mark a disabled button with `aria-disabled` (or the native `disabled`).\n * @example\n * ```html\n * <div class=\"pfx-button-group\">\n *   <button class=\"pfx-button\">Primary</button>\n *   <button class=\"pfx-button -color-secondary\">Secondary</button>\n * </div>\n * ```\n * @wrapper pfx-button-group\n * @structure\n * A group wrapper lays out adjacent buttons with the shared button gap.\n * .pfx-button-group:opt {\n *   .pfx-button:one-or-more {}\n * }\n * @related close-button — The icon-only dismiss button.\n * @demo self:button\n */\n@scope (.pfx-button) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--instui-spacing-space-xs);\n    min-height: var(--instui-component-base-button-medium-height);\n    padding: var(--instui-spacing-space-xs)\n      var(--instui-component-base-button-medium-padding-horizontal);\n    font-family: var(--instui-font-family-base);\n    font-size: var(--instui-component-base-button-medium-font-size);\n    font-weight: var(--instui-font-weight-interactive);\n    line-height: var(--instui-line-height-standalone-text-base);\n    border: var(--instui-border-width-sm) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    cursor: pointer;\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n\n  &:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n  }\n\n  &:active {\n    background: var(--instui-color-background-interactive-action-primary-active);\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    background: var(--instui-component-base-button-primary-disabled-background-color);\n    border-color: var(--instui-component-base-button-primary-disabled-border-color);\n    color: var(--instui-component-base-button-primary-color);\n    cursor: not-allowed;\n  }\n\n  &.-color-primary {\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-stroke-interactive-action-primary-base);\n  }\n\n  &.-color-primary:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-stroke-interactive-action-primary-hover);\n  }\n\n  &.-color-primary:active {\n    background: var(--instui-color-background-interactive-action-primary-active);\n    border-color: var(--instui-color-stroke-interactive-action-primary-active);\n  }\n\n  &.-color-primary:disabled,\n  &.-color-primary[aria-disabled=\"true\"] {\n    background: var(--instui-component-base-button-primary-disabled-background-color);\n    border-color: var(--instui-component-base-button-primary-disabled-border-color);\n    color: var(--instui-component-base-button-primary-color);\n  }\n\n  &.-color-secondary {\n    background: var(--instui-component-base-button-secondary-background);\n    color: var(--instui-component-base-button-secondary-color);\n    border-color: var(--instui-component-base-button-secondary-border-color);\n  }\n\n  &.-color-secondary:hover {\n    background: var(--instui-component-base-button-secondary-hover-background);\n    border-color: var(--instui-component-base-button-secondary-hover-border-color);\n    color: var(--instui-component-base-button-secondary-hover-text-color);\n  }\n\n  &.-color-secondary:active {\n    background: var(--instui-component-base-button-secondary-active-background);\n    border-color: var(--instui-component-base-button-secondary-active-border-color);\n    color: var(--instui-component-base-button-secondary-active-text-color);\n  }\n\n  &.-color-secondary:disabled,\n  &.-color-secondary[aria-disabled=\"true\"] {\n    background: var(--instui-component-base-button-secondary-disabled-background-color);\n    border-color: var(--instui-component-base-button-secondary-disabled-border-color);\n    color: var(--instui-component-base-button-secondary-disabled-text-color);\n  }\n\n  &.-color-danger {\n    background: var(--instui-color-background-interactive-action-destructive-base);\n    color: var(--instui-color-text-interactive-action-status-base);\n  }\n\n  &.-color-danger:hover {\n    background: var(--instui-color-background-interactive-action-destructive-hover);\n  }\n\n  &.-color-danger:active {\n    background: var(--instui-color-background-interactive-action-destructive-active);\n  }\n\n  &.-color-success {\n    background: var(--instui-color-background-interactive-action-success-base);\n    color: var(--instui-color-text-interactive-action-status-base);\n  }\n\n  &.-color-success:hover {\n    background: var(--instui-color-background-interactive-action-success-hover);\n  }\n\n  &.-color-tertiary,\n  &.-ghost {\n    background: transparent;\n    color: var(--instui-component-base-button-primary-ghost-color);\n    border-color: var(--instui-component-base-button-primary-ghost-border-color);\n  }\n\n  &.-color-tertiary:hover,\n  &.-ghost:hover {\n    background: var(--instui-component-base-button-primary-ghost-hover-background);\n    border-color: var(--instui-component-base-button-tertiary-hover-border-color);\n    color: var(--instui-component-base-button-tertiary-hover-text-color);\n  }\n\n  &.-color-tertiary:active,\n  &.-ghost:active {\n    background: var(--instui-component-base-button-primary-ghost-active-background);\n    border-color: var(--instui-component-base-button-tertiary-active-border-color);\n    color: var(--instui-component-base-button-tertiary-active-text-color);\n  }\n\n  &.-color-tertiary:disabled,\n  &.-color-tertiary[aria-disabled=\"true\"],\n  &.-ghost:disabled,\n  &.-ghost[aria-disabled=\"true\"] {\n    background: transparent;\n    border-color: var(--instui-component-base-button-tertiary-disabled-border-color);\n    color: var(--instui-component-base-button-tertiary-disabled-text-color);\n  }\n\n  &.-color-primary-inverse {\n    background: var(--instui-component-base-button-primary-inverse-background);\n    color: var(--instui-component-base-button-primary-inverse-color);\n    border-color: var(--instui-component-base-button-primary-inverse-border-color);\n  }\n\n  /* On hover the border tracks the (light) hover fill, so it reads as no visible border. */\n  &.-color-primary-inverse:hover {\n    background: var(--instui-component-base-button-primary-inverse-hover-background);\n    border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n  }\n\n  &.-color-primary-inverse:active {\n    background: var(--instui-component-base-button-primary-inverse-active-background);\n    border-color: var(--instui-component-base-button-primary-on-color-active-border-color);\n  }\n\n  /*\n   * --on-color composes with primary (default) and secondary for a button placed on a coloured\n   * surface, reading the full base/hover/active/disabled set from the on-color colour tokens rather\n   * than the component layer (which only aliases hover/active/disabled). Primary fills white with\n   * dark text; secondary stays transparent with a white border and text — there's no\n   * secondary-on-color background token, matching InstUI.\n   */\n  &.-on-color:not([class*=\"-color-\"]),\n  &.-color-primary.-on-color {\n    background: var(--instui-component-base-button-primary-inverse-background);\n    border-color: var(--instui-component-base-button-primary-inverse-border-color);\n    color: var(--instui-component-base-button-primary-inverse-color);\n  }\n\n  &.-on-color:not([class*=\"-color-\"]):hover,\n  &.-color-primary.-on-color:hover {\n    background: var(--instui-component-base-button-primary-inverse-hover-background);\n    border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n    color: var(--instui-component-base-button-primary-on-color-hover-text-color);\n  }\n\n  &.-on-color:not([class*=\"-color-\"]):active,\n  &.-color-primary.-on-color:active {\n    background: var(--instui-component-base-button-primary-inverse-active-background);\n    border-color: var(--instui-component-base-button-primary-on-color-active-border-color);\n    color: var(--instui-component-base-button-primary-on-color-active-text-color);\n  }\n\n  &.-on-color:not([class*=\"-color-\"]):disabled,\n  &.-on-color:not([class*=\"-color-\"])[aria-disabled=\"true\"],\n  &.-color-primary.-on-color:disabled,\n  &.-color-primary.-on-color[aria-disabled=\"true\"] {\n    background: var(--instui-component-base-button-primary-on-color-disabled-background-color);\n    border-color: var(--instui-component-base-button-primary-on-color-disabled-border-color);\n    color: var(--instui-component-base-button-primary-on-color-disabled-text-color);\n  }\n\n  &.-color-secondary.-on-color {\n    background: transparent;\n    border-color: var(--instui-component-base-button-primary-inverse-ghost-border-color);\n    color: var(--instui-component-base-button-primary-inverse-ghost-color);\n  }\n\n  &.-color-secondary.-on-color:hover {\n    background: var(--instui-component-base-button-primary-inverse-ghost-hover-background);\n    border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n    color: var(--instui-component-base-button-secondary-on-color-hover-text-color);\n  }\n\n  &.-color-secondary.-on-color:active {\n    background: var(--instui-component-base-button-primary-inverse-ghost-active-background);\n    border-color: var(--instui-component-base-button-secondary-on-color-active-border-color);\n    color: var(--instui-component-base-button-secondary-on-color-active-text-color);\n  }\n\n  &.-color-secondary.-on-color:disabled,\n  &.-color-secondary.-on-color[aria-disabled=\"true\"] {\n    background: transparent;\n    border-color: var(--instui-component-base-button-secondary-on-color-disabled-border-color);\n    color: var(--instui-component-base-button-secondary-on-color-disabled-text-color);\n  }\n\n  /*\n   * AI buttons carry two gradients: the fill (padding-box) and a distinct stroke gradient (border-box)\n   * that shows through the transparent border — InstUI's ai-primary technique. The ai glyph is added\n   * automatically via ::before (appended in index.ts, which needs the shared AI_ICON_MASK constant).\n   */\n  &.-color-ai {\n    color: var(--instui-color-text-interactive-action-ai-base);\n    border-color: transparent;\n    background:\n      linear-gradient(\n          to bottom,\n          var(--instui-color-background-interactive-action-ai-top-gradient-base) 0%,\n          var(--instui-color-background-interactive-action-ai-bottom-gradient-base) 100%\n        )\n        padding-box,\n      linear-gradient(\n          to bottom,\n          var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n          var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n        )\n        border-box;\n  }\n\n  &.-color-ai:hover {\n    color: var(--instui-color-text-interactive-action-ai-hover);\n    background:\n      linear-gradient(\n          to bottom,\n          var(--instui-color-background-interactive-action-ai-top-gradient-hover) 0%,\n          var(--instui-color-background-interactive-action-ai-bottom-gradient-hover) 100%\n        )\n        padding-box,\n      linear-gradient(\n          to bottom,\n          var(--instui-color-stroke-interactive-action-ai-top-gradient-hover) 0%,\n          var(--instui-color-stroke-interactive-action-ai-bottom-gradient-hover) 100%\n        )\n        border-box;\n  }\n\n  &.-color-ai:active {\n    color: var(--instui-color-text-interactive-action-ai-active);\n    background:\n      linear-gradient(\n          to bottom,\n          var(--instui-color-background-interactive-action-ai-top-gradient-active) 0%,\n          var(--instui-color-background-interactive-action-ai-bottom-gradient-active) 100%\n        )\n        padding-box,\n      linear-gradient(\n          to bottom,\n          var(--instui-color-stroke-interactive-action-ai-top-gradient-active) 0%,\n          var(--instui-color-stroke-interactive-action-ai-bottom-gradient-active) 100%\n        )\n        border-box;\n  }\n\n  &.-color-ai:disabled,\n  &.-color-ai[aria-disabled=\"true\"] {\n    color: var(--instui-component-base-button-ai-disabled-text-color);\n    border-color: var(--instui-component-base-button-ai-disabled-border-color);\n    background: var(--instui-component-base-button-ai-disabled-background-color);\n  }\n\n  /*\n   * ai-secondary matches InstUI: a transparent rest fill, a violet→sea gradient border ring (::after,\n   * masked to just the frame), and violet→sea gradient text (background-clip: text). The ai glyph\n   * (::before) picks up the same gradient. A single element can't paint gradient text and a fill at\n   * once, so — like InstUI's rest state — the centre stays transparent.\n   */\n  &.-color-ai-secondary {\n    position: relative;\n    border-color: transparent;\n    background: linear-gradient(\n      to bottom,\n      var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base) 0%,\n      var(--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base) 100%\n    );\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    color: transparent;\n  }\n\n  /*\n   * The ring spans the border-box (outermost) edge, so it isn't inset past the base button's\n   * transparent border. The negative inset reaches out over that border; the radius is inherited, so\n   * it stays concentric with the button's outer corners.\n   */\n  &.-color-ai-secondary::after {\n    content: \"\";\n    position: absolute;\n    inset: calc(-1 * var(--instui-border-width-md));\n    border-radius: inherit;\n    padding: var(--instui-border-width-sm);\n    background: linear-gradient(\n      to bottom,\n      var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n      var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n    );\n    -webkit-mask:\n      linear-gradient(#fff 0 0) content-box,\n      linear-gradient(#fff 0 0);\n    -webkit-mask-composite: xor;\n    mask:\n      linear-gradient(#fff 0 0) content-box,\n      linear-gradient(#fff 0 0);\n    mask-composite: exclude;\n    pointer-events: none;\n  }\n\n  /*\n   * Hover/active trade the clipped gradient text for InstUI's subtle gradient fill plus solid text —\n   * one element can't paint clipped gradient text and a fill at once, so the interactive states fill.\n   */\n  &.-color-ai-secondary:hover,\n  &.-color-ai-secondary:active {\n    -webkit-background-clip: border-box;\n    background-clip: border-box;\n    color: var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base);\n    -webkit-text-fill-color: currentColor;\n  }\n\n  &.-color-ai-secondary:hover {\n    background: linear-gradient(\n      to bottom,\n      var(--instui-color-background-interactive-action-ai-secondary-hover-top-gradient) 0%,\n      var(--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient) 100%\n    );\n  }\n\n  &.-color-ai-secondary:active {\n    background: linear-gradient(\n      to bottom,\n      var(--instui-color-background-interactive-action-ai-secondary-active-top-gradient) 0%,\n      var(--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient) 100%\n    );\n  }\n\n  &.-color-ai-secondary:disabled,\n  &.-color-ai-secondary[aria-disabled=\"true\"] {\n    background: transparent;\n    border-color: var(--instui-component-base-button-ai-disabled-border-color);\n    color: var(--instui-component-base-button-ai-disabled-text-color);\n    -webkit-text-fill-color: currentColor;\n  }\n\n  /* The ai glyph's background; the mask itself is appended in index.ts (needs the shared AI_ICON_MASK). */\n  &.-color-ai::before {\n    background: var(--instui-color-text-interactive-action-ai-base);\n  }\n\n  &.-color-ai-secondary::before {\n    background: linear-gradient(\n      to bottom,\n      var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n      var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n    );\n  }\n\n  &.-color-ai:disabled::before,\n  &.-color-ai[aria-disabled=\"true\"]::before,\n  &.-color-ai-secondary:disabled::before,\n  &.-color-ai-secondary[aria-disabled=\"true\"]::before {\n    background: var(--instui-component-icon-action-ai-disabled-color);\n  }\n\n  /*\n   * --without-background is InstUI's withBackground={false}: a transparent button in the\n   * primary ghost tokens. `-ghost` is a deprecated alias of `-color-tertiary` above.\n   */\n  &.-without-background {\n    background: var(--instui-component-base-button-primary-ghost-background);\n    color: var(--instui-component-base-button-primary-ghost-color);\n    border-color: var(--instui-component-base-button-primary-ghost-border-color);\n  }\n\n  /* --block is InstUI's display=\"block\": a full-width button. */\n  &.-display-block {\n    display: flex;\n    width: 100%;\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-base-button-small-font-size);\n    min-height: var(--instui-component-base-button-small-height);\n    padding-inline: var(--instui-component-base-button-small-padding-horizontal);\n  }\n\n  &.-size-md {\n    font-size: var(--instui-component-base-button-medium-font-size);\n    min-height: var(--instui-component-base-button-medium-height);\n    padding-inline: var(--instui-component-base-button-medium-padding-horizontal);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-base-button-large-font-size);\n    min-height: var(--instui-component-base-button-large-height);\n    padding-inline: var(--instui-component-base-button-large-padding-horizontal);\n  }\n\n  &.-shape-square {\n    padding: var(--instui-spacing-space-xs);\n    aspect-ratio: 1;\n  }\n\n  &.-shape-circle {\n    padding: var(--instui-spacing-space-xs);\n    aspect-ratio: 1;\n    border-radius: 50%;\n  }\n\n  /*\n   * A composed `-icon-<name>` rides the shared icon painter (utilities/icon), so a text button needs no\n   * button-specific glyph CSS — the ::before already inherits the label's colour and 1em size. Icon-only\n   * shape buttons carry no label, so grow the glyph to fill the square control rather than tracking a\n   * (missing) label's cap height.\n   */\n  &.-shape-square[class*=\"-icon-\"]::before,\n  &.-shape-circle[class*=\"-icon-\"]::before {\n    inline-size: 1.25em;\n    block-size: 1.25em;\n  }\n\n  &.-condensed {\n    background: transparent;\n    border-color: transparent;\n    min-height: 0;\n    color: var(--instui-color-text-interactive-action-secondary-base);\n    padding-inline: var(--instui-spacing-space-xs);\n  }\n\n  &.-condensed:hover {\n    background: var(--instui-color-background-muted);\n  }\n\n  &.-toggle[aria-pressed=\"true\"] {\n    background: var(--instui-color-background-interactive-action-secondary-active);\n    border-color: var(--instui-color-stroke-interactive-action-secondary-active);\n    color: var(--instui-color-text-interactive-action-secondary-base);\n  }\n\n  /* InstUI's withBorder={false}: drop the border but keep the button's box (border-box sizing). */\n  &.-without-border {\n    border-style: none;\n  }\n}\n\n.pfx-button-group {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-shared-tokens-spacing-gap-buttons);\n}\n",
+	"canvasHighContrast": "/**\n * @component button\n * @summary An accessible action control, styled from the token palette; primary by default.\n * @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. `-without-background` 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. Also sets its own icon/label `gap` and horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. The optional `.pfx-button-group` wrapper maps Figma's `.buttonGroup` and owns adjacent button spacing.\n * @selector .pfx-button\n * @modifier -color-primary — (default) the primary action.\n * @modifier -color-secondary — A lower-emphasis secondary action.\n * @modifier -color-tertiary — A text-style action (no fill or border until hover).\n * @modifier -color-danger — A destructive action.\n * @modifier -shape-circle — A round icon button.\n * @modifier -condensed — Tighter padding for dense toolbars.\n * @modifier -toggle — A pressed-state toggle button (drive with aria-pressed).\n * @modifier -without-background — Drop the fill (ghost).\n * @modifier -color-success — A positive/confirming action.\n * @modifier -color-ai — An AI action.\n * @modifier -color-ai-secondary — A lower-emphasis AI action.\n * @modifier -color-primary-inverse — @deprecated {@link -on-color}\n * @modifier -on-color — For a button placed on a coloured (non-neutral) surface. Composed with `-color-primary` (default) fills white with dark text; composed with `-color-secondary` stays transparent with a white border and text.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) medium size.\n * @modifier -size-lg — Large.\n * @modifier -shape-square — A square icon button.\n * @modifier -display-block — Full-width block button.\n * @modifier -ghost — @deprecated {@link -color-tertiary}\n * @modifier -without-border — Remove the border.\n * @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.\n * @pseudo ::before — The AI glyph, added automatically to AI buttons and masked in the variant's own colour.\n * @pseudo ::after — The AI-secondary gradient border ring, masked to just the button's frame.\n * @cssstate disabled\n * @cssstate pressed\n * @a11y Drive the `-toggle` variant's pressed state with `aria-pressed`, and mark a disabled button with `aria-disabled` (or the native `disabled`).\n * @example\n * ```html\n * <div class=\"pfx-button-group\">\n *   <button class=\"pfx-button\">Primary</button>\n *   <button class=\"pfx-button -color-secondary\">Secondary</button>\n * </div>\n * ```\n * @wrapper pfx-button-group\n * @structure\n * A group wrapper lays out adjacent buttons with the shared button gap.\n * .pfx-button-group:opt {\n *   .pfx-button:one-or-more {}\n * }\n * @related close-button — The icon-only dismiss button.\n * @demo self:button\n */\n@scope (.pfx-button) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--instui-spacing-space-xs);\n    min-height: var(--instui-component-base-button-medium-height);\n    padding: var(--instui-spacing-space-xs)\n      var(--instui-component-base-button-medium-padding-horizontal);\n    font-family: var(--instui-font-family-base);\n    font-size: var(--instui-component-base-button-medium-font-size);\n    font-weight: var(--instui-font-weight-interactive);\n    line-height: var(--instui-line-height-standalone-text-base);\n    border: var(--instui-border-width-sm) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    cursor: pointer;\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n\n  &:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n  }\n\n  &:active {\n    background: var(--instui-color-background-interactive-action-primary-active);\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    background: var(--instui-component-base-button-primary-disabled-background-color);\n    border-color: var(--instui-component-base-button-primary-disabled-border-color);\n    color: var(--instui-component-base-button-primary-color);\n    cursor: not-allowed;\n  }\n\n  &.-color-primary {\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-stroke-interactive-action-primary-base);\n  }\n\n  &.-color-primary:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-stroke-interactive-action-primary-hover);\n  }\n\n  &.-color-primary:active {\n    background: var(--instui-color-background-interactive-action-primary-active);\n    border-color: var(--instui-color-stroke-interactive-action-primary-active);\n  }\n\n  &.-color-primary:disabled,\n  &.-color-primary[aria-disabled=\"true\"] {\n    background: var(--instui-component-base-button-primary-disabled-background-color);\n    border-color: var(--instui-component-base-button-primary-disabled-border-color);\n    color: var(--instui-component-base-button-primary-color);\n  }\n\n  &.-color-secondary {\n    background: var(--instui-component-base-button-secondary-background);\n    color: var(--instui-component-base-button-secondary-color);\n    border-color: var(--instui-component-base-button-secondary-border-color);\n  }\n\n  &.-color-secondary:hover {\n    background: var(--instui-component-base-button-secondary-hover-background);\n    border-color: var(--instui-component-base-button-secondary-hover-border-color);\n    color: var(--instui-component-base-button-secondary-hover-text-color);\n  }\n\n  &.-color-secondary:active {\n    background: var(--instui-component-base-button-secondary-active-background);\n    border-color: var(--instui-component-base-button-secondary-active-border-color);\n    color: var(--instui-component-base-button-secondary-active-text-color);\n  }\n\n  &.-color-secondary:disabled,\n  &.-color-secondary[aria-disabled=\"true\"] {\n    background: var(--instui-component-base-button-secondary-disabled-background-color);\n    border-color: var(--instui-component-base-button-secondary-disabled-border-color);\n    color: var(--instui-component-base-button-secondary-disabled-text-color);\n  }\n\n  &.-color-danger {\n    background: var(--instui-color-background-interactive-action-destructive-base);\n    color: var(--instui-color-text-interactive-action-status-base);\n  }\n\n  &.-color-danger:hover {\n    background: var(--instui-color-background-interactive-action-destructive-hover);\n  }\n\n  &.-color-danger:active {\n    background: var(--instui-color-background-interactive-action-destructive-active);\n  }\n\n  &.-color-success {\n    background: var(--instui-color-background-interactive-action-success-base);\n    color: var(--instui-color-text-interactive-action-status-base);\n  }\n\n  &.-color-success:hover {\n    background: var(--instui-color-background-interactive-action-success-hover);\n  }\n\n  &.-color-tertiary,\n  &.-ghost {\n    background: transparent;\n    color: var(--instui-component-base-button-primary-ghost-color);\n    border-color: var(--instui-component-base-button-primary-ghost-border-color);\n  }\n\n  &.-color-tertiary:hover,\n  &.-ghost:hover {\n    background: var(--instui-component-base-button-primary-ghost-hover-background);\n    border-color: var(--instui-component-base-button-tertiary-hover-border-color);\n    color: var(--instui-component-base-button-tertiary-hover-text-color);\n  }\n\n  &.-color-tertiary:active,\n  &.-ghost:active {\n    background: var(--instui-component-base-button-primary-ghost-active-background);\n    border-color: var(--instui-component-base-button-tertiary-active-border-color);\n    color: var(--instui-component-base-button-tertiary-active-text-color);\n  }\n\n  &.-color-tertiary:disabled,\n  &.-color-tertiary[aria-disabled=\"true\"],\n  &.-ghost:disabled,\n  &.-ghost[aria-disabled=\"true\"] {\n    background: transparent;\n    border-color: var(--instui-component-base-button-tertiary-disabled-border-color);\n    color: var(--instui-component-base-button-tertiary-disabled-text-color);\n  }\n\n  &.-color-primary-inverse {\n    background: var(--instui-component-base-button-primary-inverse-background);\n    color: var(--instui-component-base-button-primary-inverse-color);\n    border-color: var(--instui-component-base-button-primary-inverse-border-color);\n  }\n\n  /* On hover the border tracks the (light) hover fill, so it reads as no visible border. */\n  &.-color-primary-inverse:hover {\n    background: var(--instui-component-base-button-primary-inverse-hover-background);\n    border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n  }\n\n  &.-color-primary-inverse:active {\n    background: var(--instui-component-base-button-primary-inverse-active-background);\n    border-color: var(--instui-component-base-button-primary-on-color-active-border-color);\n  }\n\n  /*\n   * --on-color composes with primary (default) and secondary for a button placed on a coloured\n   * surface, reading the full base/hover/active/disabled set from the on-color colour tokens rather\n   * than the component layer (which only aliases hover/active/disabled). Primary fills white with\n   * dark text; secondary stays transparent with a white border and text — there's no\n   * secondary-on-color background token, matching InstUI.\n   */\n  &.-on-color:not([class*=\"-color-\"]),\n  &.-color-primary.-on-color {\n    background: var(--instui-component-base-button-primary-inverse-background);\n    border-color: var(--instui-component-base-button-primary-inverse-border-color);\n    color: var(--instui-component-base-button-primary-inverse-color);\n  }\n\n  &.-on-color:not([class*=\"-color-\"]):hover,\n  &.-color-primary.-on-color:hover {\n    background: var(--instui-component-base-button-primary-inverse-hover-background);\n    border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n    color: var(--instui-component-base-button-primary-on-color-hover-text-color);\n  }\n\n  &.-on-color:not([class*=\"-color-\"]):active,\n  &.-color-primary.-on-color:active {\n    background: var(--instui-component-base-button-primary-inverse-active-background);\n    border-color: var(--instui-component-base-button-primary-on-color-active-border-color);\n    color: var(--instui-component-base-button-primary-on-color-active-text-color);\n  }\n\n  &.-on-color:not([class*=\"-color-\"]):disabled,\n  &.-on-color:not([class*=\"-color-\"])[aria-disabled=\"true\"],\n  &.-color-primary.-on-color:disabled,\n  &.-color-primary.-on-color[aria-disabled=\"true\"] {\n    background: var(--instui-component-base-button-primary-on-color-disabled-background-color);\n    border-color: var(--instui-component-base-button-primary-on-color-disabled-border-color);\n    color: var(--instui-component-base-button-primary-on-color-disabled-text-color);\n  }\n\n  &.-color-secondary.-on-color {\n    background: transparent;\n    border-color: var(--instui-component-base-button-primary-inverse-ghost-border-color);\n    color: var(--instui-component-base-button-primary-inverse-ghost-color);\n  }\n\n  &.-color-secondary.-on-color:hover {\n    background: var(--instui-component-base-button-primary-inverse-ghost-hover-background);\n    border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n    color: var(--instui-component-base-button-secondary-on-color-hover-text-color);\n  }\n\n  &.-color-secondary.-on-color:active {\n    background: var(--instui-component-base-button-primary-inverse-ghost-active-background);\n    border-color: var(--instui-component-base-button-secondary-on-color-active-border-color);\n    color: var(--instui-component-base-button-secondary-on-color-active-text-color);\n  }\n\n  &.-color-secondary.-on-color:disabled,\n  &.-color-secondary.-on-color[aria-disabled=\"true\"] {\n    background: transparent;\n    border-color: var(--instui-component-base-button-secondary-on-color-disabled-border-color);\n    color: var(--instui-component-base-button-secondary-on-color-disabled-text-color);\n  }\n\n  /*\n   * AI buttons carry two gradients: the fill (padding-box) and a distinct stroke gradient (border-box)\n   * that shows through the transparent border — InstUI's ai-primary technique. The ai glyph is added\n   * automatically via ::before (appended in index.ts, which needs the shared AI_ICON_MASK constant).\n   */\n  &.-color-ai {\n    color: var(--instui-color-text-interactive-action-ai-base);\n    border-color: transparent;\n    background:\n      linear-gradient(\n          to bottom,\n          var(--instui-color-background-interactive-action-ai-top-gradient-base) 0%,\n          var(--instui-color-background-interactive-action-ai-bottom-gradient-base) 100%\n        )\n        padding-box,\n      linear-gradient(\n          to bottom,\n          var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n          var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n        )\n        border-box;\n  }\n\n  &.-color-ai:hover {\n    color: var(--instui-color-text-interactive-action-ai-hover);\n    background:\n      linear-gradient(\n          to bottom,\n          var(--instui-color-background-interactive-action-ai-top-gradient-hover) 0%,\n          var(--instui-color-background-interactive-action-ai-bottom-gradient-hover) 100%\n        )\n        padding-box,\n      linear-gradient(\n          to bottom,\n          var(--instui-color-stroke-interactive-action-ai-top-gradient-hover) 0%,\n          var(--instui-color-stroke-interactive-action-ai-bottom-gradient-hover) 100%\n        )\n        border-box;\n  }\n\n  &.-color-ai:active {\n    color: var(--instui-color-text-interactive-action-ai-active);\n    background:\n      linear-gradient(\n          to bottom,\n          var(--instui-color-background-interactive-action-ai-top-gradient-active) 0%,\n          var(--instui-color-background-interactive-action-ai-bottom-gradient-active) 100%\n        )\n        padding-box,\n      linear-gradient(\n          to bottom,\n          var(--instui-color-stroke-interactive-action-ai-top-gradient-active) 0%,\n          var(--instui-color-stroke-interactive-action-ai-bottom-gradient-active) 100%\n        )\n        border-box;\n  }\n\n  &.-color-ai:disabled,\n  &.-color-ai[aria-disabled=\"true\"] {\n    color: var(--instui-component-base-button-ai-disabled-text-color);\n    border-color: var(--instui-component-base-button-ai-disabled-border-color);\n    background: var(--instui-component-base-button-ai-disabled-background-color);\n  }\n\n  /*\n   * ai-secondary matches InstUI: a transparent rest fill, a violet→sea gradient border ring (::after,\n   * masked to just the frame), and violet→sea gradient text (background-clip: text). The ai glyph\n   * (::before) picks up the same gradient. A single element can't paint gradient text and a fill at\n   * once, so — like InstUI's rest state — the centre stays transparent.\n   */\n  &.-color-ai-secondary {\n    position: relative;\n    border-color: transparent;\n    background: linear-gradient(\n      to bottom,\n      var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base) 0%,\n      var(--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base) 100%\n    );\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    color: transparent;\n  }\n\n  /*\n   * The ring spans the border-box (outermost) edge, so it isn't inset past the base button's\n   * transparent border. The negative inset reaches out over that border; the radius is inherited, so\n   * it stays concentric with the button's outer corners.\n   */\n  &.-color-ai-secondary::after {\n    content: \"\";\n    position: absolute;\n    inset: calc(-1 * var(--instui-border-width-md));\n    border-radius: inherit;\n    padding: var(--instui-border-width-sm);\n    background: linear-gradient(\n      to bottom,\n      var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n      var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n    );\n    -webkit-mask:\n      linear-gradient(#fff 0 0) content-box,\n      linear-gradient(#fff 0 0);\n    -webkit-mask-composite: xor;\n    mask:\n      linear-gradient(#fff 0 0) content-box,\n      linear-gradient(#fff 0 0);\n    mask-composite: exclude;\n    pointer-events: none;\n  }\n\n  /*\n   * Hover/active trade the clipped gradient text for InstUI's subtle gradient fill plus solid text —\n   * one element can't paint clipped gradient text and a fill at once, so the interactive states fill.\n   */\n  &.-color-ai-secondary:hover,\n  &.-color-ai-secondary:active {\n    -webkit-background-clip: border-box;\n    background-clip: border-box;\n    color: var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base);\n    -webkit-text-fill-color: currentColor;\n  }\n\n  &.-color-ai-secondary:hover {\n    background: linear-gradient(\n      to bottom,\n      var(--instui-color-background-interactive-action-ai-secondary-hover-top-gradient) 0%,\n      var(--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient) 100%\n    );\n  }\n\n  &.-color-ai-secondary:active {\n    background: linear-gradient(\n      to bottom,\n      var(--instui-color-background-interactive-action-ai-secondary-active-top-gradient) 0%,\n      var(--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient) 100%\n    );\n  }\n\n  &.-color-ai-secondary:disabled,\n  &.-color-ai-secondary[aria-disabled=\"true\"] {\n    background: transparent;\n    border-color: var(--instui-component-base-button-ai-disabled-border-color);\n    color: var(--instui-component-base-button-ai-disabled-text-color);\n    -webkit-text-fill-color: currentColor;\n  }\n\n  /* The ai glyph's background; the mask itself is appended in index.ts (needs the shared AI_ICON_MASK). */\n  &.-color-ai::before {\n    background: var(--instui-color-text-interactive-action-ai-base);\n  }\n\n  &.-color-ai-secondary::before {\n    background: linear-gradient(\n      to bottom,\n      var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%,\n      var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%\n    );\n  }\n\n  &.-color-ai:disabled::before,\n  &.-color-ai[aria-disabled=\"true\"]::before,\n  &.-color-ai-secondary:disabled::before,\n  &.-color-ai-secondary[aria-disabled=\"true\"]::before {\n    background: var(--instui-component-icon-action-ai-disabled-color);\n  }\n\n  /*\n   * --without-background is InstUI's withBackground={false}: a transparent button in the\n   * primary ghost tokens. `-ghost` is a deprecated alias of `-color-tertiary` above.\n   */\n  &.-without-background {\n    background: var(--instui-component-base-button-primary-ghost-background);\n    color: var(--instui-component-base-button-primary-ghost-color);\n    border-color: var(--instui-component-base-button-primary-ghost-border-color);\n  }\n\n  /* --block is InstUI's display=\"block\": a full-width button. */\n  &.-display-block {\n    display: flex;\n    width: 100%;\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-base-button-small-font-size);\n    min-height: var(--instui-component-base-button-small-height);\n    padding-inline: var(--instui-component-base-button-small-padding-horizontal);\n  }\n\n  &.-size-md {\n    font-size: var(--instui-component-base-button-medium-font-size);\n    min-height: var(--instui-component-base-button-medium-height);\n    padding-inline: var(--instui-component-base-button-medium-padding-horizontal);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-base-button-large-font-size);\n    min-height: var(--instui-component-base-button-large-height);\n    padding-inline: var(--instui-component-base-button-large-padding-horizontal);\n  }\n\n  &.-shape-square {\n    padding: var(--instui-spacing-space-xs);\n    aspect-ratio: 1;\n  }\n\n  &.-shape-circle {\n    padding: var(--instui-spacing-space-xs);\n    aspect-ratio: 1;\n    border-radius: 50%;\n  }\n\n  /*\n   * A composed `-icon-<name>` rides the shared icon painter (utilities/icon), so a text button needs no\n   * button-specific glyph CSS — the ::before already inherits the label's colour and 1em size. Icon-only\n   * shape buttons carry no label, so grow the glyph to fill the square control rather than tracking a\n   * (missing) label's cap height.\n   */\n  &.-shape-square[class*=\"-icon-\"]::before,\n  &.-shape-circle[class*=\"-icon-\"]::before {\n    inline-size: 1.25em;\n    block-size: 1.25em;\n  }\n\n  &.-condensed {\n    background: transparent;\n    border-color: transparent;\n    min-height: 0;\n    color: var(--instui-color-text-interactive-action-secondary-base);\n    padding-inline: var(--instui-spacing-space-xs);\n  }\n\n  &.-condensed:hover {\n    background: var(--instui-color-background-muted);\n  }\n\n  &.-toggle[aria-pressed=\"true\"] {\n    background: var(--instui-color-background-interactive-action-secondary-active);\n    border-color: var(--instui-color-stroke-interactive-action-secondary-active);\n    color: var(--instui-color-text-interactive-action-secondary-base);\n  }\n\n  /* InstUI's withBorder={false}: drop the border but keep the button's box (border-box sizing). */\n  &.-without-border {\n    border-style: none;\n  }\n}\n\n.pfx-button-group {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-shared-tokens-spacing-gap-buttons);\n}\n"
+}.rebrand;
 const byline$1 = {
 	"rebrand": "/**\n * @component byline\n * @selector .pfx-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 * @remarks Sets its own `gap` between the figure and the text block; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\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-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 * ```\n * @structure\n * .pfx-byline {\n *   [class*=\"-icon-\"]:optional {}\n *   div {\n *     .title {}\n *     .description {}\n *   }\n * }\n */\n@scope (.pfx-byline) {\n  :scope {\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    /* alignContent=\"top\" (default is center, from align-items above). */\n    &.-align-content-top {\n      align-items: flex-start;\n    }\n\n    &.-align-content-center {\n      align-items: center;\n    }\n  }\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 {\n    > [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}\n",
 	"canvas": "/**\n * @component byline\n * @selector .pfx-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 * @remarks Sets its own `gap` between the figure and the text block; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\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-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 * ```\n * @structure\n * .pfx-byline {\n *   [class*=\"-icon-\"]:optional {}\n *   div {\n *     .title {}\n *     .description {}\n *   }\n * }\n */\n@scope (.pfx-byline) {\n  :scope {\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    /* alignContent=\"top\" (default is center, from align-items above). */\n    &.-align-content-top {\n      align-items: flex-start;\n    }\n\n    &.-align-content-center {\n      align-items: center;\n    }\n  }\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 {\n    > [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}\n",
@@ -343,14 +356,14 @@ const checkbox$1 = {
 	"canvasHighContrast": "/**\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. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\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 -required — Show the required-field asterisk next to the label.\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 * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\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\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\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\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  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\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\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\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\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\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\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\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\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\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\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\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\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\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\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\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\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\n@scope (.pfx-checkbox) {\n  :scope {\n    &.-required .asterisk {\n      color: var(--instui-component-checkbox-asterisk-color);\n    }\n  }\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\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\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\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\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\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"
 }.rebrand;
 const closeButton$1 = {
-	"rebrand": "/**\n * @component close-button\n * @selector .pfx-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@scope (.pfx-close-button) {\n  & {\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\n  &::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\n  &:hover {\n    background: var(--instui-color-background-interactive-action-tertiary-hover);\n  }\n\n  &:active {\n    background: var(--instui-color-background-interactive-action-tertiary-active);\n  }\n\n  &.-size-sm {\n    min-height: var(--instui-component-base-button-small-height);\n  }\n\n  &.-size-lg {\n    min-height: var(--instui-component-base-button-large-height);\n  }\n\n  &.-color-inverse {\n    color: var(--instui-component-base-button-primary-inverse-ghost-color);\n  }\n}\n",
-	"canvas": "/**\n * @component close-button\n * @selector .pfx-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@scope (.pfx-close-button) {\n  & {\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\n  &::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\n  &:hover {\n    background: var(--instui-color-background-interactive-action-tertiary-hover);\n  }\n\n  &:active {\n    background: var(--instui-color-background-interactive-action-tertiary-active);\n  }\n\n  &.-size-sm {\n    min-height: var(--instui-component-base-button-small-height);\n  }\n\n  &.-size-lg {\n    min-height: var(--instui-component-base-button-large-height);\n  }\n\n  &.-color-inverse {\n    color: var(--instui-component-base-button-primary-inverse-ghost-color);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component close-button\n * @selector .pfx-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@scope (.pfx-close-button) {\n  & {\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\n  &::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\n  &:hover {\n    background: var(--instui-color-background-interactive-action-tertiary-hover);\n  }\n\n  &:active {\n    background: var(--instui-color-background-interactive-action-tertiary-active);\n  }\n\n  &.-size-sm {\n    min-height: var(--instui-component-base-button-small-height);\n  }\n\n  &.-size-lg {\n    min-height: var(--instui-component-base-button-large-height);\n  }\n\n  &.-color-inverse {\n    color: var(--instui-component-base-button-primary-inverse-ghost-color);\n  }\n}\n"
+	"rebrand": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an on-color variant.\n * @remarks Always renders as an icon-only control with no visible label, so an `aria-label` is required, not optional; compare to `button`'s `-without-background` ghost variant, which keeps a text label.\n * @modifier -color-inverse — @deprecated {@link -on-color}\n * @modifier -on-color — For a close button placed on a coloured (non-neutral) surface.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) medium size.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\"), and mark a disabled button with `aria-disabled` (or the native `disabled`).\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n  & {\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-component-icon-base-color);\n    cursor: pointer;\n  }\n\n  &::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\n  &:hover {\n    background: var(--instui-component-base-button-primary-ghost-hover-background);\n  }\n\n  &:active {\n    background: var(--instui-component-base-button-primary-ghost-active-background);\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    color: var(--instui-component-icon-disabled-base-color);\n    cursor: not-allowed;\n  }\n\n  &.-size-sm {\n    min-height: var(--instui-component-base-button-small-height);\n  }\n\n  &.-size-md {\n    min-height: var(--instui-component-base-button-medium-height);\n  }\n\n  &.-size-lg {\n    min-height: var(--instui-component-base-button-large-height);\n  }\n\n  &.-on-color,\n  &.-color-inverse {\n    color: var(--instui-component-icon-on-color);\n  }\n\n  &.-on-color:hover,\n  &.-color-inverse:hover {\n    background: var(--instui-component-base-button-primary-inverse-ghost-hover-background);\n  }\n\n  &.-on-color:active,\n  &.-color-inverse:active {\n    background: var(--instui-component-base-button-primary-inverse-ghost-active-background);\n  }\n\n  &.-on-color:disabled,\n  &.-on-color[aria-disabled=\"true\"],\n  &.-color-inverse:disabled,\n  &.-color-inverse[aria-disabled=\"true\"] {\n    color: var(--instui-component-icon-disabled-on-color);\n  }\n}\n",
+	"canvas": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an on-color variant.\n * @remarks Always renders as an icon-only control with no visible label, so an `aria-label` is required, not optional; compare to `button`'s `-without-background` ghost variant, which keeps a text label.\n * @modifier -color-inverse — @deprecated {@link -on-color}\n * @modifier -on-color — For a close button placed on a coloured (non-neutral) surface.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) medium size.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\"), and mark a disabled button with `aria-disabled` (or the native `disabled`).\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n  & {\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-component-icon-base-color);\n    cursor: pointer;\n  }\n\n  &::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\n  &:hover {\n    background: var(--instui-component-base-button-primary-ghost-hover-background);\n  }\n\n  &:active {\n    background: var(--instui-component-base-button-primary-ghost-active-background);\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    color: var(--instui-component-icon-disabled-base-color);\n    cursor: not-allowed;\n  }\n\n  &.-size-sm {\n    min-height: var(--instui-component-base-button-small-height);\n  }\n\n  &.-size-md {\n    min-height: var(--instui-component-base-button-medium-height);\n  }\n\n  &.-size-lg {\n    min-height: var(--instui-component-base-button-large-height);\n  }\n\n  &.-on-color,\n  &.-color-inverse {\n    color: var(--instui-component-icon-on-color);\n  }\n\n  &.-on-color:hover,\n  &.-color-inverse:hover {\n    background: var(--instui-component-base-button-primary-inverse-ghost-hover-background);\n  }\n\n  &.-on-color:active,\n  &.-color-inverse:active {\n    background: var(--instui-component-base-button-primary-inverse-ghost-active-background);\n  }\n\n  &.-on-color:disabled,\n  &.-on-color[aria-disabled=\"true\"],\n  &.-color-inverse:disabled,\n  &.-color-inverse[aria-disabled=\"true\"] {\n    color: var(--instui-component-icon-disabled-on-color);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an on-color variant.\n * @remarks Always renders as an icon-only control with no visible label, so an `aria-label` is required, not optional; compare to `button`'s `-without-background` ghost variant, which keeps a text label.\n * @modifier -color-inverse — @deprecated {@link -on-color}\n * @modifier -on-color — For a close button placed on a coloured (non-neutral) surface.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) medium size.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\"), and mark a disabled button with `aria-disabled` (or the native `disabled`).\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n  & {\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-component-icon-base-color);\n    cursor: pointer;\n  }\n\n  &::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\n  &:hover {\n    background: var(--instui-component-base-button-primary-ghost-hover-background);\n  }\n\n  &:active {\n    background: var(--instui-component-base-button-primary-ghost-active-background);\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    color: var(--instui-component-icon-disabled-base-color);\n    cursor: not-allowed;\n  }\n\n  &.-size-sm {\n    min-height: var(--instui-component-base-button-small-height);\n  }\n\n  &.-size-md {\n    min-height: var(--instui-component-base-button-medium-height);\n  }\n\n  &.-size-lg {\n    min-height: var(--instui-component-base-button-large-height);\n  }\n\n  &.-on-color,\n  &.-color-inverse {\n    color: var(--instui-component-icon-on-color);\n  }\n\n  &.-on-color:hover,\n  &.-color-inverse:hover {\n    background: var(--instui-component-base-button-primary-inverse-ghost-hover-background);\n  }\n\n  &.-on-color:active,\n  &.-color-inverse:active {\n    background: var(--instui-component-base-button-primary-inverse-ghost-active-background);\n  }\n\n  &.-on-color:disabled,\n  &.-on-color[aria-disabled=\"true\"],\n  &.-color-inverse:disabled,\n  &.-color-inverse[aria-disabled=\"true\"] {\n    color: var(--instui-component-icon-disabled-on-color);\n  }\n}\n"
 }.rebrand;
 const contextView$1 = {
-	"rebrand": "/**\n * @component context-view\n * @selector .pfx-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@scope (.pfx-context-view) {\n  & {\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\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  &::before,\n  &::after {\n    content: \"\";\n    position: absolute;\n    border-style: solid;\n    border-color: transparent;\n  }\n\n  /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n     pointing down. */\n  &::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    border-width: calc(\n      var(--instui-component-context-view-arrow-size) +\n        var(--instui-component-context-view-arrow-border-width)\n    );\n  }\n\n  &::after {\n    top: 100%;\n    inset-inline-start: var(--instui-spacing-space-lg);\n    border-width: var(--instui-component-context-view-arrow-size);\n    border-top-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"bottom\": caret on the top edge, pointing up. */\n  &.-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\n  &.-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\n  /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n  &.-placement-start::before,\n  &.-placement-start::after {\n    top: 50%;\n    inset-inline-start: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-start::before {\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-start::after {\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n  &.-placement-end::before,\n  &.-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\n  &.-placement-end::before {\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-end::after {\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n  &.-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\n  &.-color-inverse::before {\n    border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::after {\n    border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-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\n  &.-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\n  &.-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\n  &.-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\n  &.-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\n  &.-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\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] {\n    position: fixed;\n    overflow: visible;\n    margin: 0;\n  }\n\n  &[popover]:not(:popover-open) {\n    display: none;\n  }\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] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n}\n",
-	"canvas": "/**\n * @component context-view\n * @selector .pfx-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@scope (.pfx-context-view) {\n  & {\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\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  &::before,\n  &::after {\n    content: \"\";\n    position: absolute;\n    border-style: solid;\n    border-color: transparent;\n  }\n\n  /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n     pointing down. */\n  &::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    border-width: calc(\n      var(--instui-component-context-view-arrow-size) +\n        var(--instui-component-context-view-arrow-border-width)\n    );\n  }\n\n  &::after {\n    top: 100%;\n    inset-inline-start: var(--instui-spacing-space-lg);\n    border-width: var(--instui-component-context-view-arrow-size);\n    border-top-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"bottom\": caret on the top edge, pointing up. */\n  &.-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\n  &.-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\n  /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n  &.-placement-start::before,\n  &.-placement-start::after {\n    top: 50%;\n    inset-inline-start: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-start::before {\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-start::after {\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n  &.-placement-end::before,\n  &.-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\n  &.-placement-end::before {\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-end::after {\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n  &.-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\n  &.-color-inverse::before {\n    border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::after {\n    border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-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\n  &.-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\n  &.-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\n  &.-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\n  &.-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\n  &.-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\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] {\n    position: fixed;\n    overflow: visible;\n    margin: 0;\n  }\n\n  &[popover]:not(:popover-open) {\n    display: none;\n  }\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] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component context-view\n * @selector .pfx-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@scope (.pfx-context-view) {\n  & {\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\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  &::before,\n  &::after {\n    content: \"\";\n    position: absolute;\n    border-style: solid;\n    border-color: transparent;\n  }\n\n  /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n     pointing down. */\n  &::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    border-width: calc(\n      var(--instui-component-context-view-arrow-size) +\n        var(--instui-component-context-view-arrow-border-width)\n    );\n  }\n\n  &::after {\n    top: 100%;\n    inset-inline-start: var(--instui-spacing-space-lg);\n    border-width: var(--instui-component-context-view-arrow-size);\n    border-top-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"bottom\": caret on the top edge, pointing up. */\n  &.-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\n  &.-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\n  /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n  &.-placement-start::before,\n  &.-placement-start::after {\n    top: 50%;\n    inset-inline-start: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-start::before {\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-start::after {\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n  &.-placement-end::before,\n  &.-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\n  &.-placement-end::before {\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-end::after {\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n  &.-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\n  &.-color-inverse::before {\n    border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::after {\n    border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-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\n  &.-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\n  &.-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\n  &.-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\n  &.-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\n  &.-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\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] {\n    position: fixed;\n    overflow: visible;\n    margin: 0;\n  }\n\n  &[popover]:not(:popover-open) {\n    display: none;\n  }\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] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n}\n"
+	"rebrand": "/**\n * @component context-view\n * @selector .pfx-context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @remarks The caret is two stacked `::before`/`::after` triangles (border then fill) so it reads correctly against a matching surface; as a `[popover]` it needs the same open/`popovertarget` wiring as `popover`, but unlike `tooltip`, it dismisses on outside click or Escape.\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@scope (.pfx-context-view) {\n  & {\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\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  &::before,\n  &::after {\n    content: \"\";\n    position: absolute;\n    border-style: solid;\n    border-color: transparent;\n  }\n\n  /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n     pointing down. */\n  &::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    border-width: calc(\n      var(--instui-component-context-view-arrow-size) +\n        var(--instui-component-context-view-arrow-border-width)\n    );\n  }\n\n  &::after {\n    top: 100%;\n    inset-inline-start: var(--instui-spacing-space-lg);\n    border-width: var(--instui-component-context-view-arrow-size);\n    border-top-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"bottom\": caret on the top edge, pointing up. */\n  &.-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\n  &.-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\n  /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n  &.-placement-start::before,\n  &.-placement-start::after {\n    top: 50%;\n    inset-inline-start: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-start::before {\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-start::after {\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n  &.-placement-end::before,\n  &.-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\n  &.-placement-end::before {\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-end::after {\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n  &.-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\n  &.-color-inverse::before {\n    border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::after {\n    border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-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\n  &.-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\n  &.-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\n  &.-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\n  &.-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\n  &.-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\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] {\n    position: fixed;\n    overflow: visible;\n    margin: 0;\n  }\n\n  &[popover]:not(:popover-open) {\n    display: none;\n  }\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] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n}\n",
+	"canvas": "/**\n * @component context-view\n * @selector .pfx-context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @remarks The caret is two stacked `::before`/`::after` triangles (border then fill) so it reads correctly against a matching surface; as a `[popover]` it needs the same open/`popovertarget` wiring as `popover`, but unlike `tooltip`, it dismisses on outside click or Escape.\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@scope (.pfx-context-view) {\n  & {\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\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  &::before,\n  &::after {\n    content: \"\";\n    position: absolute;\n    border-style: solid;\n    border-color: transparent;\n  }\n\n  /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n     pointing down. */\n  &::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    border-width: calc(\n      var(--instui-component-context-view-arrow-size) +\n        var(--instui-component-context-view-arrow-border-width)\n    );\n  }\n\n  &::after {\n    top: 100%;\n    inset-inline-start: var(--instui-spacing-space-lg);\n    border-width: var(--instui-component-context-view-arrow-size);\n    border-top-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"bottom\": caret on the top edge, pointing up. */\n  &.-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\n  &.-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\n  /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n  &.-placement-start::before,\n  &.-placement-start::after {\n    top: 50%;\n    inset-inline-start: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-start::before {\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-start::after {\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n  &.-placement-end::before,\n  &.-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\n  &.-placement-end::before {\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-end::after {\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n  &.-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\n  &.-color-inverse::before {\n    border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::after {\n    border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-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\n  &.-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\n  &.-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\n  &.-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\n  &.-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\n  &.-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\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] {\n    position: fixed;\n    overflow: visible;\n    margin: 0;\n  }\n\n  &[popover]:not(:popover-open) {\n    display: none;\n  }\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] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component context-view\n * @selector .pfx-context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @remarks The caret is two stacked `::before`/`::after` triangles (border then fill) so it reads correctly against a matching surface; as a `[popover]` it needs the same open/`popovertarget` wiring as `popover`, but unlike `tooltip`, it dismisses on outside click or Escape.\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@scope (.pfx-context-view) {\n  & {\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\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  &::before,\n  &::after {\n    content: \"\";\n    position: absolute;\n    border-style: solid;\n    border-color: transparent;\n  }\n\n  /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n     pointing down. */\n  &::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    border-width: calc(\n      var(--instui-component-context-view-arrow-size) +\n        var(--instui-component-context-view-arrow-border-width)\n    );\n  }\n\n  &::after {\n    top: 100%;\n    inset-inline-start: var(--instui-spacing-space-lg);\n    border-width: var(--instui-component-context-view-arrow-size);\n    border-top-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"bottom\": caret on the top edge, pointing up. */\n  &.-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\n  &.-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\n  /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n  &.-placement-start::before,\n  &.-placement-start::after {\n    top: 50%;\n    inset-inline-start: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-start::before {\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-start::after {\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n  &.-placement-end::before,\n  &.-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\n  &.-placement-end::before {\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-end::after {\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n  &.-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\n  &.-color-inverse::before {\n    border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::after {\n    border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-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\n  &.-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\n  &.-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\n  &.-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\n  &.-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\n  &.-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\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] {\n    position: fixed;\n    overflow: visible;\n    margin: 0;\n  }\n\n  &[popover]:not(:popover-open) {\n    display: none;\n  }\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] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n}\n"
 }.rebrand;
 const drawerLayout$1 = {
 	"rebrand": "/**\n * @component drawer-layout\n * @selector .pfx-drawer-layout\n * @summary A split layout with a collapsible side tray and a primary scrollable content pane.\n * @modifier -placement-start — Dock the tray on the inline-start side (the default; sets it explicitly).\n * @modifier -placement-end — Dock the tray on the inline-end side.\n * @modifier -should-overlay-tray — @interaction Render the tray as an overlay instead of shrinking content inline.\n * @modifier -open — Show the tray even when the `open` attribute is absent.        \n * @part .tray — The side panel.\n * @part .content — The main pane.\n * @cssproperty --pantoken-bp-md — Width threshold for overlay mode (`30em`, themed via responsive utilities).\n * @remarks This record defines layout, placement, and open-state gates; the tray surface and content scrolling live in the `drawer-layout.tray` and `drawer-layout.content` members.\n * @remarks The tray stays hidden until `open` (attribute) or `-open` (class) is present.\n * @remarks A `container-type: inline-size` container (named `pantoken-drawer-layout`) lets the `drawer-layout.tray`/`drawer-layout.content` members auto-detect overlay mode from this element's own computed inline-size — no JS required for the visual switch.\n * @remarks `-placement-end` and the default (start) both use `flex-direction`/`inset-inline-*` logical properties, not `left`/`right`, so the tray's side follows `direction`/`dir=\"rtl\"` automatically — no separate RTL rules are needed.\n * @accessibility When the tray acts as navigation, label it with an accessible heading or `aria-label`. Give `.content` `role=\"region\"` (InstUI's DrawerLayout convention) and name it with `aria-label`/`aria-labelledby` when context alone doesn't identify it.\n * @compat The `drawer-layout.tray`/`drawer-layout.content` members switch to overlay mode automatically via a `@container` query once this element's inline-size drops below tray-width + `--pantoken-bp-md`. The `@pantoken/interactions` behavior additionally toggles `[should-overlay-tray]`/`.-should-overlay-tray` (a manual override) and emits `overlaytraychange` for apps that need the change as an event.\n * @example\n * ```html\n * <div class=\"pfx-drawer-layout\" id=\"drawer\" open>\n *   <aside class=\"tray\">Navigation</aside>\n *   <main class=\"content\" role=\"region\">Main content</main>\n * </div>\n * ```\n * @structure\n * .pfx-drawer-layout {\n *   @member tray {}\n *   @member content {}\n * }\n * @related tray — A standalone edge overlay; this layout keeps tray and content in the same flow.\n * @related context-view — A smaller anchored surface for contextual actions and detail.\n */\n\n@scope (.pfx-drawer-layout) {\n  :scope {\n    display: flex;\n    block-size: 100%;\n    position: relative;\n    /* Named so the tray/content members can query this element's own width, not an unrelated ancestor. */\n    container: pantoken-drawer-layout / inline-size;\n\n    &[placement=\"start\"],\n    &.-placement-start {\n      flex-direction: row;\n    }\n\n    &[placement=\"end\"],\n    &.-placement-end {\n      flex-direction: row-reverse;\n    }\n\n    &:not([open]):not(.-open) > .tray {\n      display: none;\n    }\n\n    &[should-overlay-tray],\n    &.-should-overlay-tray {\n      min-inline-size: 0;\n    }\n  }\n}\n",
@@ -368,9 +381,9 @@ const drawerLayoutTray$1 = {
 	"canvasHighContrast": "/**\n * @component drawer-layout.tray\n * @memberOf drawer-layout\n * @selector .tray\n * @summary The side panel beside main content, with optional overlay and tray-like surface modifiers.\n * @modifier -placement-end — Dock this tray to inline-end when overlay mode is active.\n * @modifier -without-border — Remove the panel edge border.\n * @modifier -without-shadow — Remove elevation when overlay mode is active.\n * @remarks Inline mode keeps the tray in flex flow; overlay mode (set on `drawer-layout`) absolutely positions it above content.\n * @remarks Overlay mode also applies automatically — via a `@container` query on the parent's `pantoken-drawer-layout` container — once the parent's inline-size drops below `46em` (`16em` tray width + `30em` breakpoint).\n * @remarks Positioning uses `inset-inline-start`/`inset-inline` (never `left`/`right`), so `-placement-end` docks to the true trailing edge in both LTR and RTL.\n * @accessibility If used as navigation, wrap links in a semantic `<nav>` and provide an accessible name.\n * @related drawer-layout.content — The primary pane that flexes alongside this member.\n * @example\n * ```html\n * <div class=\"pfx-drawer-layout\" open>\n *   <aside class=\"tray\" aria-label=\"Course navigation\">\n *     <a class=\"pfx-link\" href=\"#\">Modules</a>\n *   </aside>\n *   <main class=\"content\" role=\"region\">Main content</main>\n * </div>\n * ```\n * @structure\n * @scope (@component drawer-layout) {\n *   .tray {\n *     slot {}\n *   }\n * }\n */\n\n@scope (.pfx-drawer-layout) {\n  :scope {\n    > .tray {\n      flex: 0 0 var(--instui-component-tray-width-xs, 16em);\n      inline-size: var(--drawer-layout-tray-width, var(--instui-component-tray-width-xs, 16em));\n      max-inline-size: 100%;\n      overflow: auto;\n      background: var(--instui-color-background-elevated-surface-base);\n      border-inline-end: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n    }\n\n    > .tray.-without-border {\n      border-inline: 0;\n    }\n\n    &[should-overlay-tray] > .tray,\n    &.-should-overlay-tray > .tray {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: 0;\n      z-index: var(--instui-component-tray-z-index, 9999);\n      box-shadow: var(--instui-elevation-topmost);\n    }\n\n    &[should-overlay-tray] > .tray.-placement-end,\n    &.-should-overlay-tray > .tray.-placement-end,\n    &[should-overlay-tray][placement=\"end\"] > .tray,\n    &.-should-overlay-tray[placement=\"end\"] > .tray,\n    &[should-overlay-tray].-placement-end > .tray,\n    &.-should-overlay-tray.-placement-end > .tray {\n      inset-inline: auto 0;\n    }\n\n    &[should-overlay-tray] > .tray.-without-shadow,\n    &.-should-overlay-tray > .tray.-without-shadow {\n      box-shadow: none;\n    }\n  }\n}\n\n/* Automatic overlay: no JS required. 46em = 16em tray width + 30em content breakpoint. */\n@container pantoken-drawer-layout (max-width: 46em) {\n  .pfx-drawer-layout > .tray {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    z-index: var(--instui-component-tray-z-index, 1);\n    box-shadow: var(--instui-elevation-topmost);\n  }\n\n  .pfx-drawer-layout > .tray.-placement-end,\n  .pfx-drawer-layout[placement=\"end\"] > .tray,\n  .pfx-drawer-layout.-placement-end > .tray {\n    inset-inline: auto 0;\n  }\n\n  .pfx-drawer-layout > .tray.-without-shadow {\n    box-shadow: none;\n  }\n}\n"
 }.rebrand;
 const fileDrop$1 = {
-	"rebrand": "/**\n * @component file-drop\n * @selector .pfx-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@scope (.pfx-file-drop) {\n  & {\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  &:hover,\n  &.-hover {\n    border-color: var(--instui-component-file-drop-hover-border-color);\n  }\n\n  &.-accepted {\n    border-color: var(--instui-component-file-drop-accepted-color);\n  }\n\n  &.-rejected {\n    border-color: var(--instui-component-file-drop-rejected-color);\n  }\n\n  & > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n}\n",
-	"canvas": "/**\n * @component file-drop\n * @selector .pfx-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@scope (.pfx-file-drop) {\n  & {\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  &:hover,\n  &.-hover {\n    border-color: var(--instui-component-file-drop-hover-border-color);\n  }\n\n  &.-accepted {\n    border-color: var(--instui-component-file-drop-accepted-color);\n  }\n\n  &.-rejected {\n    border-color: var(--instui-component-file-drop-rejected-color);\n  }\n\n  & > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component file-drop\n * @selector .pfx-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@scope (.pfx-file-drop) {\n  & {\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  &:hover,\n  &.-hover {\n    border-color: var(--instui-component-file-drop-hover-border-color);\n  }\n\n  &.-accepted {\n    border-color: var(--instui-component-file-drop-accepted-color);\n  }\n\n  &.-rejected {\n    border-color: var(--instui-component-file-drop-rejected-color);\n  }\n\n  & > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n}\n"
+	"rebrand": "/**\n * @component file-drop\n * @selector .pfx-file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @remarks The `-hover`/`-accepted`/`-rejected` classes are purely visual — actual drag-and-drop detection and file validation are the consumer's JS to wire up around the wrapped native input.\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@scope (.pfx-file-drop) {\n  & {\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  &:hover,\n  &.-hover {\n    border-color: var(--instui-component-file-drop-hover-border-color);\n  }\n\n  &.-accepted {\n    border-color: var(--instui-component-file-drop-accepted-color);\n  }\n\n  &.-rejected {\n    border-color: var(--instui-component-file-drop-rejected-color);\n  }\n\n  & > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n}\n",
+	"canvas": "/**\n * @component file-drop\n * @selector .pfx-file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @remarks The `-hover`/`-accepted`/`-rejected` classes are purely visual — actual drag-and-drop detection and file validation are the consumer's JS to wire up around the wrapped native input.\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@scope (.pfx-file-drop) {\n  & {\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  &:hover,\n  &.-hover {\n    border-color: var(--instui-component-file-drop-hover-border-color);\n  }\n\n  &.-accepted {\n    border-color: var(--instui-component-file-drop-accepted-color);\n  }\n\n  &.-rejected {\n    border-color: var(--instui-component-file-drop-rejected-color);\n  }\n\n  & > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component file-drop\n * @selector .pfx-file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @remarks The `-hover`/`-accepted`/`-rejected` classes are purely visual — actual drag-and-drop detection and file validation are the consumer's JS to wire up around the wrapped native input.\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@scope (.pfx-file-drop) {\n  & {\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  &:hover,\n  &.-hover {\n    border-color: var(--instui-component-file-drop-hover-border-color);\n  }\n\n  &.-accepted {\n    border-color: var(--instui-component-file-drop-accepted-color);\n  }\n\n  &.-rejected {\n    border-color: var(--instui-component-file-drop-rejected-color);\n  }\n\n  & > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n}\n"
 }.rebrand;
 const formField$1 = {
 	"rebrand": "/**\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. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\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\n@scope (.pfx-form-field) {\n  :scope {\n    > .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\n    > .controls {\n      grid-area: controls;\n    }\n  }\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\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\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\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\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\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\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n",
@@ -387,15 +400,25 @@ const formFieldMessages$1 = {
 	"canvas": "/**\n * @component form-field-messages\n * @selector .pfx-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 * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @alias {@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@scope (.pfx-form-field-messages) {\n  & {\n    display: flex;\n    flex-direction: column;\n    gap: var(--instui-component-form-field-layout-gap-primitives);\n  }\n}\n\n@scope (.pfx-form-field-message) {\n  & {\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\n  &.-type-hint {\n    color: var(--instui-component-form-field-message-hint-text-color);\n  }\n\n  &.-type-error {\n    color: var(--instui-component-form-field-message-error-text-color);\n  }\n\n  &.-type-success {\n    color: var(--instui-component-form-field-message-success-text-color);\n  }\n\n  &.-type-error::before,\n  &.-type-success::before {\n    content: \"\";\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    background: currentColor;\n  }\n\n  &.-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\n  &.-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\n  /* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n  &.-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}\n",
 	"canvasHighContrast": "/**\n * @component form-field-messages\n * @selector .pfx-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 * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @alias {@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@scope (.pfx-form-field-messages) {\n  & {\n    display: flex;\n    flex-direction: column;\n    gap: var(--instui-component-form-field-layout-gap-primitives);\n  }\n}\n\n@scope (.pfx-form-field-message) {\n  & {\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\n  &.-type-hint {\n    color: var(--instui-component-form-field-message-hint-text-color);\n  }\n\n  &.-type-error {\n    color: var(--instui-component-form-field-message-error-text-color);\n  }\n\n  &.-type-success {\n    color: var(--instui-component-form-field-message-success-text-color);\n  }\n\n  &.-type-error::before,\n  &.-type-success::before {\n    content: \"\";\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    background: currentColor;\n  }\n\n  &.-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\n  &.-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\n  /* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n  &.-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}\n"
 }.rebrand;
+const heading$1 = {
+	"rebrand": "/**\n * @component heading\n * @summary Heading typography from `-level-h1` to `-level-h6`.\n * @remarks The `-variant-*` presets override a `-level-*`'s font-size and font-weight, so combine only one of each family per element.\n * @selector .pfx-heading\n * @modifier -level-h1 — Render at the h1 type scale.\n * @modifier -level-h2 — Render at the h2 type scale.\n * @modifier -level-h3 — Render at the h3 type scale.\n * @modifier -level-h4 — Render at the h4 type scale.\n * @modifier -level-h5 — Render at the h5 type scale.\n * @modifier -level-h6 — Render at the h6 type scale.\n * @modifier -color-primary — (default) Primary colour.\n * @modifier -color-secondary — Secondary (muted) colour.\n * @modifier -color-ai — AI-accent colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) colour.\n * @modifier -border-top — Add a top rule.\n * @modifier -border-bottom — Add a bottom rule.\n * @modifier -variant-label — Label type preset.\n * @modifier -variant-title-page — Page-title preset.\n * @modifier -variant-title-section — Section-title preset.\n * @modifier -variant-title-card-mini — Mini card-title preset.\n * @modifier -variant-title-card-regular — Regular card-title preset.\n * @modifier -variant-title-card-section — Card section-title preset.\n * @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.\n * @example\n * <div class=\"pfx-heading -level-h1\">Heading h1</div>\n * @related text — Body typography for non-heading text.\n */\n@scope (.pfx-heading) {\n  & {\n    display: block;\n    margin: 0;\n    font-family: var(--instui-component-heading-h1-font-family);\n    color: var(--instui-component-heading-base-color);\n    line-height: var(--instui-component-heading-line-height);\n    font-size: var(--instui-component-heading-h1-font-size);\n    font-weight: var(--instui-component-heading-h1-font-weight);\n  }\n\n  &.-level-h1 {\n    font-size: var(--instui-component-heading-h1-font-size);\n    font-weight: var(--instui-component-heading-h1-font-weight);\n  }\n\n  &.-level-h2 {\n    font-size: var(--instui-component-heading-h2-font-size);\n    font-weight: var(--instui-component-heading-h2-font-weight);\n  }\n\n  &.-level-h3 {\n    font-size: var(--instui-component-heading-h3-font-size);\n    font-weight: var(--instui-component-heading-h3-font-weight);\n  }\n\n  &.-level-h4 {\n    font-size: var(--instui-component-heading-h4-font-size);\n    font-weight: var(--instui-component-heading-h4-font-weight);\n  }\n\n  &.-level-h5 {\n    font-size: var(--instui-component-heading-h5-font-size);\n    font-weight: var(--instui-component-heading-h5-font-weight);\n  }\n\n  &.-level-h6 {\n    font-size: var(--instui-component-heading-h6-font-size);\n    font-weight: var(--instui-component-heading-h6-font-weight);\n  }\n\n  &.-variant-title-page {\n    font-size: var(--instui-component-heading-title-page-desktop-font-size);\n    font-weight: var(--instui-component-heading-title-page-desktop-font-weight);\n  }\n\n  &.-variant-title-section {\n    font-size: var(--instui-component-heading-title-section-font-size);\n    font-weight: var(--instui-component-heading-title-section-font-weight);\n  }\n\n  &.-variant-title-card-section {\n    font-size: var(--instui-component-heading-title-card-section-font-size);\n    font-weight: var(--instui-component-heading-title-card-section-font-weight);\n  }\n\n  &.-variant-title-card-regular {\n    font-size: var(--instui-component-heading-title-card-regular-font-size);\n    font-weight: var(--instui-component-heading-title-card-regular-font-weight);\n  }\n\n  &.-variant-title-card-mini {\n    font-size: var(--instui-component-heading-title-card-mini-font-size);\n    font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n  }\n\n  &.-variant-label {\n    font-size: var(--instui-component-heading-label-font-size);\n    font-weight: var(--instui-component-heading-label-font-weight);\n  }\n\n  &.-color-primary {\n    color: var(--instui-component-heading-base-color);\n  }\n\n  &.-color-secondary {\n    color: var(--instui-component-heading-muted-color);\n  }\n\n  &.-color-primary-inverse {\n    color: var(--instui-component-heading-inverse-color);\n  }\n\n  &.-color-ai {\n    background: linear-gradient(\n      to bottom,\n      var(--instui-component-heading-ai-text-top-gradient-color) 0%,\n      var(--instui-component-heading-ai-text-bottom-gradient-color) 100%\n    );\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    color: transparent;\n  }\n\n  &.-border-bottom {\n    border-bottom: var(--instui-component-heading-border-width) solid\n      var(--instui-component-heading-border-color);\n    padding-bottom: var(--instui-component-heading-border-padding);\n  }\n\n  &.-border-top {\n    border-top: var(--instui-component-heading-border-width) solid\n      var(--instui-component-heading-border-color);\n    padding-top: var(--instui-component-heading-border-padding);\n  }\n}\n",
+	"canvas": "/**\n * @component heading\n * @summary Heading typography from `-level-h1` to `-level-h6`.\n * @remarks The `-variant-*` presets override a `-level-*`'s font-size and font-weight, so combine only one of each family per element.\n * @selector .pfx-heading\n * @modifier -level-h1 — Render at the h1 type scale.\n * @modifier -level-h2 — Render at the h2 type scale.\n * @modifier -level-h3 — Render at the h3 type scale.\n * @modifier -level-h4 — Render at the h4 type scale.\n * @modifier -level-h5 — Render at the h5 type scale.\n * @modifier -level-h6 — Render at the h6 type scale.\n * @modifier -color-primary — (default) Primary colour.\n * @modifier -color-secondary — Secondary (muted) colour.\n * @modifier -color-ai — AI-accent colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) colour.\n * @modifier -border-top — Add a top rule.\n * @modifier -border-bottom — Add a bottom rule.\n * @modifier -variant-label — Label type preset.\n * @modifier -variant-title-page — Page-title preset.\n * @modifier -variant-title-section — Section-title preset.\n * @modifier -variant-title-card-mini — Mini card-title preset.\n * @modifier -variant-title-card-regular — Regular card-title preset.\n * @modifier -variant-title-card-section — Card section-title preset.\n * @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.\n * @example\n * <div class=\"pfx-heading -level-h1\">Heading h1</div>\n * @related text — Body typography for non-heading text.\n */\n@scope (.pfx-heading) {\n  & {\n    display: block;\n    margin: 0;\n    font-family: var(--instui-component-heading-h1-font-family);\n    color: var(--instui-component-heading-base-color);\n    line-height: var(--instui-component-heading-line-height);\n    font-size: var(--instui-component-heading-h1-font-size);\n    font-weight: var(--instui-component-heading-h1-font-weight);\n  }\n\n  &.-level-h1 {\n    font-size: var(--instui-component-heading-h1-font-size);\n    font-weight: var(--instui-component-heading-h1-font-weight);\n  }\n\n  &.-level-h2 {\n    font-size: var(--instui-component-heading-h2-font-size);\n    font-weight: var(--instui-component-heading-h2-font-weight);\n  }\n\n  &.-level-h3 {\n    font-size: var(--instui-component-heading-h3-font-size);\n    font-weight: var(--instui-component-heading-h3-font-weight);\n  }\n\n  &.-level-h4 {\n    font-size: var(--instui-component-heading-h4-font-size);\n    font-weight: var(--instui-component-heading-h4-font-weight);\n  }\n\n  &.-level-h5 {\n    font-size: var(--instui-component-heading-h5-font-size);\n    font-weight: var(--instui-component-heading-h5-font-weight);\n  }\n\n  &.-level-h6 {\n    font-size: var(--instui-component-heading-h6-font-size);\n    font-weight: var(--instui-component-heading-h6-font-weight);\n  }\n\n  &.-variant-title-page {\n    font-size: var(--instui-component-heading-title-page-desktop-font-size);\n    font-weight: var(--instui-component-heading-title-page-desktop-font-weight);\n  }\n\n  &.-variant-title-section {\n    font-size: var(--instui-component-heading-title-section-font-size);\n    font-weight: var(--instui-component-heading-title-section-font-weight);\n  }\n\n  &.-variant-title-card-section {\n    font-size: var(--instui-component-heading-title-card-section-font-size);\n    font-weight: var(--instui-component-heading-title-card-section-font-weight);\n  }\n\n  &.-variant-title-card-regular {\n    font-size: var(--instui-component-heading-title-card-regular-font-size);\n    font-weight: var(--instui-component-heading-title-card-regular-font-weight);\n  }\n\n  &.-variant-title-card-mini {\n    font-size: var(--instui-component-heading-title-card-mini-font-size);\n    font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n  }\n\n  &.-variant-label {\n    font-size: var(--instui-component-heading-label-font-size);\n    font-weight: var(--instui-component-heading-label-font-weight);\n  }\n\n  &.-color-primary {\n    color: var(--instui-component-heading-base-color);\n  }\n\n  &.-color-secondary {\n    color: var(--instui-component-heading-muted-color);\n  }\n\n  &.-color-primary-inverse {\n    color: var(--instui-component-heading-inverse-color);\n  }\n\n  &.-color-ai {\n    background: linear-gradient(\n      to bottom,\n      var(--instui-component-heading-ai-text-top-gradient-color) 0%,\n      var(--instui-component-heading-ai-text-bottom-gradient-color) 100%\n    );\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    color: transparent;\n  }\n\n  &.-border-bottom {\n    border-bottom: var(--instui-component-heading-border-width) solid\n      var(--instui-component-heading-border-color);\n    padding-bottom: var(--instui-component-heading-border-padding);\n  }\n\n  &.-border-top {\n    border-top: var(--instui-component-heading-border-width) solid\n      var(--instui-component-heading-border-color);\n    padding-top: var(--instui-component-heading-border-padding);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component heading\n * @summary Heading typography from `-level-h1` to `-level-h6`.\n * @remarks The `-variant-*` presets override a `-level-*`'s font-size and font-weight, so combine only one of each family per element.\n * @selector .pfx-heading\n * @modifier -level-h1 — Render at the h1 type scale.\n * @modifier -level-h2 — Render at the h2 type scale.\n * @modifier -level-h3 — Render at the h3 type scale.\n * @modifier -level-h4 — Render at the h4 type scale.\n * @modifier -level-h5 — Render at the h5 type scale.\n * @modifier -level-h6 — Render at the h6 type scale.\n * @modifier -color-primary — (default) Primary colour.\n * @modifier -color-secondary — Secondary (muted) colour.\n * @modifier -color-ai — AI-accent colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) colour.\n * @modifier -border-top — Add a top rule.\n * @modifier -border-bottom — Add a bottom rule.\n * @modifier -variant-label — Label type preset.\n * @modifier -variant-title-page — Page-title preset.\n * @modifier -variant-title-section — Section-title preset.\n * @modifier -variant-title-card-mini — Mini card-title preset.\n * @modifier -variant-title-card-regular — Regular card-title preset.\n * @modifier -variant-title-card-section — Card section-title preset.\n * @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.\n * @example\n * <div class=\"pfx-heading -level-h1\">Heading h1</div>\n * @related text — Body typography for non-heading text.\n */\n@scope (.pfx-heading) {\n  & {\n    display: block;\n    margin: 0;\n    font-family: var(--instui-component-heading-h1-font-family);\n    color: var(--instui-component-heading-base-color);\n    line-height: var(--instui-component-heading-line-height);\n    font-size: var(--instui-component-heading-h1-font-size);\n    font-weight: var(--instui-component-heading-h1-font-weight);\n  }\n\n  &.-level-h1 {\n    font-size: var(--instui-component-heading-h1-font-size);\n    font-weight: var(--instui-component-heading-h1-font-weight);\n  }\n\n  &.-level-h2 {\n    font-size: var(--instui-component-heading-h2-font-size);\n    font-weight: var(--instui-component-heading-h2-font-weight);\n  }\n\n  &.-level-h3 {\n    font-size: var(--instui-component-heading-h3-font-size);\n    font-weight: var(--instui-component-heading-h3-font-weight);\n  }\n\n  &.-level-h4 {\n    font-size: var(--instui-component-heading-h4-font-size);\n    font-weight: var(--instui-component-heading-h4-font-weight);\n  }\n\n  &.-level-h5 {\n    font-size: var(--instui-component-heading-h5-font-size);\n    font-weight: var(--instui-component-heading-h5-font-weight);\n  }\n\n  &.-level-h6 {\n    font-size: var(--instui-component-heading-h6-font-size);\n    font-weight: var(--instui-component-heading-h6-font-weight);\n  }\n\n  &.-variant-title-page {\n    font-size: var(--instui-component-heading-title-page-desktop-font-size);\n    font-weight: var(--instui-component-heading-title-page-desktop-font-weight);\n  }\n\n  &.-variant-title-section {\n    font-size: var(--instui-component-heading-title-section-font-size);\n    font-weight: var(--instui-component-heading-title-section-font-weight);\n  }\n\n  &.-variant-title-card-section {\n    font-size: var(--instui-component-heading-title-card-section-font-size);\n    font-weight: var(--instui-component-heading-title-card-section-font-weight);\n  }\n\n  &.-variant-title-card-regular {\n    font-size: var(--instui-component-heading-title-card-regular-font-size);\n    font-weight: var(--instui-component-heading-title-card-regular-font-weight);\n  }\n\n  &.-variant-title-card-mini {\n    font-size: var(--instui-component-heading-title-card-mini-font-size);\n    font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n  }\n\n  &.-variant-label {\n    font-size: var(--instui-component-heading-label-font-size);\n    font-weight: var(--instui-component-heading-label-font-weight);\n  }\n\n  &.-color-primary {\n    color: var(--instui-component-heading-base-color);\n  }\n\n  &.-color-secondary {\n    color: var(--instui-component-heading-muted-color);\n  }\n\n  &.-color-primary-inverse {\n    color: var(--instui-component-heading-inverse-color);\n  }\n\n  &.-color-ai {\n    background: linear-gradient(\n      to bottom,\n      var(--instui-component-heading-ai-text-top-gradient-color) 0%,\n      var(--instui-component-heading-ai-text-bottom-gradient-color) 100%\n    );\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    color: transparent;\n  }\n\n  &.-border-bottom {\n    border-bottom: var(--instui-component-heading-border-width) solid\n      var(--instui-component-heading-border-color);\n    padding-bottom: var(--instui-component-heading-border-padding);\n  }\n\n  &.-border-top {\n    border-top: var(--instui-component-heading-border-width) solid\n      var(--instui-component-heading-border-color);\n    padding-top: var(--instui-component-heading-border-padding);\n  }\n}\n"
+}.rebrand;
 const img$1 = {
-	"rebrand": "/**\n * @component img\n * @selector .pfx-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@scope (.pfx-img) {\n  & {\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\n  &.-display-block {\n    display: block;\n  }\n\n  /* constrain: fill a sized box (the consumer sets width/height). */\n  &.-constrain-cover {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  &.-constrain-contain {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* Effects compose through the custom property, so grayscale + blur can apply together. */\n  &.-with-grayscale {\n    --pantoken-img-filter: grayscale(1);\n  }\n\n  &.-with-blur {\n    --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n  }\n\n  &.-with-grayscale.-with-blur {\n    --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n  }\n}\n",
-	"canvas": "/**\n * @component img\n * @selector .pfx-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@scope (.pfx-img) {\n  & {\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\n  &.-display-block {\n    display: block;\n  }\n\n  /* constrain: fill a sized box (the consumer sets width/height). */\n  &.-constrain-cover {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  &.-constrain-contain {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* Effects compose through the custom property, so grayscale + blur can apply together. */\n  &.-with-grayscale {\n    --pantoken-img-filter: grayscale(1);\n  }\n\n  &.-with-blur {\n    --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n  }\n\n  &.-with-grayscale.-with-blur {\n    --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component img\n * @selector .pfx-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@scope (.pfx-img) {\n  & {\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\n  &.-display-block {\n    display: block;\n  }\n\n  /* constrain: fill a sized box (the consumer sets width/height). */\n  &.-constrain-cover {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  &.-constrain-contain {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* Effects compose through the custom property, so grayscale + blur can apply together. */\n  &.-with-grayscale {\n    --pantoken-img-filter: grayscale(1);\n  }\n\n  &.-with-blur {\n    --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n  }\n\n  &.-with-grayscale.-with-blur {\n    --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n  }\n}\n"
+	"rebrand": "/**\n * @component img\n * @selector .pfx-img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @remarks Effects compose through the shared `--pantoken-img-filter` custom property, so `-with-grayscale` and `-with-blur` can apply together; the `-constrain-*` crop modifiers require the consumer to size the box explicitly.\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@scope (.pfx-img) {\n  & {\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\n  &.-display-block {\n    display: block;\n  }\n\n  /* constrain: fill a sized box (the consumer sets width/height). */\n  &.-constrain-cover {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  &.-constrain-contain {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* Effects compose through the custom property, so grayscale + blur can apply together. */\n  &.-with-grayscale {\n    --pantoken-img-filter: grayscale(1);\n  }\n\n  &.-with-blur {\n    --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n  }\n\n  &.-with-grayscale.-with-blur {\n    --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n  }\n}\n",
+	"canvas": "/**\n * @component img\n * @selector .pfx-img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @remarks Effects compose through the shared `--pantoken-img-filter` custom property, so `-with-grayscale` and `-with-blur` can apply together; the `-constrain-*` crop modifiers require the consumer to size the box explicitly.\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@scope (.pfx-img) {\n  & {\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\n  &.-display-block {\n    display: block;\n  }\n\n  /* constrain: fill a sized box (the consumer sets width/height). */\n  &.-constrain-cover {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  &.-constrain-contain {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* Effects compose through the custom property, so grayscale + blur can apply together. */\n  &.-with-grayscale {\n    --pantoken-img-filter: grayscale(1);\n  }\n\n  &.-with-blur {\n    --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n  }\n\n  &.-with-grayscale.-with-blur {\n    --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component img\n * @selector .pfx-img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @remarks Effects compose through the shared `--pantoken-img-filter` custom property, so `-with-grayscale` and `-with-blur` can apply together; the `-constrain-*` crop modifiers require the consumer to size the box explicitly.\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@scope (.pfx-img) {\n  & {\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\n  &.-display-block {\n    display: block;\n  }\n\n  /* constrain: fill a sized box (the consumer sets width/height). */\n  &.-constrain-cover {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  &.-constrain-contain {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* Effects compose through the custom property, so grayscale + blur can apply together. */\n  &.-with-grayscale {\n    --pantoken-img-filter: grayscale(1);\n  }\n\n  &.-with-blur {\n    --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n  }\n\n  &.-with-grayscale.-with-blur {\n    --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n  }\n}\n"
 }.rebrand;
 const inPlaceEdit$1 = {
-	"rebrand": "/**\n * @component in-place-edit\n * @selector .pfx-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@scope (.pfx-in-place-edit) {\n  & {\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\n  /* Hover affordance: it's editable. */\n  &:hover {\n    background: var(--instui-color-background-muted);\n  }\n\n  /* Focus = edit mode: input chrome + the focus ring. */\n  &: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\n  &: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  &.-readonly {\n    cursor: default;\n  }\n\n  &.-readonly:hover {\n    background: transparent;\n  }\n}\n",
-	"canvas": "/**\n * @component in-place-edit\n * @selector .pfx-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@scope (.pfx-in-place-edit) {\n  & {\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\n  /* Hover affordance: it's editable. */\n  &:hover {\n    background: var(--instui-color-background-muted);\n  }\n\n  /* Focus = edit mode: input chrome + the focus ring. */\n  &: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\n  &: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  &.-readonly {\n    cursor: default;\n  }\n\n  &.-readonly:hover {\n    background: transparent;\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component in-place-edit\n * @selector .pfx-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@scope (.pfx-in-place-edit) {\n  & {\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\n  /* Hover affordance: it's editable. */\n  &:hover {\n    background: var(--instui-color-background-muted);\n  }\n\n  /* Focus = edit mode: input chrome + the focus ring. */\n  &: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\n  &: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  &.-readonly {\n    cursor: default;\n  }\n\n  &.-readonly:hover {\n    background: transparent;\n  }\n}\n"
+	"rebrand": "/**\n * @component in-place-edit\n * @selector .pfx-in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @remarks The input chrome only appears while focused; `-readonly` suppresses both the hover and focus affordances so the element always reads as plain inline text.\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@scope (.pfx-in-place-edit) {\n  & {\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\n  /* Hover affordance: it's editable. */\n  &:hover {\n    background: var(--instui-color-background-muted);\n  }\n\n  /* Focus = edit mode: input chrome + the focus ring. */\n  &: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\n  &: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  &.-readonly {\n    cursor: default;\n  }\n\n  &.-readonly:hover {\n    background: transparent;\n  }\n}\n",
+	"canvas": "/**\n * @component in-place-edit\n * @selector .pfx-in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @remarks The input chrome only appears while focused; `-readonly` suppresses both the hover and focus affordances so the element always reads as plain inline text.\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@scope (.pfx-in-place-edit) {\n  & {\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\n  /* Hover affordance: it's editable. */\n  &:hover {\n    background: var(--instui-color-background-muted);\n  }\n\n  /* Focus = edit mode: input chrome + the focus ring. */\n  &: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\n  &: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  &.-readonly {\n    cursor: default;\n  }\n\n  &.-readonly:hover {\n    background: transparent;\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component in-place-edit\n * @selector .pfx-in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @remarks The input chrome only appears while focused; `-readonly` suppresses both the hover and focus affordances so the element always reads as plain inline text.\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@scope (.pfx-in-place-edit) {\n  & {\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\n  /* Hover affordance: it's editable. */\n  &:hover {\n    background: var(--instui-color-background-muted);\n  }\n\n  /* Focus = edit mode: input chrome + the focus ring. */\n  &: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\n  &: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  &.-readonly {\n    cursor: default;\n  }\n\n  &.-readonly:hover {\n    background: transparent;\n  }\n}\n"
+}.rebrand;
+const inputGroup$1 = {
+	"rebrand": "/**\n * @component input-group\n * @summary A facade around a text input with leading and trailing icon slots.\n * @remarks Wraps the same field chrome as `text-input` with icon slots either side of it; `-should-not-wrap` is only needed when the group's contents would otherwise overflow onto a second line.\n * @selector .pfx-input-group\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @modifier -should-not-wrap — Keep the group on one line (no wrapping).\n * @part .before — The leading content slot.\n * @part .after — The trailing content slot.\n * @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.\n * @cssstate disabled\n * @example\n * <span class=\"pfx-input-group\">\n *   <span class=\"before\">@</span>\n *   <input type=\"text\" placeholder=\"username\">\n * </span>\n * @related text-input — Wraps a text input, adding leading and trailing icon slots.\n */\n@scope (.pfx-input-group) {\n  & {\n    display: flex;\n    align-items: center;\n    inline-size: 100%;\n    box-sizing: border-box;\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    gap: var(--instui-component-text-input-gap-content);\n    background-color: var(--instui-component-text-input-background-color);\n    border: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-component-text-input-border-radius);\n    color: var(--instui-component-text-input-text-color);\n    font-family: var(--instui-component-text-input-font-family);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &:hover {\n    background-color: var(--instui-component-text-input-background-hover-color);\n    border-color: var(--instui-component-text-input-border-hover-color);\n  }\n\n  /* The inner control is chromeless — the facade provides border/bg/ring. */\n  & > input,\n  & .pfx-text-input {\n    flex: 1;\n    min-inline-size: 0;\n    border: 0;\n    padding: 0;\n    background: transparent;\n    block-size: auto;\n    font: inherit;\n    color: inherit;\n    outline: none;\n  }\n\n  & > input::placeholder {\n    color: var(--instui-component-text-input-placeholder-color);\n  }\n\n  /* Leading/trailing content slots (icons ride the -icon-* glyph painter). */\n  & .before,\n  & .after {\n    display: inline-flex;\n    align-items: center;\n    flex: none;\n    color: var(--instui-component-text-input-text-color);\n  }\n\n  &.-disabled,\n  &:has(> input:disabled) {\n    background-color: var(--instui-component-text-input-background-disabled-color);\n    border-color: var(--instui-component-text-input-border-disabled-color);\n    color: var(--instui-component-text-input-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-readonly {\n    background-color: var(--instui-component-text-input-background-readonly-color);\n    border-color: var(--instui-component-text-input-border-readonly-color);\n    color: var(--instui-component-text-input-text-readonly-color);\n  }\n\n  &.-invalid {\n    border-color: var(--instui-component-text-input-error-border-color);\n  }\n\n  &.-success {\n    border-color: var(--instui-component-text-input-success-border-color);\n  }\n\n  /* Focus ring lives on the facade (the input has no chrome). */\n  &:has(: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    border-radius: var(--instui-focus-outline-radius);\n  }\n\n  &:is(.-invalid, :has(> input:user-invalid)):has(:focus-visible) {\n    outline-color: var(--instui-focus-outline-color-danger);\n  }\n\n  &.-success:has(:focus-visible) {\n    outline-color: var(--instui-focus-outline-color-success);\n  }\n\n  &.-size-sm {\n    block-size: var(--instui-component-text-input-height-sm);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n    font-size: var(--instui-component-text-input-font-size-sm);\n  }\n\n  &.-size-md {\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &.-size-lg {\n    block-size: var(--instui-component-text-input-height-lg);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n    font-size: var(--instui-component-text-input-font-size-lg);\n  }\n\n  &.-should-not-wrap {\n    flex-wrap: nowrap;\n  }\n}\n",
+	"canvas": "/**\n * @component input-group\n * @summary A facade around a text input with leading and trailing icon slots.\n * @remarks Wraps the same field chrome as `text-input` with icon slots either side of it; `-should-not-wrap` is only needed when the group's contents would otherwise overflow onto a second line.\n * @selector .pfx-input-group\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @modifier -should-not-wrap — Keep the group on one line (no wrapping).\n * @part .before — The leading content slot.\n * @part .after — The trailing content slot.\n * @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.\n * @cssstate disabled\n * @example\n * <span class=\"pfx-input-group\">\n *   <span class=\"before\">@</span>\n *   <input type=\"text\" placeholder=\"username\">\n * </span>\n * @related text-input — Wraps a text input, adding leading and trailing icon slots.\n */\n@scope (.pfx-input-group) {\n  & {\n    display: flex;\n    align-items: center;\n    inline-size: 100%;\n    box-sizing: border-box;\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    gap: var(--instui-component-text-input-gap-content);\n    background-color: var(--instui-component-text-input-background-color);\n    border: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-component-text-input-border-radius);\n    color: var(--instui-component-text-input-text-color);\n    font-family: var(--instui-component-text-input-font-family);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &:hover {\n    background-color: var(--instui-component-text-input-background-hover-color);\n    border-color: var(--instui-component-text-input-border-hover-color);\n  }\n\n  /* The inner control is chromeless — the facade provides border/bg/ring. */\n  & > input,\n  & .pfx-text-input {\n    flex: 1;\n    min-inline-size: 0;\n    border: 0;\n    padding: 0;\n    background: transparent;\n    block-size: auto;\n    font: inherit;\n    color: inherit;\n    outline: none;\n  }\n\n  & > input::placeholder {\n    color: var(--instui-component-text-input-placeholder-color);\n  }\n\n  /* Leading/trailing content slots (icons ride the -icon-* glyph painter). */\n  & .before,\n  & .after {\n    display: inline-flex;\n    align-items: center;\n    flex: none;\n    color: var(--instui-component-text-input-text-color);\n  }\n\n  &.-disabled,\n  &:has(> input:disabled) {\n    background-color: var(--instui-component-text-input-background-disabled-color);\n    border-color: var(--instui-component-text-input-border-disabled-color);\n    color: var(--instui-component-text-input-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-readonly {\n    background-color: var(--instui-component-text-input-background-readonly-color);\n    border-color: var(--instui-component-text-input-border-readonly-color);\n    color: var(--instui-component-text-input-text-readonly-color);\n  }\n\n  &.-invalid {\n    border-color: var(--instui-component-text-input-error-border-color);\n  }\n\n  &.-success {\n    border-color: var(--instui-component-text-input-success-border-color);\n  }\n\n  /* Focus ring lives on the facade (the input has no chrome). */\n  &:has(: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    border-radius: var(--instui-focus-outline-radius);\n  }\n\n  &:is(.-invalid, :has(> input:user-invalid)):has(:focus-visible) {\n    outline-color: var(--instui-focus-outline-color-danger);\n  }\n\n  &.-success:has(:focus-visible) {\n    outline-color: var(--instui-focus-outline-color-success);\n  }\n\n  &.-size-sm {\n    block-size: var(--instui-component-text-input-height-sm);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n    font-size: var(--instui-component-text-input-font-size-sm);\n  }\n\n  &.-size-md {\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &.-size-lg {\n    block-size: var(--instui-component-text-input-height-lg);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n    font-size: var(--instui-component-text-input-font-size-lg);\n  }\n\n  &.-should-not-wrap {\n    flex-wrap: nowrap;\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component input-group\n * @summary A facade around a text input with leading and trailing icon slots.\n * @remarks Wraps the same field chrome as `text-input` with icon slots either side of it; `-should-not-wrap` is only needed when the group's contents would otherwise overflow onto a second line.\n * @selector .pfx-input-group\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @modifier -should-not-wrap — Keep the group on one line (no wrapping).\n * @part .before — The leading content slot.\n * @part .after — The trailing content slot.\n * @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.\n * @cssstate disabled\n * @example\n * <span class=\"pfx-input-group\">\n *   <span class=\"before\">@</span>\n *   <input type=\"text\" placeholder=\"username\">\n * </span>\n * @related text-input — Wraps a text input, adding leading and trailing icon slots.\n */\n@scope (.pfx-input-group) {\n  & {\n    display: flex;\n    align-items: center;\n    inline-size: 100%;\n    box-sizing: border-box;\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    gap: var(--instui-component-text-input-gap-content);\n    background-color: var(--instui-component-text-input-background-color);\n    border: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-component-text-input-border-radius);\n    color: var(--instui-component-text-input-text-color);\n    font-family: var(--instui-component-text-input-font-family);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &:hover {\n    background-color: var(--instui-component-text-input-background-hover-color);\n    border-color: var(--instui-component-text-input-border-hover-color);\n  }\n\n  /* The inner control is chromeless — the facade provides border/bg/ring. */\n  & > input,\n  & .pfx-text-input {\n    flex: 1;\n    min-inline-size: 0;\n    border: 0;\n    padding: 0;\n    background: transparent;\n    block-size: auto;\n    font: inherit;\n    color: inherit;\n    outline: none;\n  }\n\n  & > input::placeholder {\n    color: var(--instui-component-text-input-placeholder-color);\n  }\n\n  /* Leading/trailing content slots (icons ride the -icon-* glyph painter). */\n  & .before,\n  & .after {\n    display: inline-flex;\n    align-items: center;\n    flex: none;\n    color: var(--instui-component-text-input-text-color);\n  }\n\n  &.-disabled,\n  &:has(> input:disabled) {\n    background-color: var(--instui-component-text-input-background-disabled-color);\n    border-color: var(--instui-component-text-input-border-disabled-color);\n    color: var(--instui-component-text-input-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-readonly {\n    background-color: var(--instui-component-text-input-background-readonly-color);\n    border-color: var(--instui-component-text-input-border-readonly-color);\n    color: var(--instui-component-text-input-text-readonly-color);\n  }\n\n  &.-invalid {\n    border-color: var(--instui-component-text-input-error-border-color);\n  }\n\n  &.-success {\n    border-color: var(--instui-component-text-input-success-border-color);\n  }\n\n  /* Focus ring lives on the facade (the input has no chrome). */\n  &:has(: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    border-radius: var(--instui-focus-outline-radius);\n  }\n\n  &:is(.-invalid, :has(> input:user-invalid)):has(:focus-visible) {\n    outline-color: var(--instui-focus-outline-color-danger);\n  }\n\n  &.-success:has(:focus-visible) {\n    outline-color: var(--instui-focus-outline-color-success);\n  }\n\n  &.-size-sm {\n    block-size: var(--instui-component-text-input-height-sm);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n    font-size: var(--instui-component-text-input-font-size-sm);\n  }\n\n  &.-size-md {\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &.-size-lg {\n    block-size: var(--instui-component-text-input-height-lg);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n    font-size: var(--instui-component-text-input-font-size-lg);\n  }\n\n  &.-should-not-wrap {\n    flex-wrap: nowrap;\n  }\n}\n"
 }.rebrand;
 const link$1 = {
 	"rebrand": "/**\n * @component link\n * @selector .pfx-link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @remarks Sets its own responsive `gap` between an icon and its text (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\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; also its small-screen fallback (pair with the `responsive` utility to swap Breadcrumb for a Link below ~768px).\n */\n@scope (.pfx-link) {\n  & {\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\n  &:hover {\n    color: var(--instui-component-link-text-hover-color);\n  }\n\n  &[aria-disabled=\"true\"] {\n    color: var(--instui-component-link-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-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\n  &.-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}\n\n.pfx-link.-color-inverse {\n  color: var(--instui-component-link-on-color-text-color);\n}\n\n.pfx-link.-color-inverse:hover {\n  color: var(--instui-component-link-on-color-text-hover-color);\n}\n\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-on-color-text-disabled-color);\n}\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\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\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\n.pfx-link.-unstyled {\n  color: var(--instui-component-link-unstyled-text-color);\n  text-decoration: none;\n}\n",
@@ -462,6 +485,11 @@ const modalHeader$1 = {
 	"canvas": "/**\n * @component modal.header\n * @memberOf modal\n * @selector .header\n * @summary The title row (InstUI `Modal.Header`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n *   .header {\n *     strong {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope {\n    > .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\n    &.-density-compact > .header {\n      padding: var(--instui-component-modal-header-padding-compact);\n    }\n\n    &.-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  }\n}\n",
 	"canvasHighContrast": "/**\n * @component modal.header\n * @memberOf modal\n * @selector .header\n * @summary The title row (InstUI `Modal.Header`).\n * @remarks The parent `modal`'s `-density-compact` and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n *   .header {\n *     strong {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope {\n    > .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\n    &.-density-compact > .header {\n      padding: var(--instui-component-modal-header-padding-compact);\n    }\n\n    &.-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  }\n}\n"
 }.rebrand;
+const numberInput$1 = {
+	"rebrand": "/**\n * @component number-input\n * @summary A number-input facade with a +/- spinner column.\n * @remarks The `.arrows` buttons are `aria-hidden` and purely presentational — incrementing/decrementing the value on click is the consumer's JS to wire up.\n * @selector .pfx-number-input\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @part .arrows — The +/- spinner column at the inline-end.\n * @part .down — The decrement button; the unclassed button increments.\n * @pseudo ::before — The masked chevron glyph on each spinner button: up to increment, down on `.down`.\n * @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.\n * @cssstate disabled\n * @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\"`.\n * @example\n * <span class=\"pfx-number-input\">\n *   <input id=\"qty\" type=\"number\" value=\"1\" aria-label=\"Quantity\">\n *   <span class=\"arrows\">\n *     <button type=\"button\" id=\"up\" aria-hidden=\"true\"></button>\n *     <button class=\"down\" type=\"button\" id=\"down\" aria-hidden=\"true\"></button>\n *   </span>\n * </span>\n * @structure\n * .pfx-number-input {\n *   input {}\n *   .arrows {\n *     button {}\n *     .down {}\n *   }\n * }\n * @related text-input — Shares the same input facade chrome.\n * @related range-input — Another numeric input control.\n */\n@scope (.pfx-number-input) {\n  & {\n    display: flex;\n    align-items: center;\n    inline-size: 100%;\n    box-sizing: border-box;\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    gap: var(--instui-component-text-input-gap-content);\n    background-color: var(--instui-component-text-input-background-color);\n    border: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-component-text-input-border-radius);\n    color: var(--instui-component-text-input-text-color);\n    font-family: var(--instui-component-text-input-font-family);\n    font-size: var(--instui-component-text-input-font-size-md);\n    /* the arrow column sits flush at the inline-end; drop the facade's end padding, and clip the column\n     to the facade's radius so it doesn't overhang the rounded corners (Firefox especially). The focus\n     ring is an outline, so overflow:hidden doesn't clip it. */\n    padding-inline-end: 0;\n    overflow: hidden;\n  }\n\n  &:hover {\n    background-color: var(--instui-component-text-input-background-hover-color);\n    border-color: var(--instui-component-text-input-border-hover-color);\n  }\n\n  /* The inner control is chromeless — the facade provides border/bg/ring. */\n  & > input,\n  & .pfx-text-input {\n    flex: 1;\n    min-inline-size: 0;\n    border: 0;\n    padding: 0;\n    background: transparent;\n    block-size: auto;\n    font: inherit;\n    color: inherit;\n    outline: none;\n  }\n\n  & > input::placeholder {\n    color: var(--instui-component-text-input-placeholder-color);\n  }\n\n  /* native UA spinners off — we supply our own */\n  & > input::-webkit-outer-spin-button,\n  & > input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  & > input[type=\"number\"] {\n    -moz-appearance: textfield;\n    appearance: textfield;\n  }\n\n  &.-disabled,\n  &:has(> input:disabled) {\n    background-color: var(--instui-component-text-input-background-disabled-color);\n    border-color: var(--instui-component-text-input-border-disabled-color);\n    color: var(--instui-component-text-input-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-readonly {\n    background-color: var(--instui-component-text-input-background-readonly-color);\n    border-color: var(--instui-component-text-input-border-readonly-color);\n    color: var(--instui-component-text-input-text-readonly-color);\n  }\n\n  &.-invalid {\n    border-color: var(--instui-component-text-input-error-border-color);\n  }\n\n  &.-success {\n    border-color: var(--instui-component-text-input-success-border-color);\n  }\n\n  /* Focus ring lives on the facade (the input has no chrome). */\n  &:has(: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    border-radius: var(--instui-focus-outline-radius);\n  }\n\n  &:is(.-invalid, :has(> input:user-invalid)):has(:focus-visible) {\n    outline-color: var(--instui-focus-outline-color-danger);\n  }\n\n  &.-success:has(:focus-visible) {\n    outline-color: var(--instui-focus-outline-color-success);\n  }\n\n  &.-size-sm {\n    block-size: var(--instui-component-text-input-height-sm);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n    font-size: var(--instui-component-text-input-font-size-sm);\n  }\n\n  &.-size-md {\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &.-size-lg {\n    block-size: var(--instui-component-text-input-height-lg);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n    font-size: var(--instui-component-text-input-font-size-lg);\n  }\n\n  & .arrows {\n    display: flex;\n    flex-direction: column;\n    flex: none;\n    align-self: stretch;\n    /* the arrows-container-width token is @property-only (value-less upstream), so a literal is used */\n    inline-size: 1.5rem;\n    border-inline-start: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n  }\n\n  & .arrows button {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: 0;\n    background: var(--instui-component-text-input-arrows-background-color);\n    color: var(--instui-color-icon-interactive-action-secondary-base);\n    cursor: pointer;\n  }\n\n  & .arrows button + button {\n    border-block-start: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n  }\n\n  & .arrows button:hover {\n    background: var(--instui-component-text-input-arrows-background-hover-color);\n  }\n\n  & .arrows button:active {\n    background: var(--instui-component-text-input-arrows-background-active-color);\n  }\n\n  & .arrows button:disabled {\n    background: var(--instui-component-text-input-arrows-background-disabled-color);\n    cursor: not-allowed;\n  }\n\n  & .arrows button::before {\n    content: \"\";\n    inline-size: 0.875em;\n    block-size: 0.875em;\n    background: currentColor;\n    -webkit-mask: var(--instui-icon-chevron-up) center / contain no-repeat;\n    mask: var(--instui-icon-chevron-up) center / contain no-repeat;\n  }\n\n  & .arrows button.down::before {\n    -webkit-mask: var(--instui-icon-chevron-down) center / contain no-repeat;\n    mask: var(--instui-icon-chevron-down) center / contain no-repeat;\n  }\n}\n",
+	"canvas": "/**\n * @component number-input\n * @summary A number-input facade with a +/- spinner column.\n * @remarks The `.arrows` buttons are `aria-hidden` and purely presentational — incrementing/decrementing the value on click is the consumer's JS to wire up.\n * @selector .pfx-number-input\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @part .arrows — The +/- spinner column at the inline-end.\n * @part .down — The decrement button; the unclassed button increments.\n * @pseudo ::before — The masked chevron glyph on each spinner button: up to increment, down on `.down`.\n * @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.\n * @cssstate disabled\n * @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\"`.\n * @example\n * <span class=\"pfx-number-input\">\n *   <input id=\"qty\" type=\"number\" value=\"1\" aria-label=\"Quantity\">\n *   <span class=\"arrows\">\n *     <button type=\"button\" id=\"up\" aria-hidden=\"true\"></button>\n *     <button class=\"down\" type=\"button\" id=\"down\" aria-hidden=\"true\"></button>\n *   </span>\n * </span>\n * @structure\n * .pfx-number-input {\n *   input {}\n *   .arrows {\n *     button {}\n *     .down {}\n *   }\n * }\n * @related text-input — Shares the same input facade chrome.\n * @related range-input — Another numeric input control.\n */\n@scope (.pfx-number-input) {\n  & {\n    display: flex;\n    align-items: center;\n    inline-size: 100%;\n    box-sizing: border-box;\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    gap: var(--instui-component-text-input-gap-content);\n    background-color: var(--instui-component-text-input-background-color);\n    border: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-component-text-input-border-radius);\n    color: var(--instui-component-text-input-text-color);\n    font-family: var(--instui-component-text-input-font-family);\n    font-size: var(--instui-component-text-input-font-size-md);\n    /* the arrow column sits flush at the inline-end; drop the facade's end padding, and clip the column\n     to the facade's radius so it doesn't overhang the rounded corners (Firefox especially). The focus\n     ring is an outline, so overflow:hidden doesn't clip it. */\n    padding-inline-end: 0;\n    overflow: hidden;\n  }\n\n  &:hover {\n    background-color: var(--instui-component-text-input-background-hover-color);\n    border-color: var(--instui-component-text-input-border-hover-color);\n  }\n\n  /* The inner control is chromeless — the facade provides border/bg/ring. */\n  & > input,\n  & .pfx-text-input {\n    flex: 1;\n    min-inline-size: 0;\n    border: 0;\n    padding: 0;\n    background: transparent;\n    block-size: auto;\n    font: inherit;\n    color: inherit;\n    outline: none;\n  }\n\n  & > input::placeholder {\n    color: var(--instui-component-text-input-placeholder-color);\n  }\n\n  /* native UA spinners off — we supply our own */\n  & > input::-webkit-outer-spin-button,\n  & > input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  & > input[type=\"number\"] {\n    -moz-appearance: textfield;\n    appearance: textfield;\n  }\n\n  &.-disabled,\n  &:has(> input:disabled) {\n    background-color: var(--instui-component-text-input-background-disabled-color);\n    border-color: var(--instui-component-text-input-border-disabled-color);\n    color: var(--instui-component-text-input-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-readonly {\n    background-color: var(--instui-component-text-input-background-readonly-color);\n    border-color: var(--instui-component-text-input-border-readonly-color);\n    color: var(--instui-component-text-input-text-readonly-color);\n  }\n\n  &.-invalid {\n    border-color: var(--instui-component-text-input-error-border-color);\n  }\n\n  &.-success {\n    border-color: var(--instui-component-text-input-success-border-color);\n  }\n\n  /* Focus ring lives on the facade (the input has no chrome). */\n  &:has(: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    border-radius: var(--instui-focus-outline-radius);\n  }\n\n  &:is(.-invalid, :has(> input:user-invalid)):has(:focus-visible) {\n    outline-color: var(--instui-focus-outline-color-danger);\n  }\n\n  &.-success:has(:focus-visible) {\n    outline-color: var(--instui-focus-outline-color-success);\n  }\n\n  &.-size-sm {\n    block-size: var(--instui-component-text-input-height-sm);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n    font-size: var(--instui-component-text-input-font-size-sm);\n  }\n\n  &.-size-md {\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &.-size-lg {\n    block-size: var(--instui-component-text-input-height-lg);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n    font-size: var(--instui-component-text-input-font-size-lg);\n  }\n\n  & .arrows {\n    display: flex;\n    flex-direction: column;\n    flex: none;\n    align-self: stretch;\n    /* the arrows-container-width token is @property-only (value-less upstream), so a literal is used */\n    inline-size: 1.5rem;\n    border-inline-start: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n  }\n\n  & .arrows button {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: 0;\n    background: var(--instui-component-text-input-arrows-background-color);\n    color: var(--instui-color-icon-interactive-action-secondary-base);\n    cursor: pointer;\n  }\n\n  & .arrows button + button {\n    border-block-start: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n  }\n\n  & .arrows button:hover {\n    background: var(--instui-component-text-input-arrows-background-hover-color);\n  }\n\n  & .arrows button:active {\n    background: var(--instui-component-text-input-arrows-background-active-color);\n  }\n\n  & .arrows button:disabled {\n    background: var(--instui-component-text-input-arrows-background-disabled-color);\n    cursor: not-allowed;\n  }\n\n  & .arrows button::before {\n    content: \"\";\n    inline-size: 0.875em;\n    block-size: 0.875em;\n    background: currentColor;\n    -webkit-mask: var(--instui-icon-chevron-up) center / contain no-repeat;\n    mask: var(--instui-icon-chevron-up) center / contain no-repeat;\n  }\n\n  & .arrows button.down::before {\n    -webkit-mask: var(--instui-icon-chevron-down) center / contain no-repeat;\n    mask: var(--instui-icon-chevron-down) center / contain no-repeat;\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component number-input\n * @summary A number-input facade with a +/- spinner column.\n * @remarks The `.arrows` buttons are `aria-hidden` and purely presentational — incrementing/decrementing the value on click is the consumer's JS to wire up.\n * @selector .pfx-number-input\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @part .arrows — The +/- spinner column at the inline-end.\n * @part .down — The decrement button; the unclassed button increments.\n * @pseudo ::before — The masked chevron glyph on each spinner button: up to increment, down on `.down`.\n * @pseudo ::placeholder — The placeholder text of the inner input, in a muted color.\n * @cssstate disabled\n * @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\"`.\n * @example\n * <span class=\"pfx-number-input\">\n *   <input id=\"qty\" type=\"number\" value=\"1\" aria-label=\"Quantity\">\n *   <span class=\"arrows\">\n *     <button type=\"button\" id=\"up\" aria-hidden=\"true\"></button>\n *     <button class=\"down\" type=\"button\" id=\"down\" aria-hidden=\"true\"></button>\n *   </span>\n * </span>\n * @structure\n * .pfx-number-input {\n *   input {}\n *   .arrows {\n *     button {}\n *     .down {}\n *   }\n * }\n * @related text-input — Shares the same input facade chrome.\n * @related range-input — Another numeric input control.\n */\n@scope (.pfx-number-input) {\n  & {\n    display: flex;\n    align-items: center;\n    inline-size: 100%;\n    box-sizing: border-box;\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    gap: var(--instui-component-text-input-gap-content);\n    background-color: var(--instui-component-text-input-background-color);\n    border: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-component-text-input-border-radius);\n    color: var(--instui-component-text-input-text-color);\n    font-family: var(--instui-component-text-input-font-family);\n    font-size: var(--instui-component-text-input-font-size-md);\n    /* the arrow column sits flush at the inline-end; drop the facade's end padding, and clip the column\n     to the facade's radius so it doesn't overhang the rounded corners (Firefox especially). The focus\n     ring is an outline, so overflow:hidden doesn't clip it. */\n    padding-inline-end: 0;\n    overflow: hidden;\n  }\n\n  &:hover {\n    background-color: var(--instui-component-text-input-background-hover-color);\n    border-color: var(--instui-component-text-input-border-hover-color);\n  }\n\n  /* The inner control is chromeless — the facade provides border/bg/ring. */\n  & > input,\n  & .pfx-text-input {\n    flex: 1;\n    min-inline-size: 0;\n    border: 0;\n    padding: 0;\n    background: transparent;\n    block-size: auto;\n    font: inherit;\n    color: inherit;\n    outline: none;\n  }\n\n  & > input::placeholder {\n    color: var(--instui-component-text-input-placeholder-color);\n  }\n\n  /* native UA spinners off — we supply our own */\n  & > input::-webkit-outer-spin-button,\n  & > input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  & > input[type=\"number\"] {\n    -moz-appearance: textfield;\n    appearance: textfield;\n  }\n\n  &.-disabled,\n  &:has(> input:disabled) {\n    background-color: var(--instui-component-text-input-background-disabled-color);\n    border-color: var(--instui-component-text-input-border-disabled-color);\n    color: var(--instui-component-text-input-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-readonly {\n    background-color: var(--instui-component-text-input-background-readonly-color);\n    border-color: var(--instui-component-text-input-border-readonly-color);\n    color: var(--instui-component-text-input-text-readonly-color);\n  }\n\n  &.-invalid {\n    border-color: var(--instui-component-text-input-error-border-color);\n  }\n\n  &.-success {\n    border-color: var(--instui-component-text-input-success-border-color);\n  }\n\n  /* Focus ring lives on the facade (the input has no chrome). */\n  &:has(: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    border-radius: var(--instui-focus-outline-radius);\n  }\n\n  &:is(.-invalid, :has(> input:user-invalid)):has(:focus-visible) {\n    outline-color: var(--instui-focus-outline-color-danger);\n  }\n\n  &.-success:has(:focus-visible) {\n    outline-color: var(--instui-focus-outline-color-success);\n  }\n\n  &.-size-sm {\n    block-size: var(--instui-component-text-input-height-sm);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n    font-size: var(--instui-component-text-input-font-size-sm);\n  }\n\n  &.-size-md {\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &.-size-lg {\n    block-size: var(--instui-component-text-input-height-lg);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n    font-size: var(--instui-component-text-input-font-size-lg);\n  }\n\n  & .arrows {\n    display: flex;\n    flex-direction: column;\n    flex: none;\n    align-self: stretch;\n    /* the arrows-container-width token is @property-only (value-less upstream), so a literal is used */\n    inline-size: 1.5rem;\n    border-inline-start: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n  }\n\n  & .arrows button {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: 0;\n    background: var(--instui-component-text-input-arrows-background-color);\n    color: var(--instui-color-icon-interactive-action-secondary-base);\n    cursor: pointer;\n  }\n\n  & .arrows button + button {\n    border-block-start: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n  }\n\n  & .arrows button:hover {\n    background: var(--instui-component-text-input-arrows-background-hover-color);\n  }\n\n  & .arrows button:active {\n    background: var(--instui-component-text-input-arrows-background-active-color);\n  }\n\n  & .arrows button:disabled {\n    background: var(--instui-component-text-input-arrows-background-disabled-color);\n    cursor: not-allowed;\n  }\n\n  & .arrows button::before {\n    content: \"\";\n    inline-size: 0.875em;\n    block-size: 0.875em;\n    background: currentColor;\n    -webkit-mask: var(--instui-icon-chevron-up) center / contain no-repeat;\n    mask: var(--instui-icon-chevron-up) center / contain no-repeat;\n  }\n\n  & .arrows button.down::before {\n    -webkit-mask: var(--instui-icon-chevron-down) center / contain no-repeat;\n    mask: var(--instui-icon-chevron-down) center / contain no-repeat;\n  }\n}\n"
+}.rebrand;
 const pagination$1 = {
 	"rebrand": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @remarks Sets its own `gap` between page controls; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\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 * @remarks See the `pagination.page` member for the individual page controls.\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 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:many {}\n *   .ellipsis:optional {}\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  :scope {\n    /* A nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n    > .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    > .arrow [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .arrow:hover {\n      background: var(--instui-color-background-muted);\n      color: var(--instui-color-text-interactive-navigation-primary-hover);\n    }\n\n    /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n    > .arrow:disabled,\n    > .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    > .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    > .page-input-label {\n      color: var(--instui-component-pagination-page-input-label-color);\n    }\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",
 	"canvas": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @remarks Sets its own `gap` between page controls; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\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 * @remarks See the `pagination.page` member for the individual page controls.\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 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:many {}\n *   .ellipsis:optional {}\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  :scope {\n    /* A nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n    > .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    > .arrow [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .arrow:hover {\n      background: var(--instui-color-background-muted);\n      color: var(--instui-color-text-interactive-navigation-primary-hover);\n    }\n\n    /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n    > .arrow:disabled,\n    > .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    > .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    > .page-input-label {\n      color: var(--instui-component-pagination-page-input-label-color);\n    }\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",
@@ -473,14 +501,14 @@ const paginationPage$1 = {
 	"canvasHighContrast": "/**\n * @component pagination.page\n * @memberOf pagination\n * @selector .page\n * @summary A page link or button (InstUI `Pagination.Page`); the current page carries `[aria-current]`.\n * @modifier -current — The current page; same styling as `[aria-current]`.\n * @cssstate current\n * @structure\n * @component pagination {\n *   .page {}\n * }\n */\n@scope (.pfx-pagination) {\n  :scope {\n    /* A page number — an <a> or <button>. Text-style primary button: brand text, no fill. */\n    > .page {\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    > .page: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    > .page[aria-current],\n    > .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    > .page[aria-current]:hover,\n    > .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}\n"
 }.rebrand;
 const pill$1 = {
-	"rebrand": "/**\n * @component pill\n * @selector .pfx-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 * ```html\n * <div class=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n *   <span class=\"instui-pill -color-success -icon-check\">Published</span>\n *   <span class=\"instui-pill\">Draft</span>\n *   <span class=\"instui-pill -color-info\">In review</span>\n *   <span class=\"instui-pill -color-warning\">Stale</span>\n *   <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n@scope (.pfx-pill) {\n  & {\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\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  &[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\n  &.-color-info {\n    color: var(--instui-component-pill-info-text-color);\n    border-color: var(--instui-component-pill-info-border-color);\n  }\n\n  &.-color-success {\n    color: var(--instui-component-pill-success-text-color);\n    border-color: var(--instui-component-pill-success-border-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-pill-warning-text-color);\n    border-color: var(--instui-component-pill-warning-border-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-pill-error-text-color);\n    border-color: var(--instui-component-pill-error-border-color);\n  }\n\n  &.-color-info,\n  &.-color-success,\n  &.-color-warning,\n  &.-color-danger {\n    font-weight: var(--instui-component-pill-status-label-font-weight);\n  }\n}\n",
-	"canvas": "/**\n * @component pill\n * @selector .pfx-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 * ```html\n * <div class=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n *   <span class=\"instui-pill -color-success -icon-check\">Published</span>\n *   <span class=\"instui-pill\">Draft</span>\n *   <span class=\"instui-pill -color-info\">In review</span>\n *   <span class=\"instui-pill -color-warning\">Stale</span>\n *   <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n@scope (.pfx-pill) {\n  & {\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\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  &[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\n  &.-color-info {\n    color: var(--instui-component-pill-info-text-color);\n    border-color: var(--instui-component-pill-info-border-color);\n  }\n\n  &.-color-success {\n    color: var(--instui-component-pill-success-text-color);\n    border-color: var(--instui-component-pill-success-border-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-pill-warning-text-color);\n    border-color: var(--instui-component-pill-warning-border-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-pill-error-text-color);\n    border-color: var(--instui-component-pill-error-border-color);\n  }\n\n  &.-color-info,\n  &.-color-success,\n  &.-color-warning,\n  &.-color-danger {\n    font-weight: var(--instui-component-pill-status-label-font-weight);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component pill\n * @selector .pfx-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 * ```html\n * <div class=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n *   <span class=\"instui-pill -color-success -icon-check\">Published</span>\n *   <span class=\"instui-pill\">Draft</span>\n *   <span class=\"instui-pill -color-info\">In review</span>\n *   <span class=\"instui-pill -color-warning\">Stale</span>\n *   <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n@scope (.pfx-pill) {\n  & {\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\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  &[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\n  &.-color-info {\n    color: var(--instui-component-pill-info-text-color);\n    border-color: var(--instui-component-pill-info-border-color);\n  }\n\n  &.-color-success {\n    color: var(--instui-component-pill-success-text-color);\n    border-color: var(--instui-component-pill-success-border-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-pill-warning-text-color);\n    border-color: var(--instui-component-pill-warning-border-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-pill-error-text-color);\n    border-color: var(--instui-component-pill-error-border-color);\n  }\n\n  &.-color-info,\n  &.-color-success,\n  &.-color-warning,\n  &.-color-danger {\n    font-weight: var(--instui-component-pill-status-label-font-weight);\n  }\n}\n"
+	"rebrand": "/**\n * @component pill\n * @selector .pfx-pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @remarks Unlike `badge`, which shows a count, or `tag`, which is removable, the pill is a static status label; its leading glyph is a masked `::before`, not an `<img>`.\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 * ```html\n * <div class=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n *   <span class=\"instui-pill -color-success -icon-check\">Published</span>\n *   <span class=\"instui-pill\">Draft</span>\n *   <span class=\"instui-pill -color-info\">In review</span>\n *   <span class=\"instui-pill -color-warning\">Stale</span>\n *   <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n@scope (.pfx-pill) {\n  & {\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\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  &[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\n  &.-color-info {\n    color: var(--instui-component-pill-info-text-color);\n    border-color: var(--instui-component-pill-info-border-color);\n  }\n\n  &.-color-success {\n    color: var(--instui-component-pill-success-text-color);\n    border-color: var(--instui-component-pill-success-border-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-pill-warning-text-color);\n    border-color: var(--instui-component-pill-warning-border-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-pill-error-text-color);\n    border-color: var(--instui-component-pill-error-border-color);\n  }\n\n  &.-color-info,\n  &.-color-success,\n  &.-color-warning,\n  &.-color-danger {\n    font-weight: var(--instui-component-pill-status-label-font-weight);\n  }\n}\n",
+	"canvas": "/**\n * @component pill\n * @selector .pfx-pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @remarks Unlike `badge`, which shows a count, or `tag`, which is removable, the pill is a static status label; its leading glyph is a masked `::before`, not an `<img>`.\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 * ```html\n * <div class=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n *   <span class=\"instui-pill -color-success -icon-check\">Published</span>\n *   <span class=\"instui-pill\">Draft</span>\n *   <span class=\"instui-pill -color-info\">In review</span>\n *   <span class=\"instui-pill -color-warning\">Stale</span>\n *   <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n@scope (.pfx-pill) {\n  & {\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\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  &[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\n  &.-color-info {\n    color: var(--instui-component-pill-info-text-color);\n    border-color: var(--instui-component-pill-info-border-color);\n  }\n\n  &.-color-success {\n    color: var(--instui-component-pill-success-text-color);\n    border-color: var(--instui-component-pill-success-border-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-pill-warning-text-color);\n    border-color: var(--instui-component-pill-warning-border-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-pill-error-text-color);\n    border-color: var(--instui-component-pill-error-border-color);\n  }\n\n  &.-color-info,\n  &.-color-success,\n  &.-color-warning,\n  &.-color-danger {\n    font-weight: var(--instui-component-pill-status-label-font-weight);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component pill\n * @selector .pfx-pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @remarks Unlike `badge`, which shows a count, or `tag`, which is removable, the pill is a static status label; its leading glyph is a masked `::before`, not an `<img>`.\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 * ```html\n * <div class=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n *   <span class=\"instui-pill -color-success -icon-check\">Published</span>\n *   <span class=\"instui-pill\">Draft</span>\n *   <span class=\"instui-pill -color-info\">In review</span>\n *   <span class=\"instui-pill -color-warning\">Stale</span>\n *   <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n@scope (.pfx-pill) {\n  & {\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\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  &[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\n  &.-color-info {\n    color: var(--instui-component-pill-info-text-color);\n    border-color: var(--instui-component-pill-info-border-color);\n  }\n\n  &.-color-success {\n    color: var(--instui-component-pill-success-text-color);\n    border-color: var(--instui-component-pill-success-border-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-pill-warning-text-color);\n    border-color: var(--instui-component-pill-warning-border-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-pill-error-text-color);\n    border-color: var(--instui-component-pill-error-border-color);\n  }\n\n  &.-color-info,\n  &.-color-success,\n  &.-color-warning,\n  &.-color-danger {\n    font-weight: var(--instui-component-pill-status-label-font-weight);\n  }\n}\n"
 }.rebrand;
 const popover$1 = {
-	"rebrand": "/**\n * @component popover\n * @selector .pfx-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@scope (.pfx-popover) {\n  & {\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\n  &[popover] {\n    margin: 0;\n  }\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] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n\n  /* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n  @supports (transition-behavior: allow-discrete) {\n    &[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\n    &[popover]:not(:popover-open) {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n\n    @starting-style {\n      &[popover]:popover-open {\n        opacity: 0;\n        transform: translateY(-0.25rem);\n      }\n    }\n  }\n}\n",
-	"canvas": "/**\n * @component popover\n * @selector .pfx-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@scope (.pfx-popover) {\n  & {\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\n  &[popover] {\n    margin: 0;\n  }\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] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n\n  /* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n  @supports (transition-behavior: allow-discrete) {\n    &[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\n    &[popover]:not(:popover-open) {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n\n    @starting-style {\n      &[popover]:popover-open {\n        opacity: 0;\n        transform: translateY(-0.25rem);\n      }\n    }\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component popover\n * @selector .pfx-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@scope (.pfx-popover) {\n  & {\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\n  &[popover] {\n    margin: 0;\n  }\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] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n\n  /* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n  @supports (transition-behavior: allow-discrete) {\n    &[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\n    &[popover]:not(:popover-open) {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n\n    @starting-style {\n      &[popover]:popover-open {\n        opacity: 0;\n        transform: translateY(-0.25rem);\n      }\n    }\n  }\n}\n"
+	"rebrand": "/**\n * @component popover\n * @selector .pfx-popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @remarks Anchor positioning is Chromium-only; the `@supports` guard means `-placement-*` is silently inert elsewhere and the UA centers the popover in the top layer instead of failing.\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@scope (.pfx-popover) {\n  & {\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\n  &[popover] {\n    margin: 0;\n  }\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] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n\n  /* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n  @supports (transition-behavior: allow-discrete) {\n    &[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\n    &[popover]:not(:popover-open) {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n\n    @starting-style {\n      &[popover]:popover-open {\n        opacity: 0;\n        transform: translateY(-0.25rem);\n      }\n    }\n  }\n}\n",
+	"canvas": "/**\n * @component popover\n * @selector .pfx-popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @remarks Anchor positioning is Chromium-only; the `@supports` guard means `-placement-*` is silently inert elsewhere and the UA centers the popover in the top layer instead of failing.\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@scope (.pfx-popover) {\n  & {\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\n  &[popover] {\n    margin: 0;\n  }\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] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n\n  /* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n  @supports (transition-behavior: allow-discrete) {\n    &[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\n    &[popover]:not(:popover-open) {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n\n    @starting-style {\n      &[popover]:popover-open {\n        opacity: 0;\n        transform: translateY(-0.25rem);\n      }\n    }\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component popover\n * @selector .pfx-popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @remarks Anchor positioning is Chromium-only; the `@supports` guard means `-placement-*` is silently inert elsewhere and the UA centers the popover in the top layer instead of failing.\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@scope (.pfx-popover) {\n  & {\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\n  &[popover] {\n    margin: 0;\n  }\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] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n\n  /* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n  @supports (transition-behavior: allow-discrete) {\n    &[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\n    &[popover]:not(:popover-open) {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n\n    @starting-style {\n      &[popover]:popover-open {\n        opacity: 0;\n        transform: translateY(-0.25rem);\n      }\n    }\n  }\n}\n"
 }.rebrand;
 const progress$1 = {
 	"rebrand": "/**\n * @component progress\n * @selector .pfx-progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks `.value` is a sibling of `.bar`, both children of the root — mirroring how progress-circle nests its own `.value` part. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), animating `.bar` as a sliding segment and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\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-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate meter changes over half a second.\n * @modifier -render-value-inside — Renders `.value` inside the track, aligned to its start, instead of beside it; style it for legibility over the meter colour.\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 * @part .value — The value text beside the 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 * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; animates `.bar` as a sliding segment and hides `.value`.\n * @cssproperty --value <number> — The current progress value.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @accessibility Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * ### Nested label\n * ```html\n * <label>\n *   Uploading Document: <progress class=\"pfx-progress -color-brand\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"storage-used\">Storage used</label>\n * <meter id=\"storage-used\" class=\"pfx-progress -color-warning\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n *   label {\n *     .pfx-progress {\n *       .bar {}\n *       .value {}\n *     }\n *   }\n * }\n * @variant external-label {\n *   label {}\n *   .pfx-progress {\n *     .bar {}\n *     .value {}\n *   }\n * }\n * @related progress-circle — The circular form of the same determinate progress.\n * @stable\n * @sealed\n */\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n   --value) reads as loading rather than rendering a broken 0%-width bar. */\n@keyframes pantoken-progress-indeterminate {\n  0% {\n    left: -40%;\n  }\n\n  100% {\n    left: 100%;\n  }\n}\n\n@scope (.pfx-progress) {\n  & {\n    --value: var(--value-now);\n    --min: 0;\n    --max: var(--value-max);\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\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  &::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\n  &.-size-xs {\n    height: var(--instui-component-progress-bar-x-small-height);\n  }\n\n  &.-size-sm {\n    height: var(--instui-component-progress-bar-small-height);\n  }\n\n  &.-size-md {\n    height: var(--instui-component-progress-bar-medium-height);\n  }\n\n  &.-size-lg {\n    height: var(--instui-component-progress-bar-large-height);\n  }\n\n  & > .bar {\n    height: 100%;\n    width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);\n    background: var(--instui-color-background-brand);\n    border-radius: var(--instui-component-progress-bar-border-radius);\n  }\n\n  & > .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\n  &.-color-inverse > .value,\n  & > .value.-color-inverse {\n    color: var(--instui-component-progress-bar-text-color-inverse);\n  }\n\n  /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n  &:indeterminate > .bar {\n    position: absolute;\n    width: 40%;\n    animation: pantoken-progress-indeterminate 1.4s ease-in-out infinite;\n  }\n\n  &:indeterminate > .value {\n    visibility: hidden;\n  }\n\n  /* Color modifiers paired with deprecated meter-color aliases via :is(). */\n  &:is(.-color-brand, .-meter-color-brand) > .bar {\n    background: var(--instui-color-background-brand);\n  }\n\n  &:is(.-color-info, .-meter-color-info) > .bar {\n    background: var(--instui-color-background-info);\n  }\n\n  &:is(.-color-success, .-meter-color-success) > .bar {\n    background: var(--instui-color-background-success);\n  }\n\n  &:is(.-color-warning, .-meter-color-warning, .-meter-color-alert) > .bar {\n    background: var(--instui-color-background-warning);\n  }\n\n  &:is(.-color-danger, .-meter-color-danger) > .bar {\n    background: var(--instui-color-background-error);\n  }\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  &.-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\n  &.-color-primary-inverse::after {\n    background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n  }\n\n  &.-color-primary-inverse > .bar {\n    background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n  }\n\n  &.-render-value-inside > .value {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n\n  /* Mount/value transition — the interactions layer toggles `-should-animate` on value changes. */\n  &.-should-animate > .bar {\n    transition: all 0.5s;\n  }\n}\n",
@@ -503,9 +531,9 @@ const radioInputGroup$1 = {
 	"canvasHighContrast": "/**\n * @component radio-input-group\n * @selector .pfx-radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @remarks Sets its own `gap` between radios; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\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  * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\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 * ```\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@scope (.pfx-radio-input-group) {\n  & {\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\n  & > 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\n  &.-required > legend::after {\n    content: \"*\";\n    margin-inline-start: 0.25rem;\n    color: var(--instui-component-form-field-layout-asterisk-color);\n  }\n\n  /* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n  &.-layout-columns,\n  &.-layout-inline {\n    flex-flow: row wrap;\n    align-items: center;\n    column-gap: var(--instui-spacing-space-md);\n  }\n\n  &.-layout-columns > legend,\n  &.-layout-inline > legend {\n    flex-basis: 100%;\n  }\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  &.-variant-toggle {\n    flex-flow: row wrap;\n    align-items: center;\n    gap: 0;\n  }\n\n  &.-variant-toggle > legend {\n    flex-basis: 100%;\n  }\n\n  &.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n    z-index: 1;\n  }\n}\n"
 }.rebrand;
 const rangeInput$1 = {
-	"rebrand": "/**\n * @component range-input\n * @selector .pfx-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@scope (.pfx-range-input) {\n  & {\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\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-thumb {\n    border-radius: 50%;\n    cursor: pointer;\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    background: var(--instui-component-range-input-handle-background);\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &: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\n  &: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\n  .pfx-range-input-value {\n    & {\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\n    &::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\n    &.-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\n    &.-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  }\n}\n",
-	"canvas": "/**\n * @component range-input\n * @selector .pfx-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@scope (.pfx-range-input) {\n  & {\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\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-thumb {\n    border-radius: 50%;\n    cursor: pointer;\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    background: var(--instui-component-range-input-handle-background);\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &: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\n  &: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\n  .pfx-range-input-value {\n    & {\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\n    &::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\n    &.-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\n    &.-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  }\n}\n",
-	"canvasHighContrast": "/**\n * @component range-input\n * @selector .pfx-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@scope (.pfx-range-input) {\n  & {\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\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-thumb {\n    border-radius: 50%;\n    cursor: pointer;\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    background: var(--instui-component-range-input-handle-background);\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &: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\n  &: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\n  .pfx-range-input-value {\n    & {\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\n    &::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\n    &.-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\n    &.-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  }\n}\n"
+	"rebrand": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @remarks Each vendor thumb/track pseudo-element needs its own separate rule — grouping them in one selector list would invalidate the whole rule in browsers that don't recognize the other vendor's pseudo.\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@scope (.pfx-range-input) {\n  & {\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\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-thumb {\n    border-radius: 50%;\n    cursor: pointer;\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    background: var(--instui-component-range-input-handle-background);\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &: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\n  &: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\n  .pfx-range-input-value {\n    & {\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\n    &::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\n    &.-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\n    &.-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  }\n}\n",
+	"canvas": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @remarks Each vendor thumb/track pseudo-element needs its own separate rule — grouping them in one selector list would invalidate the whole rule in browsers that don't recognize the other vendor's pseudo.\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@scope (.pfx-range-input) {\n  & {\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\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-thumb {\n    border-radius: 50%;\n    cursor: pointer;\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    background: var(--instui-component-range-input-handle-background);\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &: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\n  &: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\n  .pfx-range-input-value {\n    & {\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\n    &::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\n    &.-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\n    &.-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  }\n}\n",
+	"canvasHighContrast": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @remarks Each vendor thumb/track pseudo-element needs its own separate rule — grouping them in one selector list would invalidate the whole rule in browsers that don't recognize the other vendor's pseudo.\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@scope (.pfx-range-input) {\n  & {\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\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-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\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-thumb {\n    border-radius: 50%;\n    cursor: pointer;\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    background: var(--instui-component-range-input-handle-background);\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &: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\n  &: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\n  .pfx-range-input-value {\n    & {\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\n    &::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\n    &.-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\n    &.-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  }\n}\n"
 }.rebrand;
 const rating$1 = {
 	"rebrand": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @remarks Sets its own `gap` between star glyphs; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\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  :scope {\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    > .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}\n",
@@ -527,10 +555,15 @@ const sideNavBarItem$1 = {
 	"canvas": "/**\n * @component side-nav-bar.item\n * @memberOf side-nav-bar\n * @selector .item\n * @summary A navigation entry (InstUI `SideNavBar.Item`); `-selected` marks the active one.\n * @modifier -selected — The active nav item.\n * @part .label — The item's text label; hidden when the rail is minimized.\n * @remarks The parent `side-nav-bar`'s `-minimized` modifier hides this member's `.label` — see `side-nav-bar`'s own doc for that modifier.\n * @structure\n * @component side-nav-bar {\n *   .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n@scope (.pfx-side-nav-bar) {\n  :scope {\n    > .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    > .item [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .item:hover {\n      background: var(--instui-component-side-nav-bar-item-hover-background-color);\n    }\n\n    > .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",
 	"canvasHighContrast": "/**\n * @component side-nav-bar.item\n * @memberOf side-nav-bar\n * @selector .item\n * @summary A navigation entry (InstUI `SideNavBar.Item`); `-selected` marks the active one.\n * @modifier -selected — The active nav item.\n * @part .label — The item's text label; hidden when the rail is minimized.\n * @remarks The parent `side-nav-bar`'s `-minimized` modifier hides this member's `.label` — see `side-nav-bar`'s own doc for that modifier.\n * @structure\n * @component side-nav-bar {\n *   .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n@scope (.pfx-side-nav-bar) {\n  :scope {\n    > .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    > .item [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .item:hover {\n      background: var(--instui-component-side-nav-bar-item-hover-background-color);\n    }\n\n    > .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"
 }.rebrand;
+const simpleSelect$1 = {
+	"rebrand": "/**\n * @component simple-select\n * @summary A styled native `<select>` with a caret, matching the text-input states and sizes.\n * @remarks Wraps a plain native `<select>` with no custom dropdown/menu markup, so browser-native option rendering and keyboard behavior apply as-is; it shares its field chrome with `text-input`.\n * @selector .pfx-simple-select\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * <select class=\"pfx-simple-select\">\n *   <option>Choose a fruit…</option>\n *   <option>Apple</option>\n *   <option>Orange</option>\n *   <option>Pear</option>\n * </select>\n * @structure\n * .pfx-simple-select {\n *   option {}\n * }\n * @related text-input — Shares the same field chrome, states, and sizes.\n * @related menu — The dropdown surface a richer select reuses.\n */\n@scope (.pfx-simple-select) {\n  & {\n    display: block;\n    inline-size: 100%;\n    box-sizing: border-box;\n    font-family: var(--instui-component-text-input-font-family);\n    font-weight: var(--instui-component-text-input-font-weight);\n    color: var(--instui-component-text-input-text-color);\n    background-color: var(--instui-component-text-input-background-color);\n    border: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-component-text-input-border-radius);\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-md) + 1.5rem);\n    font-size: var(--instui-component-text-input-font-size-md);\n    appearance: none;\n    -webkit-appearance: none;\n    background-image: 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\");\n    background-repeat: no-repeat;\n    background-position: right var(--instui-component-text-input-padding-horizontal-md) center;\n    background-size: 1em;\n  }\n\n  &::placeholder {\n    color: var(--instui-component-text-input-placeholder-color);\n  }\n\n  &:hover {\n    background-color: var(--instui-component-text-input-background-hover-color);\n    border-color: var(--instui-component-text-input-border-hover-color);\n  }\n\n  &:hover::placeholder {\n    color: var(--instui-component-text-input-placeholder-hover-color);\n  }\n\n  &:disabled,\n  &.-disabled {\n    background-color: var(--instui-component-text-input-background-disabled-color);\n    border-color: var(--instui-component-text-input-border-disabled-color);\n    color: var(--instui-component-text-input-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-readonly {\n    background-color: var(--instui-component-text-input-background-readonly-color);\n    border-color: var(--instui-component-text-input-border-readonly-color);\n    color: var(--instui-component-text-input-text-readonly-color);\n  }\n\n  &.-invalid {\n    border-color: var(--instui-component-text-input-error-border-color);\n  }\n\n  &.-success {\n    border-color: var(--instui-component-text-input-success-border-color);\n  }\n\n  /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n   the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n  &:is(.-invalid, :user-invalid):focus-visible {\n    outline-color: var(--instui-focus-outline-color-danger);\n  }\n\n  &.-success:focus-visible {\n    outline-color: var(--instui-focus-outline-color-success);\n  }\n\n  &.-size-sm {\n    block-size: var(--instui-component-text-input-height-sm);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n    padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-sm) + 1.5rem);\n    font-size: var(--instui-component-text-input-font-size-sm);\n  }\n\n  &.-size-md {\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-md) + 1.5rem);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &.-size-lg {\n    block-size: var(--instui-component-text-input-height-lg);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n    padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-lg) + 1.5rem);\n    font-size: var(--instui-component-text-input-font-size-lg);\n  }\n}\n",
+	"canvas": "/**\n * @component simple-select\n * @summary A styled native `<select>` with a caret, matching the text-input states and sizes.\n * @remarks Wraps a plain native `<select>` with no custom dropdown/menu markup, so browser-native option rendering and keyboard behavior apply as-is; it shares its field chrome with `text-input`.\n * @selector .pfx-simple-select\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * <select class=\"pfx-simple-select\">\n *   <option>Choose a fruit…</option>\n *   <option>Apple</option>\n *   <option>Orange</option>\n *   <option>Pear</option>\n * </select>\n * @structure\n * .pfx-simple-select {\n *   option {}\n * }\n * @related text-input — Shares the same field chrome, states, and sizes.\n * @related menu — The dropdown surface a richer select reuses.\n */\n@scope (.pfx-simple-select) {\n  & {\n    display: block;\n    inline-size: 100%;\n    box-sizing: border-box;\n    font-family: var(--instui-component-text-input-font-family);\n    font-weight: var(--instui-component-text-input-font-weight);\n    color: var(--instui-component-text-input-text-color);\n    background-color: var(--instui-component-text-input-background-color);\n    border: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-component-text-input-border-radius);\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-md) + 1.5rem);\n    font-size: var(--instui-component-text-input-font-size-md);\n    appearance: none;\n    -webkit-appearance: none;\n    background-image: 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\");\n    background-repeat: no-repeat;\n    background-position: right var(--instui-component-text-input-padding-horizontal-md) center;\n    background-size: 1em;\n  }\n\n  &::placeholder {\n    color: var(--instui-component-text-input-placeholder-color);\n  }\n\n  &:hover {\n    background-color: var(--instui-component-text-input-background-hover-color);\n    border-color: var(--instui-component-text-input-border-hover-color);\n  }\n\n  &:hover::placeholder {\n    color: var(--instui-component-text-input-placeholder-hover-color);\n  }\n\n  &:disabled,\n  &.-disabled {\n    background-color: var(--instui-component-text-input-background-disabled-color);\n    border-color: var(--instui-component-text-input-border-disabled-color);\n    color: var(--instui-component-text-input-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-readonly {\n    background-color: var(--instui-component-text-input-background-readonly-color);\n    border-color: var(--instui-component-text-input-border-readonly-color);\n    color: var(--instui-component-text-input-text-readonly-color);\n  }\n\n  &.-invalid {\n    border-color: var(--instui-component-text-input-error-border-color);\n  }\n\n  &.-success {\n    border-color: var(--instui-component-text-input-success-border-color);\n  }\n\n  /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n   the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n  &:is(.-invalid, :user-invalid):focus-visible {\n    outline-color: var(--instui-focus-outline-color-danger);\n  }\n\n  &.-success:focus-visible {\n    outline-color: var(--instui-focus-outline-color-success);\n  }\n\n  &.-size-sm {\n    block-size: var(--instui-component-text-input-height-sm);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n    padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-sm) + 1.5rem);\n    font-size: var(--instui-component-text-input-font-size-sm);\n  }\n\n  &.-size-md {\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-md) + 1.5rem);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &.-size-lg {\n    block-size: var(--instui-component-text-input-height-lg);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n    padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-lg) + 1.5rem);\n    font-size: var(--instui-component-text-input-font-size-lg);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component simple-select\n * @summary A styled native `<select>` with a caret, matching the text-input states and sizes.\n * @remarks Wraps a plain native `<select>` with no custom dropdown/menu markup, so browser-native option rendering and keyboard behavior apply as-is; it shares its field chrome with `text-input`.\n * @selector .pfx-simple-select\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * <select class=\"pfx-simple-select\">\n *   <option>Choose a fruit…</option>\n *   <option>Apple</option>\n *   <option>Orange</option>\n *   <option>Pear</option>\n * </select>\n * @structure\n * .pfx-simple-select {\n *   option {}\n * }\n * @related text-input — Shares the same field chrome, states, and sizes.\n * @related menu — The dropdown surface a richer select reuses.\n */\n@scope (.pfx-simple-select) {\n  & {\n    display: block;\n    inline-size: 100%;\n    box-sizing: border-box;\n    font-family: var(--instui-component-text-input-font-family);\n    font-weight: var(--instui-component-text-input-font-weight);\n    color: var(--instui-component-text-input-text-color);\n    background-color: var(--instui-component-text-input-background-color);\n    border: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-component-text-input-border-radius);\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-md) + 1.5rem);\n    font-size: var(--instui-component-text-input-font-size-md);\n    appearance: none;\n    -webkit-appearance: none;\n    background-image: 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\");\n    background-repeat: no-repeat;\n    background-position: right var(--instui-component-text-input-padding-horizontal-md) center;\n    background-size: 1em;\n  }\n\n  &::placeholder {\n    color: var(--instui-component-text-input-placeholder-color);\n  }\n\n  &:hover {\n    background-color: var(--instui-component-text-input-background-hover-color);\n    border-color: var(--instui-component-text-input-border-hover-color);\n  }\n\n  &:hover::placeholder {\n    color: var(--instui-component-text-input-placeholder-hover-color);\n  }\n\n  &:disabled,\n  &.-disabled {\n    background-color: var(--instui-component-text-input-background-disabled-color);\n    border-color: var(--instui-component-text-input-border-disabled-color);\n    color: var(--instui-component-text-input-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-readonly {\n    background-color: var(--instui-component-text-input-background-readonly-color);\n    border-color: var(--instui-component-text-input-border-readonly-color);\n    color: var(--instui-component-text-input-text-readonly-color);\n  }\n\n  &.-invalid {\n    border-color: var(--instui-component-text-input-error-border-color);\n  }\n\n  &.-success {\n    border-color: var(--instui-component-text-input-success-border-color);\n  }\n\n  /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n   the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n  &:is(.-invalid, :user-invalid):focus-visible {\n    outline-color: var(--instui-focus-outline-color-danger);\n  }\n\n  &.-success:focus-visible {\n    outline-color: var(--instui-focus-outline-color-success);\n  }\n\n  &.-size-sm {\n    block-size: var(--instui-component-text-input-height-sm);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n    padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-sm) + 1.5rem);\n    font-size: var(--instui-component-text-input-font-size-sm);\n  }\n\n  &.-size-md {\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-md) + 1.5rem);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &.-size-lg {\n    block-size: var(--instui-component-text-input-height-lg);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n    padding-inline-end: calc(var(--instui-component-text-input-padding-horizontal-lg) + 1.5rem);\n    font-size: var(--instui-component-text-input-font-size-lg);\n  }\n}\n"
+}.rebrand;
 const spinner$1 = {
-	"rebrand": "/**\n * @component spinner\n * @selector .pfx-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 * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n *   <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@scope (.pfx-spinner) {\n  :scope {\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    &.-color-inverse {\n      border-top-color: var(--instui-component-spinner-inverse-color);\n    }\n  }\n}\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\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\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",
-	"canvas": "/**\n * @component spinner\n * @selector .pfx-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 * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n *   <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@scope (.pfx-spinner) {\n  :scope {\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    &.-color-inverse {\n      border-top-color: var(--instui-component-spinner-inverse-color);\n    }\n  }\n}\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\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\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",
-	"canvasHighContrast": "/**\n * @component spinner\n * @selector .pfx-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 * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n *   <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@scope (.pfx-spinner) {\n  :scope {\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    &.-color-inverse {\n      border-top-color: var(--instui-component-spinner-inverse-color);\n    }\n  }\n}\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\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\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"
+	"rebrand": "/**\n * @component spinner\n * @selector .pfx-spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @remarks `-color-inverse` only repaints the animated top border segment, not the whole track, so it still reads correctly on a dark card without needing a separate track color.\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 * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n *   <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@scope (.pfx-spinner) {\n  :scope {\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    &.-color-inverse {\n      border-top-color: var(--instui-component-spinner-inverse-color);\n    }\n  }\n}\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\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\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",
+	"canvas": "/**\n * @component spinner\n * @selector .pfx-spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @remarks `-color-inverse` only repaints the animated top border segment, not the whole track, so it still reads correctly on a dark card without needing a separate track color.\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 * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n *   <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@scope (.pfx-spinner) {\n  :scope {\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    &.-color-inverse {\n      border-top-color: var(--instui-component-spinner-inverse-color);\n    }\n  }\n}\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\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\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",
+	"canvasHighContrast": "/**\n * @component spinner\n * @selector .pfx-spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @remarks `-color-inverse` only repaints the animated top border segment, not the whole track, so it still reads correctly on a dark card without needing a separate track color.\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 * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n *   <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@scope (.pfx-spinner) {\n  :scope {\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    &.-color-inverse {\n      border-top-color: var(--instui-component-spinner-inverse-color);\n    }\n  }\n}\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\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\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"
 }.rebrand;
 const table$1 = {
 	"rebrand": "/**\n * @component table\n * @selector .pfx-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`. See the `table.head`, `table.body`, `table.row`, `table.cell`, `table.col-header`, and `table.row-header` members for the individual parts.\n * @modifier -hover — Highlight rows on hover. @affects table.row — Reserves and colours the row's hover border.\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`. @affects table.head @affects table.body @affects table.row @affects table.cell @affects table.col-header @affects table.row-header — Stacks each part as a block and hides/labels the header accordingly.\n * @part caption — An optional table caption.\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 *     th {}\n *   }\n *   tbody {\n *     tr {\n *       td, th[scope=\"row\"] {}\n *     }\n *   }\n * }\n */\n@scope (.pfx-table) {\n  & {\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\n  & 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\n  /* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n  &.-layout-fixed {\n    table-layout: fixed;\n  }\n\n  /* layout=\"stacked\": the table itself just stops being a table box; see the head/body/row/cell/\n   col-header/row-header members for how each part restacks. */\n  &.-layout-stacked {\n    display: block;\n    width: auto;\n  }\n}\n",
@@ -588,9 +621,19 @@ const tag$1 = {
 	"canvasHighContrast": "/**\n * @component tag\n * @selector .pfx-tag\n * @summary An inline chip for a keyword or filter.\n * @remarks Sets its own horizontal `padding` (`-size-sm`/`-size-lg` scale it); chaining a `-p-*`/`-padding-*` spacing utility modifier overrides that built-in value.\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@scope (.pfx-tag) {\n  & {\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\n  &:hover {\n    background: var(--instui-component-tag-default-background-hover);\n  }\n\n  &.-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\n  &.-size-lg {\n    height: var(--instui-component-tag-height-large);\n    font-size: var(--instui-component-tag-font-size-large);\n  }\n\n  &.-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\n  &.-inline:hover {\n    background: var(--instui-component-tag-inline-background-hover);\n  }\n\n  &.-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\n  &.-inline:hover::after {\n    background: var(--instui-component-tag-inline-icon-hover-color);\n  }\n\n  /* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n  &.-readonly {\n    cursor: default;\n    background: var(--instui-component-tag-default-background);\n  }\n\n  &.-readonly.-inline::after {\n    display: none;\n  }\n}\n"
 }.rebrand;
 const text$1 = {
-	"rebrand": "/**\n * @component text\n * @selector .pfx-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 — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\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 — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\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-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content 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 * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\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 * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n  & {\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\n  &.-size-xs {\n    font-size: var(--instui-component-text-font-size-x-small);\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-text-font-size-small);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-text-font-size-large);\n  }\n\n  &.-size-xl {\n    font-size: var(--instui-component-text-font-size-x-large);\n  }\n\n  &.-weight-bold {\n    font-weight: var(--instui-component-text-font-weight-bold);\n  }\n\n  &.-style-italic {\n    font-style: italic;\n  }\n\n  &.-color-primary {\n    color: var(--instui-component-text-primary-color);\n  }\n\n  &.-color-secondary {\n    color: var(--instui-component-text-muted-color);\n  }\n\n  &.-color-brand {\n    color: light-dark(\n      var(--instui-color-institutional-brand-primary),\n      var(--instui-color-institutional-brand-font-color-dark)\n    );\n  }\n\n  &.-color-success {\n    color: var(--instui-component-text-success-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-text-error-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-text-warning-color);\n  }\n\n  &:is(.-color-ai-highlight, .-color-ai) {\n    color: var(--instui-component-text-ai-color);\n    background: var(--instui-component-text-ai-background-color);\n  }\n\n  &.-color-primary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-secondary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-primary-on {\n    color: var(--instui-component-text-base-on-color);\n  }\n\n  &.-color-secondary-on {\n    color: var(--instui-component-text-muted-on-color);\n  }\n\n  &.-variant-description-page {\n    font-size: var(--instui-component-text-description-page-font-size);\n    font-weight: var(--instui-component-text-description-page-font-weight);\n    line-height: var(--instui-component-text-description-page-line-height);\n  }\n\n  &.-variant-description-section {\n    font-size: var(--instui-component-text-description-section-font-size);\n    font-weight: var(--instui-component-text-description-section-font-weight);\n    line-height: var(--instui-component-text-description-section-line-height);\n  }\n\n  &.-variant-content {\n    font-size: var(--instui-component-text-content-font-size);\n    line-height: var(--instui-component-text-content-line-height);\n    font-weight: var(--instui-component-text-content-font-weight);\n  }\n\n  &.-variant-content-small {\n    font-size: var(--instui-component-text-content-small-font-size);\n    font-weight: var(--instui-component-text-content-small-font-weight);\n    line-height: var(--instui-component-text-content-small-line-height);\n  }\n\n  &.-variant-content-important {\n    font-size: var(--instui-component-text-content-important-font-size);\n    line-height: var(--instui-component-text-content-important-line-height);\n    font-weight: var(--instui-component-text-content-important-font-weight);\n  }\n\n  &.-variant-content-quote {\n    font-size: var(--instui-component-text-content-quote-font-size);\n    font-weight: var(--instui-component-text-content-quote-font-weight);\n    font-style: var(--instui-component-text-content-quote-font-style);\n    line-height: var(--instui-component-text-content-quote-line-height);\n  }\n\n  &.-variant-legend {\n    font-size: var(--instui-component-text-legend-font-size);\n    line-height: var(--instui-component-text-legend-line-height);\n    font-weight: var(--instui-component-text-legend-font-weight);\n  }\n\n  &.-transform-uppercase {\n    text-transform: uppercase;\n  }\n\n  &.-transform-lowercase {\n    text-transform: lowercase;\n  }\n\n  &.-transform-capitalize {\n    text-transform: capitalize;\n  }\n}\n",
-	"canvas": "/**\n * @component text\n * @selector .pfx-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 — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\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 — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\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-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content 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 * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\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 * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n  & {\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\n  &.-size-xs {\n    font-size: var(--instui-component-text-font-size-x-small);\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-text-font-size-small);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-text-font-size-large);\n  }\n\n  &.-size-xl {\n    font-size: var(--instui-component-text-font-size-x-large);\n  }\n\n  &.-weight-bold {\n    font-weight: var(--instui-component-text-font-weight-bold);\n  }\n\n  &.-style-italic {\n    font-style: italic;\n  }\n\n  &.-color-primary {\n    color: var(--instui-component-text-primary-color);\n  }\n\n  &.-color-secondary {\n    color: var(--instui-component-text-muted-color);\n  }\n\n  &.-color-brand {\n    color: light-dark(\n      var(--instui-color-institutional-brand-primary),\n      var(--instui-color-institutional-brand-font-color-dark)\n    );\n  }\n\n  &.-color-success {\n    color: var(--instui-component-text-success-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-text-error-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-text-warning-color);\n  }\n\n  &:is(.-color-ai-highlight, .-color-ai) {\n    color: var(--instui-component-text-ai-color);\n    background: var(--instui-component-text-ai-background-color);\n  }\n\n  &.-color-primary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-secondary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-primary-on {\n    color: var(--instui-component-text-base-on-color);\n  }\n\n  &.-color-secondary-on {\n    color: var(--instui-component-text-muted-on-color);\n  }\n\n  &.-variant-description-page {\n    font-size: var(--instui-component-text-description-page-font-size);\n    font-weight: var(--instui-component-text-description-page-font-weight);\n    line-height: var(--instui-component-text-description-page-line-height);\n  }\n\n  &.-variant-description-section {\n    font-size: var(--instui-component-text-description-section-font-size);\n    font-weight: var(--instui-component-text-description-section-font-weight);\n    line-height: var(--instui-component-text-description-section-line-height);\n  }\n\n  &.-variant-content {\n    font-size: var(--instui-component-text-content-font-size);\n    line-height: var(--instui-component-text-content-line-height);\n    font-weight: var(--instui-component-text-content-font-weight);\n  }\n\n  &.-variant-content-small {\n    font-size: var(--instui-component-text-content-small-font-size);\n    font-weight: var(--instui-component-text-content-small-font-weight);\n    line-height: var(--instui-component-text-content-small-line-height);\n  }\n\n  &.-variant-content-important {\n    font-size: var(--instui-component-text-content-important-font-size);\n    line-height: var(--instui-component-text-content-important-line-height);\n    font-weight: var(--instui-component-text-content-important-font-weight);\n  }\n\n  &.-variant-content-quote {\n    font-size: var(--instui-component-text-content-quote-font-size);\n    font-weight: var(--instui-component-text-content-quote-font-weight);\n    font-style: var(--instui-component-text-content-quote-font-style);\n    line-height: var(--instui-component-text-content-quote-line-height);\n  }\n\n  &.-variant-legend {\n    font-size: var(--instui-component-text-legend-font-size);\n    line-height: var(--instui-component-text-legend-line-height);\n    font-weight: var(--instui-component-text-legend-font-weight);\n  }\n\n  &.-transform-uppercase {\n    text-transform: uppercase;\n  }\n\n  &.-transform-lowercase {\n    text-transform: lowercase;\n  }\n\n  &.-transform-capitalize {\n    text-transform: capitalize;\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component text\n * @selector .pfx-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 — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\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 — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\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-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content 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 * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\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 * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n  & {\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\n  &.-size-xs {\n    font-size: var(--instui-component-text-font-size-x-small);\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-text-font-size-small);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-text-font-size-large);\n  }\n\n  &.-size-xl {\n    font-size: var(--instui-component-text-font-size-x-large);\n  }\n\n  &.-weight-bold {\n    font-weight: var(--instui-component-text-font-weight-bold);\n  }\n\n  &.-style-italic {\n    font-style: italic;\n  }\n\n  &.-color-primary {\n    color: var(--instui-component-text-primary-color);\n  }\n\n  &.-color-secondary {\n    color: var(--instui-component-text-muted-color);\n  }\n\n  &.-color-brand {\n    color: light-dark(\n      var(--instui-color-institutional-brand-primary),\n      var(--instui-color-institutional-brand-font-color-dark)\n    );\n  }\n\n  &.-color-success {\n    color: var(--instui-component-text-success-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-text-error-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-text-warning-color);\n  }\n\n  &:is(.-color-ai-highlight, .-color-ai) {\n    color: var(--instui-component-text-ai-color);\n    background: var(--instui-component-text-ai-background-color);\n  }\n\n  &.-color-primary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-secondary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-primary-on {\n    color: var(--instui-component-text-base-on-color);\n  }\n\n  &.-color-secondary-on {\n    color: var(--instui-component-text-muted-on-color);\n  }\n\n  &.-variant-description-page {\n    font-size: var(--instui-component-text-description-page-font-size);\n    font-weight: var(--instui-component-text-description-page-font-weight);\n    line-height: var(--instui-component-text-description-page-line-height);\n  }\n\n  &.-variant-description-section {\n    font-size: var(--instui-component-text-description-section-font-size);\n    font-weight: var(--instui-component-text-description-section-font-weight);\n    line-height: var(--instui-component-text-description-section-line-height);\n  }\n\n  &.-variant-content {\n    font-size: var(--instui-component-text-content-font-size);\n    line-height: var(--instui-component-text-content-line-height);\n    font-weight: var(--instui-component-text-content-font-weight);\n  }\n\n  &.-variant-content-small {\n    font-size: var(--instui-component-text-content-small-font-size);\n    font-weight: var(--instui-component-text-content-small-font-weight);\n    line-height: var(--instui-component-text-content-small-line-height);\n  }\n\n  &.-variant-content-important {\n    font-size: var(--instui-component-text-content-important-font-size);\n    line-height: var(--instui-component-text-content-important-line-height);\n    font-weight: var(--instui-component-text-content-important-font-weight);\n  }\n\n  &.-variant-content-quote {\n    font-size: var(--instui-component-text-content-quote-font-size);\n    font-weight: var(--instui-component-text-content-quote-font-weight);\n    font-style: var(--instui-component-text-content-quote-font-style);\n    line-height: var(--instui-component-text-content-quote-line-height);\n  }\n\n  &.-variant-legend {\n    font-size: var(--instui-component-text-legend-font-size);\n    line-height: var(--instui-component-text-legend-line-height);\n    font-weight: var(--instui-component-text-legend-font-weight);\n  }\n\n  &.-transform-uppercase {\n    text-transform: uppercase;\n  }\n\n  &.-transform-lowercase {\n    text-transform: lowercase;\n  }\n\n  &.-transform-capitalize {\n    text-transform: capitalize;\n  }\n}\n"
+	"rebrand": "/**\n * @component text\n * @selector .pfx-text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @remarks The `-variant-*` presets and the `-color-*`/`-size-*`/`-weight-*` modifiers all compose on the same element; unlike `heading`, it renders no implicit semantic level.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\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 — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\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-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content 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 * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\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 * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n  & {\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\n  &.-size-xs {\n    font-size: var(--instui-component-text-font-size-x-small);\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-text-font-size-small);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-text-font-size-large);\n  }\n\n  &.-size-xl {\n    font-size: var(--instui-component-text-font-size-x-large);\n  }\n\n  &.-weight-bold {\n    font-weight: var(--instui-component-text-font-weight-bold);\n  }\n\n  &.-style-italic {\n    font-style: italic;\n  }\n\n  &.-color-primary {\n    color: var(--instui-component-text-primary-color);\n  }\n\n  &.-color-secondary {\n    color: var(--instui-component-text-muted-color);\n  }\n\n  &.-color-brand {\n    color: light-dark(\n      var(--instui-color-institutional-brand-primary),\n      var(--instui-color-institutional-brand-font-color-dark)\n    );\n  }\n\n  &.-color-success {\n    color: var(--instui-component-text-success-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-text-error-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-text-warning-color);\n  }\n\n  &:is(.-color-ai-highlight, .-color-ai) {\n    color: var(--instui-component-text-ai-color);\n    background: var(--instui-component-text-ai-background-color);\n  }\n\n  &.-color-primary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-secondary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-primary-on {\n    color: var(--instui-component-text-base-on-color);\n  }\n\n  &.-color-secondary-on {\n    color: var(--instui-component-text-muted-on-color);\n  }\n\n  &.-variant-description-page {\n    font-size: var(--instui-component-text-description-page-font-size);\n    font-weight: var(--instui-component-text-description-page-font-weight);\n    line-height: var(--instui-component-text-description-page-line-height);\n  }\n\n  &.-variant-description-section {\n    font-size: var(--instui-component-text-description-section-font-size);\n    font-weight: var(--instui-component-text-description-section-font-weight);\n    line-height: var(--instui-component-text-description-section-line-height);\n  }\n\n  &.-variant-content {\n    font-size: var(--instui-component-text-content-font-size);\n    line-height: var(--instui-component-text-content-line-height);\n    font-weight: var(--instui-component-text-content-font-weight);\n  }\n\n  &.-variant-content-small {\n    font-size: var(--instui-component-text-content-small-font-size);\n    font-weight: var(--instui-component-text-content-small-font-weight);\n    line-height: var(--instui-component-text-content-small-line-height);\n  }\n\n  &.-variant-content-important {\n    font-size: var(--instui-component-text-content-important-font-size);\n    line-height: var(--instui-component-text-content-important-line-height);\n    font-weight: var(--instui-component-text-content-important-font-weight);\n  }\n\n  &.-variant-content-quote {\n    font-size: var(--instui-component-text-content-quote-font-size);\n    font-weight: var(--instui-component-text-content-quote-font-weight);\n    font-style: var(--instui-component-text-content-quote-font-style);\n    line-height: var(--instui-component-text-content-quote-line-height);\n  }\n\n  &.-variant-legend {\n    font-size: var(--instui-component-text-legend-font-size);\n    line-height: var(--instui-component-text-legend-line-height);\n    font-weight: var(--instui-component-text-legend-font-weight);\n  }\n\n  &.-transform-uppercase {\n    text-transform: uppercase;\n  }\n\n  &.-transform-lowercase {\n    text-transform: lowercase;\n  }\n\n  &.-transform-capitalize {\n    text-transform: capitalize;\n  }\n}\n",
+	"canvas": "/**\n * @component text\n * @selector .pfx-text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @remarks The `-variant-*` presets and the `-color-*`/`-size-*`/`-weight-*` modifiers all compose on the same element; unlike `heading`, it renders no implicit semantic level.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\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 — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\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-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content 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 * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\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 * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n  & {\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\n  &.-size-xs {\n    font-size: var(--instui-component-text-font-size-x-small);\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-text-font-size-small);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-text-font-size-large);\n  }\n\n  &.-size-xl {\n    font-size: var(--instui-component-text-font-size-x-large);\n  }\n\n  &.-weight-bold {\n    font-weight: var(--instui-component-text-font-weight-bold);\n  }\n\n  &.-style-italic {\n    font-style: italic;\n  }\n\n  &.-color-primary {\n    color: var(--instui-component-text-primary-color);\n  }\n\n  &.-color-secondary {\n    color: var(--instui-component-text-muted-color);\n  }\n\n  &.-color-brand {\n    color: light-dark(\n      var(--instui-color-institutional-brand-primary),\n      var(--instui-color-institutional-brand-font-color-dark)\n    );\n  }\n\n  &.-color-success {\n    color: var(--instui-component-text-success-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-text-error-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-text-warning-color);\n  }\n\n  &:is(.-color-ai-highlight, .-color-ai) {\n    color: var(--instui-component-text-ai-color);\n    background: var(--instui-component-text-ai-background-color);\n  }\n\n  &.-color-primary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-secondary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-primary-on {\n    color: var(--instui-component-text-base-on-color);\n  }\n\n  &.-color-secondary-on {\n    color: var(--instui-component-text-muted-on-color);\n  }\n\n  &.-variant-description-page {\n    font-size: var(--instui-component-text-description-page-font-size);\n    font-weight: var(--instui-component-text-description-page-font-weight);\n    line-height: var(--instui-component-text-description-page-line-height);\n  }\n\n  &.-variant-description-section {\n    font-size: var(--instui-component-text-description-section-font-size);\n    font-weight: var(--instui-component-text-description-section-font-weight);\n    line-height: var(--instui-component-text-description-section-line-height);\n  }\n\n  &.-variant-content {\n    font-size: var(--instui-component-text-content-font-size);\n    line-height: var(--instui-component-text-content-line-height);\n    font-weight: var(--instui-component-text-content-font-weight);\n  }\n\n  &.-variant-content-small {\n    font-size: var(--instui-component-text-content-small-font-size);\n    font-weight: var(--instui-component-text-content-small-font-weight);\n    line-height: var(--instui-component-text-content-small-line-height);\n  }\n\n  &.-variant-content-important {\n    font-size: var(--instui-component-text-content-important-font-size);\n    line-height: var(--instui-component-text-content-important-line-height);\n    font-weight: var(--instui-component-text-content-important-font-weight);\n  }\n\n  &.-variant-content-quote {\n    font-size: var(--instui-component-text-content-quote-font-size);\n    font-weight: var(--instui-component-text-content-quote-font-weight);\n    font-style: var(--instui-component-text-content-quote-font-style);\n    line-height: var(--instui-component-text-content-quote-line-height);\n  }\n\n  &.-variant-legend {\n    font-size: var(--instui-component-text-legend-font-size);\n    line-height: var(--instui-component-text-legend-line-height);\n    font-weight: var(--instui-component-text-legend-font-weight);\n  }\n\n  &.-transform-uppercase {\n    text-transform: uppercase;\n  }\n\n  &.-transform-lowercase {\n    text-transform: lowercase;\n  }\n\n  &.-transform-capitalize {\n    text-transform: capitalize;\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component text\n * @selector .pfx-text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @remarks The `-variant-*` presets and the `-color-*`/`-size-*`/`-weight-*` modifiers all compose on the same element; unlike `heading`, it renders no implicit semantic level.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\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 — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\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-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content 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 * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\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 * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n  & {\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\n  &.-size-xs {\n    font-size: var(--instui-component-text-font-size-x-small);\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-text-font-size-small);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-text-font-size-large);\n  }\n\n  &.-size-xl {\n    font-size: var(--instui-component-text-font-size-x-large);\n  }\n\n  &.-weight-bold {\n    font-weight: var(--instui-component-text-font-weight-bold);\n  }\n\n  &.-style-italic {\n    font-style: italic;\n  }\n\n  &.-color-primary {\n    color: var(--instui-component-text-primary-color);\n  }\n\n  &.-color-secondary {\n    color: var(--instui-component-text-muted-color);\n  }\n\n  &.-color-brand {\n    color: light-dark(\n      var(--instui-color-institutional-brand-primary),\n      var(--instui-color-institutional-brand-font-color-dark)\n    );\n  }\n\n  &.-color-success {\n    color: var(--instui-component-text-success-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-text-error-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-text-warning-color);\n  }\n\n  &:is(.-color-ai-highlight, .-color-ai) {\n    color: var(--instui-component-text-ai-color);\n    background: var(--instui-component-text-ai-background-color);\n  }\n\n  &.-color-primary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-secondary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-primary-on {\n    color: var(--instui-component-text-base-on-color);\n  }\n\n  &.-color-secondary-on {\n    color: var(--instui-component-text-muted-on-color);\n  }\n\n  &.-variant-description-page {\n    font-size: var(--instui-component-text-description-page-font-size);\n    font-weight: var(--instui-component-text-description-page-font-weight);\n    line-height: var(--instui-component-text-description-page-line-height);\n  }\n\n  &.-variant-description-section {\n    font-size: var(--instui-component-text-description-section-font-size);\n    font-weight: var(--instui-component-text-description-section-font-weight);\n    line-height: var(--instui-component-text-description-section-line-height);\n  }\n\n  &.-variant-content {\n    font-size: var(--instui-component-text-content-font-size);\n    line-height: var(--instui-component-text-content-line-height);\n    font-weight: var(--instui-component-text-content-font-weight);\n  }\n\n  &.-variant-content-small {\n    font-size: var(--instui-component-text-content-small-font-size);\n    font-weight: var(--instui-component-text-content-small-font-weight);\n    line-height: var(--instui-component-text-content-small-line-height);\n  }\n\n  &.-variant-content-important {\n    font-size: var(--instui-component-text-content-important-font-size);\n    line-height: var(--instui-component-text-content-important-line-height);\n    font-weight: var(--instui-component-text-content-important-font-weight);\n  }\n\n  &.-variant-content-quote {\n    font-size: var(--instui-component-text-content-quote-font-size);\n    font-weight: var(--instui-component-text-content-quote-font-weight);\n    font-style: var(--instui-component-text-content-quote-font-style);\n    line-height: var(--instui-component-text-content-quote-line-height);\n  }\n\n  &.-variant-legend {\n    font-size: var(--instui-component-text-legend-font-size);\n    line-height: var(--instui-component-text-legend-line-height);\n    font-weight: var(--instui-component-text-legend-font-weight);\n  }\n\n  &.-transform-uppercase {\n    text-transform: uppercase;\n  }\n\n  &.-transform-lowercase {\n    text-transform: lowercase;\n  }\n\n  &.-transform-capitalize {\n    text-transform: capitalize;\n  }\n}\n"
+}.rebrand;
+const textArea$1 = {
+	"rebrand": "/**\n * @component text-area\n * @summary A styled, resizable native `<textarea>` with the same states and sizes as the text input.\n * @remarks Shares its border, background, and focus states with `text-input` and `simple-select`; only `resize: vertical` and the taller minimum height are unique to it.\n * @selector .pfx-text-area\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * <textarea class=\"pfx-text-area\" placeholder=\"Write a comment…\"></textarea>\n * @related text-input — The single-line counterpart with the same states and sizes.\n */\n@scope (.pfx-text-area) {\n  & {\n    display: block;\n    inline-size: 100%;\n    box-sizing: border-box;\n    font-family: var(--instui-component-text-area-font-family);\n    font-weight: var(--instui-component-text-area-font-weight);\n    color: var(--instui-component-text-area-text-color);\n    background-color: var(--instui-component-text-area-background-color);\n    border: var(--instui-component-text-area-border-width) solid\n      var(--instui-component-text-area-border-color);\n    border-radius: var(--instui-component-text-area-border-radius);\n    padding: var(--instui-component-text-area-padding);\n    font-size: var(--instui-component-text-area-font-size-md);\n    line-height: 1.5;\n    min-block-size: 4rem;\n    resize: vertical;\n  }\n\n  &::placeholder {\n    color: var(--instui-component-text-area-placeholder-color);\n  }\n\n  &:hover {\n    background-color: var(--instui-component-text-area-background-hover-color);\n    border-color: var(--instui-component-text-area-border-hover-color);\n  }\n\n  &:hover::placeholder {\n    color: var(--instui-component-text-area-placeholder-hover-color);\n  }\n\n  &:disabled,\n  &.-disabled {\n    background-color: var(--instui-component-text-area-background-disabled-color);\n    border-color: var(--instui-component-text-area-border-disabled-color);\n    color: var(--instui-component-text-area-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-readonly {\n    background-color: var(--instui-component-text-area-background-readonly-color);\n    border-color: var(--instui-component-text-area-border-readonly-color);\n    color: var(--instui-component-text-area-text-readonly-color);\n  }\n\n  &.-invalid {\n    border-color: var(--instui-component-text-area-error-border-color);\n  }\n\n  &.-success {\n    border-color: var(--instui-component-text-area-success-border-color);\n  }\n\n  /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n   the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n  &:is(.-invalid, :user-invalid):focus-visible {\n    outline-color: var(--instui-focus-outline-color-danger);\n  }\n\n  &.-success:focus-visible {\n    outline-color: var(--instui-focus-outline-color-success);\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-text-area-font-size-sm);\n  }\n\n  &.-size-md {\n    font-size: var(--instui-component-text-area-font-size-md);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-text-area-font-size-lg);\n  }\n}\n",
+	"canvas": "/**\n * @component text-area\n * @summary A styled, resizable native `<textarea>` with the same states and sizes as the text input.\n * @remarks Shares its border, background, and focus states with `text-input` and `simple-select`; only `resize: vertical` and the taller minimum height are unique to it.\n * @selector .pfx-text-area\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * <textarea class=\"pfx-text-area\" placeholder=\"Write a comment…\"></textarea>\n * @related text-input — The single-line counterpart with the same states and sizes.\n */\n@scope (.pfx-text-area) {\n  & {\n    display: block;\n    inline-size: 100%;\n    box-sizing: border-box;\n    font-family: var(--instui-component-text-area-font-family);\n    font-weight: var(--instui-component-text-area-font-weight);\n    color: var(--instui-component-text-area-text-color);\n    background-color: var(--instui-component-text-area-background-color);\n    border: var(--instui-component-text-area-border-width) solid\n      var(--instui-component-text-area-border-color);\n    border-radius: var(--instui-component-text-area-border-radius);\n    padding: var(--instui-component-text-area-padding);\n    font-size: var(--instui-component-text-area-font-size-md);\n    line-height: 1.5;\n    min-block-size: 4rem;\n    resize: vertical;\n  }\n\n  &::placeholder {\n    color: var(--instui-component-text-area-placeholder-color);\n  }\n\n  &:hover {\n    background-color: var(--instui-component-text-area-background-hover-color);\n    border-color: var(--instui-component-text-area-border-hover-color);\n  }\n\n  &:hover::placeholder {\n    color: var(--instui-component-text-area-placeholder-hover-color);\n  }\n\n  &:disabled,\n  &.-disabled {\n    background-color: var(--instui-component-text-area-background-disabled-color);\n    border-color: var(--instui-component-text-area-border-disabled-color);\n    color: var(--instui-component-text-area-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-readonly {\n    background-color: var(--instui-component-text-area-background-readonly-color);\n    border-color: var(--instui-component-text-area-border-readonly-color);\n    color: var(--instui-component-text-area-text-readonly-color);\n  }\n\n  &.-invalid {\n    border-color: var(--instui-component-text-area-error-border-color);\n  }\n\n  &.-success {\n    border-color: var(--instui-component-text-area-success-border-color);\n  }\n\n  /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n   the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n  &:is(.-invalid, :user-invalid):focus-visible {\n    outline-color: var(--instui-focus-outline-color-danger);\n  }\n\n  &.-success:focus-visible {\n    outline-color: var(--instui-focus-outline-color-success);\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-text-area-font-size-sm);\n  }\n\n  &.-size-md {\n    font-size: var(--instui-component-text-area-font-size-md);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-text-area-font-size-lg);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component text-area\n * @summary A styled, resizable native `<textarea>` with the same states and sizes as the text input.\n * @remarks Shares its border, background, and focus states with `text-input` and `simple-select`; only `resize: vertical` and the taller minimum height are unique to it.\n * @selector .pfx-text-area\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * <textarea class=\"pfx-text-area\" placeholder=\"Write a comment…\"></textarea>\n * @related text-input — The single-line counterpart with the same states and sizes.\n */\n@scope (.pfx-text-area) {\n  & {\n    display: block;\n    inline-size: 100%;\n    box-sizing: border-box;\n    font-family: var(--instui-component-text-area-font-family);\n    font-weight: var(--instui-component-text-area-font-weight);\n    color: var(--instui-component-text-area-text-color);\n    background-color: var(--instui-component-text-area-background-color);\n    border: var(--instui-component-text-area-border-width) solid\n      var(--instui-component-text-area-border-color);\n    border-radius: var(--instui-component-text-area-border-radius);\n    padding: var(--instui-component-text-area-padding);\n    font-size: var(--instui-component-text-area-font-size-md);\n    line-height: 1.5;\n    min-block-size: 4rem;\n    resize: vertical;\n  }\n\n  &::placeholder {\n    color: var(--instui-component-text-area-placeholder-color);\n  }\n\n  &:hover {\n    background-color: var(--instui-component-text-area-background-hover-color);\n    border-color: var(--instui-component-text-area-border-hover-color);\n  }\n\n  &:hover::placeholder {\n    color: var(--instui-component-text-area-placeholder-hover-color);\n  }\n\n  &:disabled,\n  &.-disabled {\n    background-color: var(--instui-component-text-area-background-disabled-color);\n    border-color: var(--instui-component-text-area-border-disabled-color);\n    color: var(--instui-component-text-area-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-readonly {\n    background-color: var(--instui-component-text-area-background-readonly-color);\n    border-color: var(--instui-component-text-area-border-readonly-color);\n    color: var(--instui-component-text-area-text-readonly-color);\n  }\n\n  &.-invalid {\n    border-color: var(--instui-component-text-area-error-border-color);\n  }\n\n  &.-success {\n    border-color: var(--instui-component-text-area-success-border-color);\n  }\n\n  /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n   the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n  &:is(.-invalid, :user-invalid):focus-visible {\n    outline-color: var(--instui-focus-outline-color-danger);\n  }\n\n  &.-success:focus-visible {\n    outline-color: var(--instui-focus-outline-color-success);\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-text-area-font-size-sm);\n  }\n\n  &.-size-md {\n    font-size: var(--instui-component-text-area-font-size-md);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-text-area-font-size-lg);\n  }\n}\n"
+}.rebrand;
+const textInput$1 = {
+	"rebrand": "/**\n * @component text-input\n * @summary A styled native `<input>` — including `date`, `time`, and `datetime-local`, where the browser supplies the picker — with validation states and sizes.\n * @remarks Shares its border, background, and state chrome with `text-area`, `simple-select`, `number-input`, and `input-group`; for `date`/`time`/`datetime-local` types the browser supplies its own picker UI, which this stylesheet doesn't style.\n * @selector .pfx-text-input\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * ```html\n * <input class=\"pfx-text-input\" placeholder=\"Default\">\n * ```\n * @related text-area — The multi-line counterpart with the same states and sizes.\n * @related number-input — The numeric-entry input sharing this chrome.\n * @related simple-select — The native select sharing this field chrome.\n * @related input-group — Wraps this input with leading and trailing slots.\n */\n@scope (.pfx-text-input) {\n  & {\n    display: block;\n    inline-size: 100%;\n    box-sizing: border-box;\n    font-family: var(--instui-component-text-input-font-family);\n    font-weight: var(--instui-component-text-input-font-weight);\n    color: var(--instui-component-text-input-text-color);\n    background-color: var(--instui-component-text-input-background-color);\n    border: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-component-text-input-border-radius);\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &::placeholder {\n    color: var(--instui-component-text-input-placeholder-color);\n  }\n\n  &:hover {\n    background-color: var(--instui-component-text-input-background-hover-color);\n    border-color: var(--instui-component-text-input-border-hover-color);\n  }\n\n  &:hover::placeholder {\n    color: var(--instui-component-text-input-placeholder-hover-color);\n  }\n\n  &:disabled,\n  &.-disabled {\n    background-color: var(--instui-component-text-input-background-disabled-color);\n    border-color: var(--instui-component-text-input-border-disabled-color);\n    color: var(--instui-component-text-input-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-readonly {\n    background-color: var(--instui-component-text-input-background-readonly-color);\n    border-color: var(--instui-component-text-input-border-readonly-color);\n    color: var(--instui-component-text-input-text-readonly-color);\n  }\n\n  &.-invalid {\n    border-color: var(--instui-component-text-input-error-border-color);\n  }\n\n  &.-success {\n    border-color: var(--instui-component-text-input-success-border-color);\n  }\n\n  /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n   the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n  &:is(.-invalid, :user-invalid):focus-visible {\n    outline-color: var(--instui-focus-outline-color-danger);\n  }\n\n  &.-success:focus-visible {\n    outline-color: var(--instui-focus-outline-color-success);\n  }\n\n  &.-size-sm {\n    block-size: var(--instui-component-text-input-height-sm);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n    font-size: var(--instui-component-text-input-font-size-sm);\n  }\n\n  &.-size-md {\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &.-size-lg {\n    block-size: var(--instui-component-text-input-height-lg);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n    font-size: var(--instui-component-text-input-font-size-lg);\n  }\n}\n",
+	"canvas": "/**\n * @component text-input\n * @summary A styled native `<input>` — including `date`, `time`, and `datetime-local`, where the browser supplies the picker — with validation states and sizes.\n * @remarks Shares its border, background, and state chrome with `text-area`, `simple-select`, `number-input`, and `input-group`; for `date`/`time`/`datetime-local` types the browser supplies its own picker UI, which this stylesheet doesn't style.\n * @selector .pfx-text-input\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * ```html\n * <input class=\"pfx-text-input\" placeholder=\"Default\">\n * ```\n * @related text-area — The multi-line counterpart with the same states and sizes.\n * @related number-input — The numeric-entry input sharing this chrome.\n * @related simple-select — The native select sharing this field chrome.\n * @related input-group — Wraps this input with leading and trailing slots.\n */\n@scope (.pfx-text-input) {\n  & {\n    display: block;\n    inline-size: 100%;\n    box-sizing: border-box;\n    font-family: var(--instui-component-text-input-font-family);\n    font-weight: var(--instui-component-text-input-font-weight);\n    color: var(--instui-component-text-input-text-color);\n    background-color: var(--instui-component-text-input-background-color);\n    border: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-component-text-input-border-radius);\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &::placeholder {\n    color: var(--instui-component-text-input-placeholder-color);\n  }\n\n  &:hover {\n    background-color: var(--instui-component-text-input-background-hover-color);\n    border-color: var(--instui-component-text-input-border-hover-color);\n  }\n\n  &:hover::placeholder {\n    color: var(--instui-component-text-input-placeholder-hover-color);\n  }\n\n  &:disabled,\n  &.-disabled {\n    background-color: var(--instui-component-text-input-background-disabled-color);\n    border-color: var(--instui-component-text-input-border-disabled-color);\n    color: var(--instui-component-text-input-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-readonly {\n    background-color: var(--instui-component-text-input-background-readonly-color);\n    border-color: var(--instui-component-text-input-border-readonly-color);\n    color: var(--instui-component-text-input-text-readonly-color);\n  }\n\n  &.-invalid {\n    border-color: var(--instui-component-text-input-error-border-color);\n  }\n\n  &.-success {\n    border-color: var(--instui-component-text-input-success-border-color);\n  }\n\n  /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n   the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n  &:is(.-invalid, :user-invalid):focus-visible {\n    outline-color: var(--instui-focus-outline-color-danger);\n  }\n\n  &.-success:focus-visible {\n    outline-color: var(--instui-focus-outline-color-success);\n  }\n\n  &.-size-sm {\n    block-size: var(--instui-component-text-input-height-sm);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n    font-size: var(--instui-component-text-input-font-size-sm);\n  }\n\n  &.-size-md {\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &.-size-lg {\n    block-size: var(--instui-component-text-input-height-lg);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n    font-size: var(--instui-component-text-input-font-size-lg);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component text-input\n * @summary A styled native `<input>` — including `date`, `time`, and `datetime-local`, where the browser supplies the picker — with validation states and sizes.\n * @remarks Shares its border, background, and state chrome with `text-area`, `simple-select`, `number-input`, and `input-group`; for `date`/`time`/`datetime-local` types the browser supplies its own picker UI, which this stylesheet doesn't style.\n * @selector .pfx-text-input\n * @modifier -disabled — Disabled state.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -success — Success (valid) state.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @pseudo ::placeholder — The placeholder text, in a muted color that shifts on hover.\n * @cssstate disabled\n * @example\n * ```html\n * <input class=\"pfx-text-input\" placeholder=\"Default\">\n * ```\n * @related text-area — The multi-line counterpart with the same states and sizes.\n * @related number-input — The numeric-entry input sharing this chrome.\n * @related simple-select — The native select sharing this field chrome.\n * @related input-group — Wraps this input with leading and trailing slots.\n */\n@scope (.pfx-text-input) {\n  & {\n    display: block;\n    inline-size: 100%;\n    box-sizing: border-box;\n    font-family: var(--instui-component-text-input-font-family);\n    font-weight: var(--instui-component-text-input-font-weight);\n    color: var(--instui-component-text-input-text-color);\n    background-color: var(--instui-component-text-input-background-color);\n    border: var(--instui-component-text-input-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-component-text-input-border-radius);\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &::placeholder {\n    color: var(--instui-component-text-input-placeholder-color);\n  }\n\n  &:hover {\n    background-color: var(--instui-component-text-input-background-hover-color);\n    border-color: var(--instui-component-text-input-border-hover-color);\n  }\n\n  &:hover::placeholder {\n    color: var(--instui-component-text-input-placeholder-hover-color);\n  }\n\n  &:disabled,\n  &.-disabled {\n    background-color: var(--instui-component-text-input-background-disabled-color);\n    border-color: var(--instui-component-text-input-border-disabled-color);\n    color: var(--instui-component-text-input-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-readonly {\n    background-color: var(--instui-component-text-input-background-readonly-color);\n    border-color: var(--instui-component-text-input-border-readonly-color);\n    color: var(--instui-component-text-input-text-readonly-color);\n  }\n\n  &.-invalid {\n    border-color: var(--instui-component-text-input-error-border-color);\n  }\n\n  &.-success {\n    border-color: var(--instui-component-text-input-success-border-color);\n  }\n\n  /* Focus ring tracks the validity: danger when explicitly -invalid OR natively :user-invalid (after\n   the user has interacted), success on -success — overriding base.css's info-blue ring for focusables. */\n  &:is(.-invalid, :user-invalid):focus-visible {\n    outline-color: var(--instui-focus-outline-color-danger);\n  }\n\n  &.-success:focus-visible {\n    outline-color: var(--instui-focus-outline-color-success);\n  }\n\n  &.-size-sm {\n    block-size: var(--instui-component-text-input-height-sm);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-sm);\n    font-size: var(--instui-component-text-input-font-size-sm);\n  }\n\n  &.-size-md {\n    block-size: var(--instui-component-text-input-height-md);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-md);\n    font-size: var(--instui-component-text-input-font-size-md);\n  }\n\n  &.-size-lg {\n    block-size: var(--instui-component-text-input-height-lg);\n    padding-inline: var(--instui-component-text-input-padding-horizontal-lg);\n    font-size: var(--instui-component-text-input-font-size-lg);\n  }\n}\n"
 }.rebrand;
 const toggleDetails$1 = {
 	"rebrand": "/**\n * @component toggle-details\n * @selector .pfx-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@scope (.pfx-toggle-details) {\n  & {\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\n  & > 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\n  /* Kill the native disclosure marker; we supply a rotating chevron. */\n  & > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  & > 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  &[open] > summary::before {\n    transform: rotate(90deg);\n  }\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  &.-chevron-end > summary::before {\n    order: 1;\n    margin-inline-start: auto;\n  }\n\n  /* variant=\"filled\": the summary reads as an action-secondary button. */\n  &.-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\n  & > :not(summary) {\n    padding: var(--instui-component-toggle-details-content-padding-medium);\n  }\n\n  &.-size-sm > summary {\n    font-size: var(--instui-component-toggle-details-font-size-small);\n  }\n\n  &.-size-sm > :not(summary) {\n    padding: var(--instui-component-toggle-details-content-padding-small);\n  }\n\n  &.-size-lg > summary {\n    font-size: var(--instui-component-toggle-details-font-size-large);\n  }\n\n  &.-size-lg > :not(summary) {\n    padding: var(--instui-component-toggle-details-content-padding-large);\n  }\n}\n",
@@ -603,9 +646,9 @@ const toggleGroup$1 = {
 	"canvasHighContrast": "/**\n * @component toggle-group\n * @selector .pfx-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@scope (.pfx-toggle-group) {\n  & {\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\n  & > 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\n  & > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  & > 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  &[open] > summary::before {\n    transform: rotate(90deg);\n  }\n\n  /* the collapsible content: separated from the header by a top border in the group colour */\n  & > :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\n  &.-size-sm > summary,\n  &.-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\n  &.-size-lg > summary,\n  &.-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\n  /* border={false} */\n  &.-without-border {\n    border: 0;\n  }\n\n  &.-without-border > :not(summary) {\n    border-block-start: 0;\n  }\n}\n"
 }.rebrand;
 const tooltip$1 = {
-	"rebrand": "/**\n * @component tooltip\n * @selector .pfx-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 * ```html\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 * ```\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@scope (.pfx-tooltip) {\n  :scope {\n    position: relative;\n    display: inline-flex;\n\n    > [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .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      /* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n         bubble to the other sides. */\n      &.-placement-bottom {\n        inset-block: 100% auto;\n        margin-block: var(--instui-spacing-space-xs) 0;\n      }\n\n      &.-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      &.-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    }\n\n    /* Show on hover or keyboard focus of the trigger. */\n    &:hover > .tip,\n    &:focus-within > .tip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n}\n",
-	"canvas": "/**\n * @component tooltip\n * @selector .pfx-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 * ```html\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 * ```\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@scope (.pfx-tooltip) {\n  :scope {\n    position: relative;\n    display: inline-flex;\n\n    > [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .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      /* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n         bubble to the other sides. */\n      &.-placement-bottom {\n        inset-block: 100% auto;\n        margin-block: var(--instui-spacing-space-xs) 0;\n      }\n\n      &.-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      &.-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    }\n\n    /* Show on hover or keyboard focus of the trigger. */\n    &:hover > .tip,\n    &:focus-within > .tip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component tooltip\n * @selector .pfx-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 * ```html\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 * ```\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@scope (.pfx-tooltip) {\n  :scope {\n    position: relative;\n    display: inline-flex;\n\n    > [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .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      /* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n         bubble to the other sides. */\n      &.-placement-bottom {\n        inset-block: 100% auto;\n        margin-block: var(--instui-spacing-space-xs) 0;\n      }\n\n      &.-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      &.-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    }\n\n    /* Show on hover or keyboard focus of the trigger. */\n    &:hover > .tip,\n    &:focus-within > .tip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n}\n"
+	"rebrand": "/**\n * @component tooltip\n * @selector .pfx-tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @remarks Toggling is pure CSS (`:hover`/`:focus-within`), so the bubble only reaches keyboard users through a focusable trigger; unlike `popover`, it isn't dismissible or click-triggered.\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 * ```html\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 * ```\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@scope (.pfx-tooltip) {\n  :scope {\n    position: relative;\n    display: inline-flex;\n\n    > [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .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      /* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n         bubble to the other sides. */\n      &.-placement-bottom {\n        inset-block: 100% auto;\n        margin-block: var(--instui-spacing-space-xs) 0;\n      }\n\n      &.-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      &.-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    }\n\n    /* Show on hover or keyboard focus of the trigger. */\n    &:hover > .tip,\n    &:focus-within > .tip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n}\n",
+	"canvas": "/**\n * @component tooltip\n * @selector .pfx-tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @remarks Toggling is pure CSS (`:hover`/`:focus-within`), so the bubble only reaches keyboard users through a focusable trigger; unlike `popover`, it isn't dismissible or click-triggered.\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 * ```html\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 * ```\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@scope (.pfx-tooltip) {\n  :scope {\n    position: relative;\n    display: inline-flex;\n\n    > [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .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      /* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n         bubble to the other sides. */\n      &.-placement-bottom {\n        inset-block: 100% auto;\n        margin-block: var(--instui-spacing-space-xs) 0;\n      }\n\n      &.-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      &.-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    }\n\n    /* Show on hover or keyboard focus of the trigger. */\n    &:hover > .tip,\n    &:focus-within > .tip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component tooltip\n * @selector .pfx-tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @remarks Toggling is pure CSS (`:hover`/`:focus-within`), so the bubble only reaches keyboard users through a focusable trigger; unlike `popover`, it isn't dismissible or click-triggered.\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 * ```html\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 * ```\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@scope (.pfx-tooltip) {\n  :scope {\n    position: relative;\n    display: inline-flex;\n\n    > [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .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      /* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n         bubble to the other sides. */\n      &.-placement-bottom {\n        inset-block: 100% auto;\n        margin-block: var(--instui-spacing-space-xs) 0;\n      }\n\n      &.-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      &.-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    }\n\n    /* Show on hover or keyboard focus of the trigger. */\n    &:hover > .tip,\n    &:focus-within > .tip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n}\n"
 }.rebrand;
 const tray$1 = {
 	"rebrand": "/**\n * @component tray\n * @selector .pfx-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-start — (default) Pin to the start (inline-start) 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-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-regular - @deprecated {@link -size-md} is the new default size.\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 * @remarks Start/end placements resolve against `inset-inline` (logical, direction-aware); the slide-in transform mirrors automatically under an ancestor `[dir=\"rtl\"]`, so no extra markup is needed for right-to-left layouts.\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 * ```html\n * <div class=\"pfx-tray -placement-end -size-sm\">\n *   <span class=\"pfx-heading -level-h3\">Filters</span>\n *   <p class=\"-size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * <button class=\"pfx-button -toggle\">toggle tray</button>\n * ```\n * @structure\n * .pfx-tray {\n *   @component close-button:optional {}\n *   slot {}\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@scope (.pfx-tray) {\n  & {\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\n      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\n  &.-placement-start {\n    inset-inline: 0 auto;\n  }\n\n  &.-placement-end {\n    inset-inline: auto 0;\n  }\n\n  &.-placement-top {\n    inset: 0 0 auto 0;\n    inline-size: 100%;\n    block-size: auto;\n  }\n\n  &.-placement-bottom {\n    inset: auto 0 0 0;\n    inline-size: 100%;\n    block-size: auto;\n  }\n\n  &.-size-xs {\n    inline-size: var(--instui-component-tray-width-xs);\n  }\n\n  &.-size-sm {\n    inline-size: var(--instui-component-tray-width-sm);\n  }\n\n  &.-size-md {\n    inline-size: var(--instui-component-tray-width-md);\n  }\n\n  &.-size-lg {\n    inline-size: var(--instui-component-tray-width-lg);\n  }\n\n  &.-size-xl {\n    inline-size: var(--instui-component-tray-width-xl);\n  }\n\n  &[popover] {\n    margin: 0;\n  }\n\n  &[is=\"dialog\"],\n  dialog& {\n    margin: 0;\n    padding: var(--instui-component-tray-padding);\n    border: var(--instui-component-tray-border-width) solid\n      var(--instui-component-tray-border-color);\n  }\n\n  /* Slide in from the docked edge on open (native popover + @starting-style, no JS). --tray-slide-x/y\n     hold the hidden-state offset per placement; inert where allow-discrete transitions aren't supported. */\n  @supports (transition-behavior: allow-discrete) {\n    &[popover] {\n      --tray-slide-x: -100%;\n      --tray-slide-y: 0%;\n      transition:\n        transform 0.2s ease,\n        overlay 0.2s allow-discrete,\n        display 0.2s allow-discrete;\n      transform: translate(0, 0);\n    }\n\n    &[popover]:not(:popover-open) {\n      transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n    }\n\n    @starting-style {\n      &[popover]:popover-open {\n        transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n      }\n    }\n\n    /* Inline placements dock to logical start/end, so the slide direction must mirror under an\n       ancestor [dir=\"rtl\"]; the end-in-rtl override must win, so it needs one extra class of\n       specificity, and the top/bottom resets must come after this generic flip in source order. */\n    [dir=\"rtl\"] & {\n      --tray-slide-x: 100%;\n    }\n\n    &.-placement-end {\n      --tray-slide-x: 100%;\n    }\n\n    [dir=\"rtl\"] &.-placement-end {\n      --tray-slide-x: -100%;\n    }\n\n    &.-placement-top {\n      --tray-slide-x: 0%;\n      --tray-slide-y: -100%;\n    }\n\n    &.-placement-bottom {\n      --tray-slide-x: 0%;\n      --tray-slide-y: 100%;\n    }\n  }\n}\n",
@@ -617,6 +660,11 @@ const treeBrowser$1 = {
 	"canvas": "/**\n * @component tree-browser\n * @selector .pfx-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@scope (.pfx-tree-browser) {\n  & {\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  & details > summary,\n  & .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  & details > summary [class*=\"-icon-\"],\n  & .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  & details > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  /* The disclosure chevron rotates open (same technique as toggle-details). */\n  & 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  & details[open] > summary::before {\n    transform: rotate(90deg);\n  }\n\n  & details > summary:hover,\n  & .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  & details > summary.-selected,\n  & .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  & 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  &.-size-sm details > summary,\n  &.-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  &.-size-lg details > summary,\n  &.-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}\n",
 	"canvasHighContrast": "/**\n * @component tree-browser\n * @selector .pfx-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@scope (.pfx-tree-browser) {\n  & {\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  & details > summary,\n  & .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  & details > summary [class*=\"-icon-\"],\n  & .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  & details > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  /* The disclosure chevron rotates open (same technique as toggle-details). */\n  & 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  & details[open] > summary::before {\n    transform: rotate(90deg);\n  }\n\n  & details > summary:hover,\n  & .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  & details > summary.-selected,\n  & .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  & 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  &.-size-sm details > summary,\n  &.-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  &.-size-lg details > summary,\n  &.-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}\n"
 }.rebrand;
+const view$1 = {
+	"rebrand": "/**\n * @component view\n * @summary The View primitive: a neutral box with key-value modifiers for background, border, radius, shadow, display, position, overflow, and cursor. Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `background`/`border`/`shadow`/`display`/`position`/`overflow`/`cursor` utilities.\n * @selector .pfx-view\n * @modifier -background-primary — Primary surface background.\n * @modifier -background-secondary — Secondary surface background.\n * @modifier -background-primary-inverse — Inverse primary surface background.\n * @modifier -background-brand — Brand surface background.\n * @modifier -background-info — Info surface background.\n * @modifier -background-alert — Alert surface background.\n * @modifier -background-success — Success surface background.\n * @modifier -background-danger — Danger surface background.\n * @modifier -background-warning — Warning surface background.\n * @modifier -background-transparent — Transparent background.\n * @modifier -border-radius-small — Small corner radius.\n * @modifier -border-radius-medium — Medium corner radius.\n * @modifier -border-radius-large — Large corner radius.\n * @modifier -border-radius-circle — Fully circular (50%) radius.\n * @modifier -border-radius-pill — Pill (full) radius.\n * @modifier -border-width-small — Small solid border in the base stroke colour.\n * @modifier -border-width-medium — Medium solid border in the base stroke colour.\n * @modifier -border-width-large — Large solid border in the base stroke colour.\n * @modifier -border-color-primary — Base stroke border colour.\n * @modifier -border-color-brand — Brand stroke border colour.\n * @modifier -border-color-success — Success stroke border colour.\n * @modifier -border-color-info — Info stroke border colour.\n * @modifier -border-color-warning — Warning stroke border colour.\n * @modifier -border-color-danger — Error stroke border colour.\n * @modifier -shadow-resting — Resting elevation shadow.\n * @modifier -shadow-above — Above elevation shadow.\n * @modifier -shadow-topmost — Topmost elevation shadow.\n * @modifier -display-block — display: block.\n * @modifier -display-inline-block — display: inline-block.\n * @modifier -display-inline — display: inline.\n * @modifier -display-flex — display: flex.\n * @modifier -display-inline-flex — display: inline-flex.\n * @modifier -display-none — display: none.\n * @modifier -position-static — position: static.\n * @modifier -position-relative — position: relative.\n * @modifier -position-absolute — position: absolute.\n * @modifier -position-fixed — position: fixed.\n * @modifier -position-sticky — position: sticky.\n * @modifier -overflow-x-visible — overflow-x: visible.\n * @modifier -overflow-x-hidden — overflow-x: hidden.\n * @modifier -overflow-x-auto — overflow-x: auto.\n * @modifier -overflow-x-scroll — overflow-x: scroll.\n * @modifier -overflow-x-clip — overflow-x: clip.\n * @modifier -overflow-y-visible — overflow-y: visible.\n * @modifier -overflow-y-hidden — overflow-y: hidden.\n * @modifier -overflow-y-auto — overflow-y: auto.\n * @modifier -overflow-y-scroll — overflow-y: scroll.\n * @modifier -overflow-y-clip — overflow-y: clip.\n * @modifier -cursor-auto — cursor: auto.\n * @modifier -cursor-default — cursor: default.\n * @modifier -cursor-pointer — cursor: pointer.\n * @modifier -cursor-not-allowed — cursor: not-allowed.\n * @modifier -cursor-text — cursor: text.\n * @modifier -cursor-move — cursor: move.\n * @modifier -cursor-grab — cursor: grab.\n * @modifier -cursor-wait — cursor: wait.\n * @example\n * ```html\n * <div class=\"pfx-view -background-secondary -border-radius-medium -shadow-resting\">\n *   A card-like surface.\n * </div>\n * ```\n */\n@scope (.pfx-view) {\n  & {\n    display: block;\n    box-sizing: border-box;\n  }\n}\n",
+	"canvas": "/**\n * @component view\n * @summary The View primitive: a neutral box with key-value modifiers for background, border, radius, shadow, display, position, overflow, and cursor. Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `background`/`border`/`shadow`/`display`/`position`/`overflow`/`cursor` utilities.\n * @selector .pfx-view\n * @modifier -background-primary — Primary surface background.\n * @modifier -background-secondary — Secondary surface background.\n * @modifier -background-primary-inverse — Inverse primary surface background.\n * @modifier -background-brand — Brand surface background.\n * @modifier -background-info — Info surface background.\n * @modifier -background-alert — Alert surface background.\n * @modifier -background-success — Success surface background.\n * @modifier -background-danger — Danger surface background.\n * @modifier -background-warning — Warning surface background.\n * @modifier -background-transparent — Transparent background.\n * @modifier -border-radius-small — Small corner radius.\n * @modifier -border-radius-medium — Medium corner radius.\n * @modifier -border-radius-large — Large corner radius.\n * @modifier -border-radius-circle — Fully circular (50%) radius.\n * @modifier -border-radius-pill — Pill (full) radius.\n * @modifier -border-width-small — Small solid border in the base stroke colour.\n * @modifier -border-width-medium — Medium solid border in the base stroke colour.\n * @modifier -border-width-large — Large solid border in the base stroke colour.\n * @modifier -border-color-primary — Base stroke border colour.\n * @modifier -border-color-brand — Brand stroke border colour.\n * @modifier -border-color-success — Success stroke border colour.\n * @modifier -border-color-info — Info stroke border colour.\n * @modifier -border-color-warning — Warning stroke border colour.\n * @modifier -border-color-danger — Error stroke border colour.\n * @modifier -shadow-resting — Resting elevation shadow.\n * @modifier -shadow-above — Above elevation shadow.\n * @modifier -shadow-topmost — Topmost elevation shadow.\n * @modifier -display-block — display: block.\n * @modifier -display-inline-block — display: inline-block.\n * @modifier -display-inline — display: inline.\n * @modifier -display-flex — display: flex.\n * @modifier -display-inline-flex — display: inline-flex.\n * @modifier -display-none — display: none.\n * @modifier -position-static — position: static.\n * @modifier -position-relative — position: relative.\n * @modifier -position-absolute — position: absolute.\n * @modifier -position-fixed — position: fixed.\n * @modifier -position-sticky — position: sticky.\n * @modifier -overflow-x-visible — overflow-x: visible.\n * @modifier -overflow-x-hidden — overflow-x: hidden.\n * @modifier -overflow-x-auto — overflow-x: auto.\n * @modifier -overflow-x-scroll — overflow-x: scroll.\n * @modifier -overflow-x-clip — overflow-x: clip.\n * @modifier -overflow-y-visible — overflow-y: visible.\n * @modifier -overflow-y-hidden — overflow-y: hidden.\n * @modifier -overflow-y-auto — overflow-y: auto.\n * @modifier -overflow-y-scroll — overflow-y: scroll.\n * @modifier -overflow-y-clip — overflow-y: clip.\n * @modifier -cursor-auto — cursor: auto.\n * @modifier -cursor-default — cursor: default.\n * @modifier -cursor-pointer — cursor: pointer.\n * @modifier -cursor-not-allowed — cursor: not-allowed.\n * @modifier -cursor-text — cursor: text.\n * @modifier -cursor-move — cursor: move.\n * @modifier -cursor-grab — cursor: grab.\n * @modifier -cursor-wait — cursor: wait.\n * @example\n * ```html\n * <div class=\"pfx-view -background-secondary -border-radius-medium -shadow-resting\">\n *   A card-like surface.\n * </div>\n * ```\n */\n@scope (.pfx-view) {\n  & {\n    display: block;\n    box-sizing: border-box;\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component view\n * @summary The View primitive: a neutral box with key-value modifiers for background, border, radius, shadow, display, position, overflow, and cursor. Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `background`/`border`/`shadow`/`display`/`position`/`overflow`/`cursor` utilities.\n * @selector .pfx-view\n * @modifier -background-primary — Primary surface background.\n * @modifier -background-secondary — Secondary surface background.\n * @modifier -background-primary-inverse — Inverse primary surface background.\n * @modifier -background-brand — Brand surface background.\n * @modifier -background-info — Info surface background.\n * @modifier -background-alert — Alert surface background.\n * @modifier -background-success — Success surface background.\n * @modifier -background-danger — Danger surface background.\n * @modifier -background-warning — Warning surface background.\n * @modifier -background-transparent — Transparent background.\n * @modifier -border-radius-small — Small corner radius.\n * @modifier -border-radius-medium — Medium corner radius.\n * @modifier -border-radius-large — Large corner radius.\n * @modifier -border-radius-circle — Fully circular (50%) radius.\n * @modifier -border-radius-pill — Pill (full) radius.\n * @modifier -border-width-small — Small solid border in the base stroke colour.\n * @modifier -border-width-medium — Medium solid border in the base stroke colour.\n * @modifier -border-width-large — Large solid border in the base stroke colour.\n * @modifier -border-color-primary — Base stroke border colour.\n * @modifier -border-color-brand — Brand stroke border colour.\n * @modifier -border-color-success — Success stroke border colour.\n * @modifier -border-color-info — Info stroke border colour.\n * @modifier -border-color-warning — Warning stroke border colour.\n * @modifier -border-color-danger — Error stroke border colour.\n * @modifier -shadow-resting — Resting elevation shadow.\n * @modifier -shadow-above — Above elevation shadow.\n * @modifier -shadow-topmost — Topmost elevation shadow.\n * @modifier -display-block — display: block.\n * @modifier -display-inline-block — display: inline-block.\n * @modifier -display-inline — display: inline.\n * @modifier -display-flex — display: flex.\n * @modifier -display-inline-flex — display: inline-flex.\n * @modifier -display-none — display: none.\n * @modifier -position-static — position: static.\n * @modifier -position-relative — position: relative.\n * @modifier -position-absolute — position: absolute.\n * @modifier -position-fixed — position: fixed.\n * @modifier -position-sticky — position: sticky.\n * @modifier -overflow-x-visible — overflow-x: visible.\n * @modifier -overflow-x-hidden — overflow-x: hidden.\n * @modifier -overflow-x-auto — overflow-x: auto.\n * @modifier -overflow-x-scroll — overflow-x: scroll.\n * @modifier -overflow-x-clip — overflow-x: clip.\n * @modifier -overflow-y-visible — overflow-y: visible.\n * @modifier -overflow-y-hidden — overflow-y: hidden.\n * @modifier -overflow-y-auto — overflow-y: auto.\n * @modifier -overflow-y-scroll — overflow-y: scroll.\n * @modifier -overflow-y-clip — overflow-y: clip.\n * @modifier -cursor-auto — cursor: auto.\n * @modifier -cursor-default — cursor: default.\n * @modifier -cursor-pointer — cursor: pointer.\n * @modifier -cursor-not-allowed — cursor: not-allowed.\n * @modifier -cursor-text — cursor: text.\n * @modifier -cursor-move — cursor: move.\n * @modifier -cursor-grab — cursor: grab.\n * @modifier -cursor-wait — cursor: wait.\n * @example\n * ```html\n * <div class=\"pfx-view -background-secondary -border-radius-medium -shadow-resting\">\n *   A card-like surface.\n * </div>\n * ```\n */\n@scope (.pfx-view) {\n  & {\n    display: block;\n    box-sizing: border-box;\n  }\n}\n"
+}.rebrand;
 const icon$1 = {
 	"rebrand": "/**\n * @utility icon\n * @selector .pfx-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 * @modifier -icon-* — Set the glyph token (`--pantoken-glyph`) and render it via the shared painter (for example `-icon-search`).\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@scope (.pfx-icon) {\n  & {\n    display: inline-flex;\n  }\n}\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",
 	"canvas": "/**\n * @utility icon\n * @selector .pfx-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 * @modifier -icon-* — Set the glyph token (`--pantoken-glyph`) and render it via the shared painter (for example `-icon-search`).\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@scope (.pfx-icon) {\n  & {\n    display: inline-flex;\n  }\n}\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",
@@ -730,186 +778,12 @@ const breadcrumbLinkCss = breadcrumbLink.css;
 const css = (strings, ...values) => strings.reduce((out, chunk, i) => out + (i ? String(values[i - 1]) : "") + chunk, "");
 //#endregion
 //#region src/components/button/index.ts
-/** The `button` component record: an accessible action control styled from the token palette, primary by default. */
-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. Also sets its own icon/label \`gap\` and horizontal \`padding\`; chaining a \`-gap-*\`/\`-p-*\`/\`-padding-*\` spacing utility modifier overrides those built-in values.
- * @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 rules requiring runtime interpolation — the shared `AI_ICON_MASK` mask value and the
+* `@pantoken/plugin-colors` without-background hover/active washes — can't live in the `.css`-authored record
+* (`button.css`), so they're appended here, scope-relative (`&`), via {@link appendGenerated}.
+*/
+const interpolatedRules = (p) => css`
 /* 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 {
@@ -920,27 +794,8 @@ const button = defineComponent({
   -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 —
+ * Without-background 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
@@ -952,62 +807,11 @@ const button = defineComponent({
 .${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; }`
+`;
+/** The `button` component record: an accessible action control styled from the token palette, primary by default. */
+const button = defineComponent({
+	name: "button",
+	css: (p) => appendGenerated(button$1.replaceAll(SENTINEL, p), interpolatedRules(p))
 });
 /** Standalone `button` stylesheet — the prefixed CSS for the action button, ready to ship as a `.css` file. */
 const buttonCss = button.css;
@@ -1129,92 +933,11 @@ const formFieldMessages = defineComponent({
 /** Standalone `formFieldMessages` stylesheet — the prefixed CSS for the field messages, ready to ship as a `.css` file. */
 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/index.ts
 /** The `heading` component record: heading typography from `-level-h1` through `-level-h6`. */
 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);
-}`
+	css: (p) => heading$1.replaceAll(SENTINEL, p)
 });
 /** Standalone `heading` stylesheet — the prefixed CSS for the heading type, ready to ship as a `.css` file. */
 const headingCss = heading.css;
@@ -1237,157 +960,11 @@ const inPlaceEdit = defineComponent({
 /** Standalone `inPlaceEdit` stylesheet — the prefixed CSS for the in-place editor, ready to ship as a `.css` file. */
 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/index.ts
 /** The `inputGroup` component record: a facade around a text input with leading and trailing icon slots. */
 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; }`
+	css: (p) => inputGroup$1.replaceAll(SENTINEL, p)
 });
 /** Standalone `inputGroup` stylesheet — the prefixed CSS for the input group, ready to ship as a `.css` file. */
 const inputGroupCss = inputGroup.css;
@@ -1513,88 +1090,7 @@ const modalHeaderCss = modalHeader.css;
 /** The `numberInput` component record: a number-input facade with a plus/minus spinner column. */
 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}; }`;
-	}
+	css: (p) => numberInput$1.replaceAll(SENTINEL, p)
 });
 /** Standalone `numberInput` stylesheet — the prefixed CSS for the number input, ready to ship as a `.css` file. */
 const numberInputCss = numberInput.css;
@@ -1711,50 +1207,7 @@ const sideNavBarItemCss = sideNavBarItem.css;
 /** The `simpleSelect` component record: a styled native `<select>` with a caret, matching the text-input states and sizes. */
 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")}; }`;
-	}
+	css: (p) => simpleSelect$1.replaceAll(SENTINEL, p)
 });
 /** Standalone `simpleSelect` stylesheet — the prefixed CSS for the native select, ready to ship as a `.css` file. */
 const simpleSelectCss = simpleSelect.css;
@@ -1880,35 +1333,7 @@ const textCss = text.css;
 /** The `textArea` component record: a styled, resizable native `<textarea>` sharing the text input's states and sizes. */
 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")}; }`;
-	}
+	css: (p) => textArea$1.replaceAll(SENTINEL, p)
 });
 /** Standalone `textArea` stylesheet — the prefixed CSS for the textarea, ready to ship as a `.css` file. */
 const textAreaCss = textArea.css;
@@ -1917,36 +1342,7 @@ const textAreaCss = textArea.css;
 /** The `textInput` component record: a styled native `<input>` — including `date`, `time`, and `datetime-local`, where the browser supplies the picker — with validation states and sizes. */
 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")}; }`;
-	}
+	css: (p) => textInput$1.replaceAll(SENTINEL, p)
 });
 /** Standalone `textInput` stylesheet — the prefixed CSS for the text input, ready to ship as a `.css` file. */
 const textInputCss = textInput.css;
@@ -2004,7 +1400,7 @@ const treeBrowserCss = treeBrowser.css;
 * @module
 */
 /** Generate rules for background modifiers. */
-const buildBackgroundRules = (p, rule) => {
+const buildBackgroundRules = (rule) => {
 	return [...[
 		"primary",
 		"secondary",
@@ -2018,7 +1414,7 @@ const buildBackgroundRules = (p, rule) => {
 	].map((bg) => rule(`background-${bg}`, `background: var(--instui-component-view-background-${bg});`)), rule("background-transparent", "background: transparent;")];
 };
 /** Generate rules for border modifiers (radius, width, color). */
-const buildBorderRules = (p, rule) => {
+const buildBorderRules = (rule) => {
 	const radiusRules = [
 		["small", "var(--instui-border-radius-sm)"],
 		["medium", "var(--instui-border-radius-md)"],
@@ -2046,7 +1442,7 @@ const buildBorderRules = (p, rule) => {
 	];
 };
 /** Generate rules for shadow, display, position, overflow, and cursor modifiers. */
-const buildEnumRules = (p, rule) => {
+const buildEnumRules = (rule) => {
 	const shadowRules = [
 		"resting",
 		"above",
@@ -2096,74 +1492,13 @@ const buildEnumRules = (p, rule) => {
 const view = defineComponent({
 	name: "view",
 	css: (p) => {
-		const rule = (mod, decls) => `.${p}view.-${mod} { ${decls} }`;
-		const rules = [`.${p}view { display: block; box-sizing: border-box; }`];
-		rules.push(...buildBackgroundRules(p, rule));
-		rules.push(...buildBorderRules(p, rule));
-		rules.push(...buildEnumRules(p, rule));
-		return css`/**
- * @component view
- * @summary The View primitive: a neutral box with key-value modifiers for background, border, radius, shadow, display, position, overflow, and cursor. Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the \`background\`/\`border\`/\`shadow\`/\`display\`/\`position\`/\`overflow\`/\`cursor\` utilities.
- * @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")}`;
+		const rule = (mod, decls) => `&.-${mod} { ${decls} }`;
+		const rules = [
+			...buildBackgroundRules(rule),
+			...buildBorderRules(rule),
+			...buildEnumRules(rule)
+		];
+		return appendGenerated(view$1.replaceAll(SENTINEL, p), rules.join("\n"));
 	}
 });
 /** The View component as a standalone, header-wrapped stylesheet. */
@@ -2313,6 +1648,29 @@ function focusOutlineCss(options = {}) {
 	return css`${FOCUS_DOC}\n${tokenSelector} {\n${decls}\n}\n\n${focusOutlineRules$1(options.selector)}\n`;
 }
 //#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/rules/prose/index.ts
 /**
 * The `prose` rule — typographic defaults for raw HTML under a content-root scope. Unlike the other