@pantoken/components 0.7.0 → 1.0.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { ELEVATION_NAMES, FOCUSABLE_SELECTOR, SPACING_AUTO_STEP, SPACING_STEPS, elevationDeclarations, elevationDeclarations as elevationDeclarations$1, focusOutlineDeclarations, focusOutlineDeclarations as focusOutlineDeclarations$1, focusOutlineRules, focusOutlineRules as focusOutlineRules$1 } from "@pantoken/utils";
+import { ELEVATION_NAMES, FOCUSABLE_SELECTOR, SPACING_AUTO_STEP, SPACING_STEPS, elevationDeclarations, elevationDeclarations as elevationDeclarations$1, focusOutlineDeclarations, focusOutlineDeclarations as focusOutlineDeclarations$1, focusOutlineRules, focusOutlineRules as focusOutlineRules$1, globalModifierSelector } from "@pantoken/utils";
 import { alpha, darken } from "@pantoken/plugin-colors";
 import { tokens } from "@pantoken/tokens";
 //#region src/lib/aliases.ts
@@ -98,19 +98,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`;
 /**
-* Emit the three utility selector variants from one canonical modifier token:
-* 1) namespaced utility class + modifier,
-* 2) namespaced bare modifier,
-* 3) bare modifier (or an override for legacy shapes).
-*/
-const utilityVariantSelectors = (baseClass, namespace, modifier, bareSelector = modifier) => [
-	`${baseClass}${modifier}`,
-	`.-${namespace}${modifier}`,
-	bareSelector
-];
-/** Emit one CSS rule from utility selector variants plus a declaration body. */
-const utilityVariantRule = (baseClass, namespace, modifier, declaration, bareSelector) => `${utilityVariantSelectors(baseClass, namespace, modifier, bareSelector).join(", ")} { ${declaration}; }`;
-/**
 * 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`
@@ -305,19 +292,19 @@ 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 * @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 * @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 pfx-mb-md\">\n *   An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n *   Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n  syntax: \"<integer>\";\n  inherits: false;\n  initial-value: 0;\n}\n\n.pfx-alert {\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\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-alert.-color-info {\n  border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n  border-color: var(--instui-component-alert-success-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n  border-color: var(--instui-component-alert-warning-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n  border-color: var(--instui-component-alert-danger-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n   bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n   generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n   sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n  --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n  inline-size: 2.5rem;\n  block-size: auto;\n  background: var(--pantoken-alert-icon-bg);\n  -webkit-mask: none;\n  mask: none;\n}\n",
-	"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 * @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 * @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 pfx-mb-md\">\n *   An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n *   Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n  syntax: \"<integer>\";\n  inherits: false;\n  initial-value: 0;\n}\n\n.pfx-alert {\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\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-alert.-color-info {\n  border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n  border-color: var(--instui-component-alert-success-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n  border-color: var(--instui-component-alert-warning-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n  border-color: var(--instui-component-alert-danger-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n   bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n   generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n   sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n  --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n  inline-size: 2.5rem;\n  block-size: auto;\n  background: var(--pantoken-alert-icon-bg);\n  -webkit-mask: none;\n  mask: none;\n}\n",
-	"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 * @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 * @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 pfx-mb-md\">\n *   An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n *   Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n  syntax: \"<integer>\";\n  inherits: false;\n  initial-value: 0;\n}\n\n.pfx-alert {\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\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-alert.-color-info {\n  border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n  border-color: var(--instui-component-alert-success-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n  border-color: var(--instui-component-alert-warning-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n  border-color: var(--instui-component-alert-danger-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n   bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n   generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n   sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n  --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n  inline-size: 2.5rem;\n  block-size: auto;\n  background: var(--pantoken-alert-icon-bg);\n  -webkit-mask: none;\n  mask: none;\n}\n"
+	"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 * @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 * @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 * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n  syntax: \"<integer>\";\n  inherits: false;\n  initial-value: 0;\n}\n\n.pfx-alert {\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\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-alert.-color-info {\n  border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n  border-color: var(--instui-component-alert-success-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n  border-color: var(--instui-component-alert-warning-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n  border-color: var(--instui-component-alert-danger-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n   bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n   generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n   sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n  --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n  inline-size: 2.5rem;\n  block-size: auto;\n  background: var(--pantoken-alert-icon-bg);\n  -webkit-mask: none;\n  mask: none;\n}\n",
+	"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 * @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 * @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 * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n  syntax: \"<integer>\";\n  inherits: false;\n  initial-value: 0;\n}\n\n.pfx-alert {\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\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-alert.-color-info {\n  border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n  border-color: var(--instui-component-alert-success-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n  border-color: var(--instui-component-alert-warning-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n  border-color: var(--instui-component-alert-danger-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n   bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n   generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n   sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n  --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n  inline-size: 2.5rem;\n  block-size: auto;\n  background: var(--pantoken-alert-icon-bg);\n  -webkit-mask: none;\n  mask: none;\n}\n",
+	"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 * @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 * @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 * </div>\n * ```\n * @structure\n * .pfx-alert {\n *   slot {}\n *   .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n * @sealed\n * @stable\n */\n@property --timeout {\n  syntax: \"<integer>\";\n  inherits: false;\n  initial-value: 0;\n}\n\n.pfx-alert {\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\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-alert.-color-info {\n  border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n  border-color: var(--instui-component-alert-success-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n  border-color: var(--instui-component-alert-warning-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n  border-color: var(--instui-component-alert-danger-border-color);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n   bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n   generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n   sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n  --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n  inline-size: 2.5rem;\n  block-size: auto;\n  background: var(--pantoken-alert-icon-bg);\n  -webkit-mask: none;\n  mask: none;\n}\n"
 }.rebrand;
 const avatar$1 = {
-	"rebrand": "/**\n * @component avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient. 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 instui-me-sm\">LH</span>\n * <span class=\"pfx-avatar -color-ai instui-me-sm\">AI</span>\n * <span class=\"pfx-avatar instui-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.pfx-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-avatar-size-md);\n  height: var(--instui-component-avatar-size-md);\n  border-radius: 50%;\n  overflow: hidden;\n  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\n.pfx-avatar.-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.pfx-avatar:not(:has(> img)) {\n  border-color: var(--instui-component-avatar-border-color);\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/* data-initials: the real name stays as content for accessibility; ::before shows the compact form. */\n.pfx-avatar[data-initials] {\n  font-size: 0;\n}\n\n.pfx-avatar[data-initials]::before {\n  content: attr(data-initials);\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\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.pfx-avatar > img {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n.pfx-avatar.-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@scope (.pfx-avatar) {\n  :scope:not(:has([class*=\"-name\"])) .name,\n  :scope:not(:has(.name)) .first-name,\n  :scope: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",
-	"canvas": "/**\n * @component avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient. 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 instui-me-sm\">LH</span>\n * <span class=\"pfx-avatar -color-ai instui-me-sm\">AI</span>\n * <span class=\"pfx-avatar instui-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.pfx-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-avatar-size-md);\n  height: var(--instui-component-avatar-size-md);\n  border-radius: 50%;\n  overflow: hidden;\n  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\n.pfx-avatar.-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.pfx-avatar:not(:has(> img)) {\n  border-color: var(--instui-component-avatar-border-color);\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/* data-initials: the real name stays as content for accessibility; ::before shows the compact form. */\n.pfx-avatar[data-initials] {\n  font-size: 0;\n}\n\n.pfx-avatar[data-initials]::before {\n  content: attr(data-initials);\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\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.pfx-avatar > img {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n.pfx-avatar.-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@scope (.pfx-avatar) {\n  :scope:not(:has([class*=\"-name\"])) .name,\n  :scope:not(:has(.name)) .first-name,\n  :scope: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",
-	"canvasHighContrast": "/**\n * @component avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient. 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 instui-me-sm\">LH</span>\n * <span class=\"pfx-avatar -color-ai instui-me-sm\">AI</span>\n * <span class=\"pfx-avatar instui-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.pfx-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-avatar-size-md);\n  height: var(--instui-component-avatar-size-md);\n  border-radius: 50%;\n  overflow: hidden;\n  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\n.pfx-avatar.-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.pfx-avatar:not(:has(> img)) {\n  border-color: var(--instui-component-avatar-border-color);\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/* data-initials: the real name stays as content for accessibility; ::before shows the compact form. */\n.pfx-avatar[data-initials] {\n  font-size: 0;\n}\n\n.pfx-avatar[data-initials]::before {\n  content: attr(data-initials);\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\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.pfx-avatar > img {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n.pfx-avatar.-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@scope (.pfx-avatar) {\n  :scope:not(:has([class*=\"-name\"])) .name,\n  :scope:not(:has(.name)) .first-name,\n  :scope: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"
+	"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",
+	"canvas": "/**\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",
+	"canvasHighContrast": "/**\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"
 }.rebrand;
 const badge$1 = {
-	"rebrand": "/**\n * @component badge\n * @summary A small count or status dot placed over a target's corner.\n * @modifier -color-success — A positive/complete count.\n * @modifier -color-danger — An attention/error count.\n * @modifier -color-inverse — On-dark: a light chip with dark text.\n * @modifier -type-notification — A dot only, no count.\n * @modifier -pulse — A pulsing attention ring.\n * @modifier -standalone — Render inline, not positioned over a target's corner.\n * @modifier -placement-top-start — Position at the top-start corner.\n * @modifier -placement-top-end — Position at the top-end corner.\n * @modifier -placement-bottom-start — Position at the bottom-start corner.\n * @modifier -placement-bottom-end — Position at the bottom-end corner.\n * @modifier -placement-start-center — Position centred on the start edge.\n * @modifier -placement-end-center — Position centred on the end edge.\n * @pseudo ::before — The pulsing attention ring drawn in the badge's accent colour (the `-pulse` variant).\n * @cssproperty --pantoken-badge-accent <color> — The chip fill; each `-color-*` variant and the pulse ring read from it.\n * @cssproperty --pantoken-badge-text <color> — The text colour, paired to the accent so it stays legible.\n * @remarks To place a badge over a target, wrap both in a `.pfx-badge-wrapper` (the position anchor) and pin the badge with a `-placement-*` modifier.\n * @animation pantoken-badge-pulse — The pulse ring animation.\n * @example\n * <span class=\"pfx-badge-wrapper\">\n *   <button class=\"pfx-button\">Inbox</button>\n *   <span class=\"pfx-badge -placement-top-end\">4</span>\n * </span>\n * @wrapper pfx-badge-wrapper\n * @structure\n * The badge renders inline on its own, or inside an optional `pfx-badge-wrapper` that anchors it over a target.\n * .pfx-badge-wrapper:opt {\n *   slot {}\n *   .pfx-badge {}\n * }\n * @related pill — The inline label-chip counterpart.\n * @demo self:badge\n */\n@keyframes pantoken-badge-pulse {\n  from {\n    transform: scale(1);\n    opacity: 0.7;\n  }\n  to {\n    transform: scale(1.8);\n    opacity: 0;\n  }\n}\n/* Wrap a target in this so a placed badge can sit over its corner. It contains the badge (rather than\n   being contained by it), so it's a flat prefixed class, not a scoped element. */\n.pfx-badge-wrapper {\n  position: relative;\n  display: inline-flex;\n}\n.pfx-badge {\n  --pantoken-badge-accent: var(--instui-component-badge-color-primary);\n  /* The primary fill is the brand colour, which flips dark→light between light and dark mode; pair the\n     text so it stays legible either way (white on the light-mode navy, dark on the dark-mode light\n     fill). The saturated status fills below keep white text in both modes. */\n  --pantoken-badge-text: light-dark(\n    var(--instui-component-badge-color),\n    var(--instui-component-badge-color-inverse)\n  );\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--instui-component-badge-size);\n  height: var(--instui-component-badge-size);\n  padding: 0 var(--instui-component-badge-padding);\n  font-family: var(--instui-component-badge-font-family);\n  font-size: var(--instui-component-badge-font-size);\n  font-weight: var(--instui-component-badge-font-weight);\n  line-height: 1;\n  border-radius: var(--instui-component-badge-border-radius);\n  background: var(--pantoken-badge-accent);\n  color: var(--pantoken-badge-text);\n}\n.pfx-badge.-color-success {\n  --pantoken-badge-accent: var(--instui-component-badge-color-success);\n  --pantoken-badge-text: var(--instui-component-badge-color);\n}\n.pfx-badge.-color-danger {\n  --pantoken-badge-accent: var(--instui-component-badge-color-danger);\n  --pantoken-badge-text: var(--instui-component-badge-color);\n}\n/* Inverse swaps fill and text (InstUI): a light chip with dark text, for a colour/dark surface. */\n.pfx-badge.-color-inverse {\n  --pantoken-badge-accent: var(--instui-component-badge-color);\n  --pantoken-badge-text: var(--instui-component-badge-color-inverse);\n}\n/* Notification: a small dot, no count. */\n.pfx-badge.-type-notification {\n  min-width: 0;\n  width: var(--instui-spacing-space-sm);\n  height: var(--instui-spacing-space-sm);\n  padding: 0;\n  font-size: 0;\n}\n/* Pulse: an expanding ring in the badge's accent colour (InstUI `pulse`). */\n.pfx-badge.-pulse::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border: var(--instui-border-width-md) solid var(--pantoken-badge-accent);\n  border-radius: inherit;\n  animation: pantoken-badge-pulse 1.2s ease-out infinite;\n}\n/* Placement: position the badge over a `.badge-wrapper` target. InstUI's countOffset is 0.5rem. */\n.pfx-badge.-placement-top-end,\n.pfx-badge.-placement-top-start,\n.pfx-badge.-placement-bottom-end,\n.pfx-badge.-placement-bottom-start,\n.pfx-badge.-placement-start-center,\n.pfx-badge.-placement-end-center {\n  position: absolute;\n}\n.pfx-badge.-placement-top-end {\n  top: -0.5rem;\n  inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-top-start {\n  top: -0.5rem;\n  inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-bottom-end {\n  bottom: -0.5rem;\n  inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-bottom-start {\n  bottom: -0.5rem;\n  inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-end-center {\n  top: 50%;\n  inset-inline-end: -0.5rem;\n  transform: translateY(-50%);\n}\n.pfx-badge.-placement-start-center {\n  top: 50%;\n  inset-inline-start: -0.5rem;\n  transform: translateY(-50%);\n}\n/* Standalone: the inline chip, in flow — resets any placement. */\n.pfx-badge.-standalone {\n  position: relative;\n  inset: auto;\n  transform: none;\n}\n",
-	"canvas": "/**\n * @component badge\n * @summary A small count or status dot placed over a target's corner.\n * @modifier -color-success — A positive/complete count.\n * @modifier -color-danger — An attention/error count.\n * @modifier -color-inverse — On-dark: a light chip with dark text.\n * @modifier -type-notification — A dot only, no count.\n * @modifier -pulse — A pulsing attention ring.\n * @modifier -standalone — Render inline, not positioned over a target's corner.\n * @modifier -placement-top-start — Position at the top-start corner.\n * @modifier -placement-top-end — Position at the top-end corner.\n * @modifier -placement-bottom-start — Position at the bottom-start corner.\n * @modifier -placement-bottom-end — Position at the bottom-end corner.\n * @modifier -placement-start-center — Position centred on the start edge.\n * @modifier -placement-end-center — Position centred on the end edge.\n * @pseudo ::before — The pulsing attention ring drawn in the badge's accent colour (the `-pulse` variant).\n * @cssproperty --pantoken-badge-accent <color> — The chip fill; each `-color-*` variant and the pulse ring read from it.\n * @cssproperty --pantoken-badge-text <color> — The text colour, paired to the accent so it stays legible.\n * @remarks To place a badge over a target, wrap both in a `.pfx-badge-wrapper` (the position anchor) and pin the badge with a `-placement-*` modifier.\n * @animation pantoken-badge-pulse — The pulse ring animation.\n * @example\n * <span class=\"pfx-badge-wrapper\">\n *   <button class=\"pfx-button\">Inbox</button>\n *   <span class=\"pfx-badge -placement-top-end\">4</span>\n * </span>\n * @wrapper pfx-badge-wrapper\n * @structure\n * The badge renders inline on its own, or inside an optional `pfx-badge-wrapper` that anchors it over a target.\n * .pfx-badge-wrapper:opt {\n *   slot {}\n *   .pfx-badge {}\n * }\n * @related pill — The inline label-chip counterpart.\n * @demo self:badge\n */\n@keyframes pantoken-badge-pulse {\n  from {\n    transform: scale(1);\n    opacity: 0.7;\n  }\n  to {\n    transform: scale(1.8);\n    opacity: 0;\n  }\n}\n/* Wrap a target in this so a placed badge can sit over its corner. It contains the badge (rather than\n   being contained by it), so it's a flat prefixed class, not a scoped element. */\n.pfx-badge-wrapper {\n  position: relative;\n  display: inline-flex;\n}\n.pfx-badge {\n  --pantoken-badge-accent: var(--instui-component-badge-color-primary);\n  /* The primary fill is the brand colour, which flips dark→light between light and dark mode; pair the\n     text so it stays legible either way (white on the light-mode navy, dark on the dark-mode light\n     fill). The saturated status fills below keep white text in both modes. */\n  --pantoken-badge-text: light-dark(\n    var(--instui-component-badge-color),\n    var(--instui-component-badge-color-inverse)\n  );\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--instui-component-badge-size);\n  height: var(--instui-component-badge-size);\n  padding: 0 var(--instui-component-badge-padding);\n  font-family: var(--instui-component-badge-font-family);\n  font-size: var(--instui-component-badge-font-size);\n  font-weight: var(--instui-component-badge-font-weight);\n  line-height: 1;\n  border-radius: var(--instui-component-badge-border-radius);\n  background: var(--pantoken-badge-accent);\n  color: var(--pantoken-badge-text);\n}\n.pfx-badge.-color-success {\n  --pantoken-badge-accent: var(--instui-component-badge-color-success);\n  --pantoken-badge-text: var(--instui-component-badge-color);\n}\n.pfx-badge.-color-danger {\n  --pantoken-badge-accent: var(--instui-component-badge-color-danger);\n  --pantoken-badge-text: var(--instui-component-badge-color);\n}\n/* Inverse swaps fill and text (InstUI): a light chip with dark text, for a colour/dark surface. */\n.pfx-badge.-color-inverse {\n  --pantoken-badge-accent: var(--instui-component-badge-color);\n  --pantoken-badge-text: var(--instui-component-badge-color-inverse);\n}\n/* Notification: a small dot, no count. */\n.pfx-badge.-type-notification {\n  min-width: 0;\n  width: var(--instui-spacing-space-sm);\n  height: var(--instui-spacing-space-sm);\n  padding: 0;\n  font-size: 0;\n}\n/* Pulse: an expanding ring in the badge's accent colour (InstUI `pulse`). */\n.pfx-badge.-pulse::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border: var(--instui-border-width-md) solid var(--pantoken-badge-accent);\n  border-radius: inherit;\n  animation: pantoken-badge-pulse 1.2s ease-out infinite;\n}\n/* Placement: position the badge over a `.badge-wrapper` target. InstUI's countOffset is 0.5rem. */\n.pfx-badge.-placement-top-end,\n.pfx-badge.-placement-top-start,\n.pfx-badge.-placement-bottom-end,\n.pfx-badge.-placement-bottom-start,\n.pfx-badge.-placement-start-center,\n.pfx-badge.-placement-end-center {\n  position: absolute;\n}\n.pfx-badge.-placement-top-end {\n  top: -0.5rem;\n  inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-top-start {\n  top: -0.5rem;\n  inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-bottom-end {\n  bottom: -0.5rem;\n  inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-bottom-start {\n  bottom: -0.5rem;\n  inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-end-center {\n  top: 50%;\n  inset-inline-end: -0.5rem;\n  transform: translateY(-50%);\n}\n.pfx-badge.-placement-start-center {\n  top: 50%;\n  inset-inline-start: -0.5rem;\n  transform: translateY(-50%);\n}\n/* Standalone: the inline chip, in flow — resets any placement. */\n.pfx-badge.-standalone {\n  position: relative;\n  inset: auto;\n  transform: none;\n}\n",
-	"canvasHighContrast": "/**\n * @component badge\n * @summary A small count or status dot placed over a target's corner.\n * @modifier -color-success — A positive/complete count.\n * @modifier -color-danger — An attention/error count.\n * @modifier -color-inverse — On-dark: a light chip with dark text.\n * @modifier -type-notification — A dot only, no count.\n * @modifier -pulse — A pulsing attention ring.\n * @modifier -standalone — Render inline, not positioned over a target's corner.\n * @modifier -placement-top-start — Position at the top-start corner.\n * @modifier -placement-top-end — Position at the top-end corner.\n * @modifier -placement-bottom-start — Position at the bottom-start corner.\n * @modifier -placement-bottom-end — Position at the bottom-end corner.\n * @modifier -placement-start-center — Position centred on the start edge.\n * @modifier -placement-end-center — Position centred on the end edge.\n * @pseudo ::before — The pulsing attention ring drawn in the badge's accent colour (the `-pulse` variant).\n * @cssproperty --pantoken-badge-accent <color> — The chip fill; each `-color-*` variant and the pulse ring read from it.\n * @cssproperty --pantoken-badge-text <color> — The text colour, paired to the accent so it stays legible.\n * @remarks To place a badge over a target, wrap both in a `.pfx-badge-wrapper` (the position anchor) and pin the badge with a `-placement-*` modifier.\n * @animation pantoken-badge-pulse — The pulse ring animation.\n * @example\n * <span class=\"pfx-badge-wrapper\">\n *   <button class=\"pfx-button\">Inbox</button>\n *   <span class=\"pfx-badge -placement-top-end\">4</span>\n * </span>\n * @wrapper pfx-badge-wrapper\n * @structure\n * The badge renders inline on its own, or inside an optional `pfx-badge-wrapper` that anchors it over a target.\n * .pfx-badge-wrapper:opt {\n *   slot {}\n *   .pfx-badge {}\n * }\n * @related pill — The inline label-chip counterpart.\n * @demo self:badge\n */\n@keyframes pantoken-badge-pulse {\n  from {\n    transform: scale(1);\n    opacity: 0.7;\n  }\n  to {\n    transform: scale(1.8);\n    opacity: 0;\n  }\n}\n/* Wrap a target in this so a placed badge can sit over its corner. It contains the badge (rather than\n   being contained by it), so it's a flat prefixed class, not a scoped element. */\n.pfx-badge-wrapper {\n  position: relative;\n  display: inline-flex;\n}\n.pfx-badge {\n  --pantoken-badge-accent: var(--instui-component-badge-color-primary);\n  /* The primary fill is the brand colour, which flips dark→light between light and dark mode; pair the\n     text so it stays legible either way (white on the light-mode navy, dark on the dark-mode light\n     fill). The saturated status fills below keep white text in both modes. */\n  --pantoken-badge-text: light-dark(\n    var(--instui-component-badge-color),\n    var(--instui-component-badge-color-inverse)\n  );\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--instui-component-badge-size);\n  height: var(--instui-component-badge-size);\n  padding: 0 var(--instui-component-badge-padding);\n  font-family: var(--instui-component-badge-font-family);\n  font-size: var(--instui-component-badge-font-size);\n  font-weight: var(--instui-component-badge-font-weight);\n  line-height: 1;\n  border-radius: var(--instui-component-badge-border-radius);\n  background: var(--pantoken-badge-accent);\n  color: var(--pantoken-badge-text);\n}\n.pfx-badge.-color-success {\n  --pantoken-badge-accent: var(--instui-component-badge-color-success);\n  --pantoken-badge-text: var(--instui-component-badge-color);\n}\n.pfx-badge.-color-danger {\n  --pantoken-badge-accent: var(--instui-component-badge-color-danger);\n  --pantoken-badge-text: var(--instui-component-badge-color);\n}\n/* Inverse swaps fill and text (InstUI): a light chip with dark text, for a colour/dark surface. */\n.pfx-badge.-color-inverse {\n  --pantoken-badge-accent: var(--instui-component-badge-color);\n  --pantoken-badge-text: var(--instui-component-badge-color-inverse);\n}\n/* Notification: a small dot, no count. */\n.pfx-badge.-type-notification {\n  min-width: 0;\n  width: var(--instui-spacing-space-sm);\n  height: var(--instui-spacing-space-sm);\n  padding: 0;\n  font-size: 0;\n}\n/* Pulse: an expanding ring in the badge's accent colour (InstUI `pulse`). */\n.pfx-badge.-pulse::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border: var(--instui-border-width-md) solid var(--pantoken-badge-accent);\n  border-radius: inherit;\n  animation: pantoken-badge-pulse 1.2s ease-out infinite;\n}\n/* Placement: position the badge over a `.badge-wrapper` target. InstUI's countOffset is 0.5rem. */\n.pfx-badge.-placement-top-end,\n.pfx-badge.-placement-top-start,\n.pfx-badge.-placement-bottom-end,\n.pfx-badge.-placement-bottom-start,\n.pfx-badge.-placement-start-center,\n.pfx-badge.-placement-end-center {\n  position: absolute;\n}\n.pfx-badge.-placement-top-end {\n  top: -0.5rem;\n  inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-top-start {\n  top: -0.5rem;\n  inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-bottom-end {\n  bottom: -0.5rem;\n  inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-bottom-start {\n  bottom: -0.5rem;\n  inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-end-center {\n  top: 50%;\n  inset-inline-end: -0.5rem;\n  transform: translateY(-50%);\n}\n.pfx-badge.-placement-start-center {\n  top: 50%;\n  inset-inline-start: -0.5rem;\n  transform: translateY(-50%);\n}\n/* Standalone: the inline chip, in flow — resets any placement. */\n.pfx-badge.-standalone {\n  position: relative;\n  inset: auto;\n  transform: none;\n}\n"
+	"rebrand": "/**\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",
+	"canvas": "/**\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",
+	"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  /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n  :scope > .hero {\n    display: inline-flex;\n    justify-content: center;\n    margin-block-end: var(--instui-spacing-space-sm);\n    color: var(--instui-color-text-base);\n    font-size: var(--instui-component-icon-illu-md);\n  }\n\n  /* The documented `-icon-*` modifier lives directly on .hero. */\n  :scope > .hero[class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope.-size-sm > .hero {\n    font-size: var(--instui-component-icon-illu-sm);\n  }\n\n  :scope.-size-md > .hero,\n  :scope.-size-medium > .hero {\n    font-size: var(--instui-component-icon-illu-md);\n  }\n\n  :scope.-size-lg > .hero {\n    font-size: var(--instui-component-icon-illu-lg);\n  }\n\n  :scope.-size-large > .hero {\n    font-size: var(--instui-component-icon-illu-lg);\n  }\n\n  :scope.-size-sm > .hero[class*=\"-icon-\"] {\n    font-size: var(--instui-component-icon-illu-sm);\n  }\n\n  :scope.-size-small > .hero[class*=\"-icon-\"] {\n    font-size: var(--instui-component-icon-illu-sm);\n  }\n\n  :scope.-size-md > .hero[class*=\"-icon-\"],\n  :scope.-size-medium > .hero[class*=\"-icon-\"] {\n    font-size: var(--instui-component-icon-illu-md);\n  }\n\n  :scope.-size-lg > .hero[class*=\"-icon-\"] {\n    font-size: var(--instui-component-icon-illu-lg);\n  }\n\n  :scope.-size-large > .hero[class*=\"-icon-\"] {\n    font-size: var(--instui-component-icon-illu-lg);\n  }\n\n  /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n  :scope > .heading {\n    margin: 0 0 var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-base);\n    font-weight: bold;\n    font-size: var(--instui-component-text-font-size-x-x-large);\n  }\n\n  :scope > .message {\n    color: var(--instui-color-text-base);\n    font-size: var(--instui-font-size-text-base);\n  }\n\n  :scope.-clickable:hover > .hero {\n    color: var(--instui-component-link-text-color);\n  }\n\n  :scope.-clickable:active > .hero {\n    color: var(--instui-component-link-on-color-text-color);\n  }\n}\n",
@@ -331,29 +318,29 @@ const breadcrumb$1 = {
 	"canvasHighContrast": "/**\n * @component breadcrumb\n * @selector .pfx-breadcrumb\n * @summary A breadcrumb trail with separators; the last crumb is the current page.\n * @remarks Automatically collapses to a back arrow on small screens. Use `breadcrumb.link` for each crumb.\n * @modifier -size-sm — Small. @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @modifier -size-md — Medium (default). @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @modifier -size-lg — Large. @affects breadcrumb.link — Scales the crumb separator's spacing to match.\n * @a11y Wrap the `<ol>` in a `<nav aria-label>` landmark; mark the current page's crumb with `aria-current=\"page\"`.\n * @structure\n * .pfx-breadcrumb {\n *   ol {\n *     li:one-or-more {}\n *   }\n * }\n * @example\n * ```html\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n *   <ol>\n *     <li>\n *       <a class=\"-icon-house\" href=\"#\">Home</a>\n *     </li>\n *     <li><a href=\"#\">Guides</a></li>\n *     <li><a href=\"#\">Components</a></li>\n *     <li aria-current=\"page\">Breadcrumb</li>\n *   </ol>\n * </nav>\n * ```\n * @sealed\n * @stable\n */\n\n.pfx-breadcrumb {\n  display: block;\n}\n\n/* Hide the breadcrumb if it has no links. */\n.pfx-breadcrumb:not(:has(> ol > li > a)) {\n  display: none;\n}\n\n.pfx-breadcrumb > ol {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  gap: var(--instui-component-breadcrumb-gap-md);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm > ol {\n  gap: var(--instui-component-breadcrumb-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-md > ol {\n  gap: var(--instui-component-breadcrumb-gap-md);\n  font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-lg > ol {\n  gap: var(--instui-component-breadcrumb-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n}\n"
 }.rebrand;
 const breadcrumbLink$1 = {
-	"rebrand": "/**\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 * @scope (.pfx-breadcrumb) {\n *   li {\n *     a { }\n *   }\n * }\n * @sealed\n * @stable\n */\n\n@scope (.pfx-breadcrumb) {\n  :scope.-size-sm li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n  }\n\n  :scope.-size-md li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n  }\n\n  :scope.-size-lg li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n  }\n\n  :scope > ol > li {\n    margin: 0;\n  }\n\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a[class*=\"-icon-\"]::before {\n    margin-inline-end: var(--instui-spacing-space2xs);\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope li:not(:last-child) {\n    color: var(--instui-color-text-muted);\n  }\n\n  :scope 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\"] :scope 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    :scope > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n      display: none;\n    }\n\n    :scope li:not(:last-child)::after {\n      display: none;\n    }\n\n    :scope 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\"] :scope > 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",
-	"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 * @scope (.pfx-breadcrumb) {\n *   li {\n *     a { }\n *   }\n * }\n * @sealed\n * @stable\n */\n\n@scope (.pfx-breadcrumb) {\n  :scope.-size-sm li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n  }\n\n  :scope.-size-md li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n  }\n\n  :scope.-size-lg li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n  }\n\n  :scope > ol > li {\n    margin: 0;\n  }\n\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a[class*=\"-icon-\"]::before {\n    margin-inline-end: var(--instui-spacing-space2xs);\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope li:not(:last-child) {\n    color: var(--instui-color-text-muted);\n  }\n\n  :scope 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\"] :scope 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    :scope > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n      display: none;\n    }\n\n    :scope li:not(:last-child)::after {\n      display: none;\n    }\n\n    :scope 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\"] :scope > 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",
-	"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 * @scope (.pfx-breadcrumb) {\n *   li {\n *     a { }\n *   }\n * }\n * @sealed\n * @stable\n */\n\n@scope (.pfx-breadcrumb) {\n  :scope.-size-sm li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n  }\n\n  :scope.-size-md li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n  }\n\n  :scope.-size-lg li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n  }\n\n  :scope > ol > li {\n    margin: 0;\n  }\n\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a[class*=\"-icon-\"]::before {\n    margin-inline-end: var(--instui-spacing-space2xs);\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope li:not(:last-child) {\n    color: var(--instui-color-text-muted);\n  }\n\n  :scope 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\"] :scope 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    :scope > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n      display: none;\n    }\n\n    :scope li:not(:last-child)::after {\n      display: none;\n    }\n\n    :scope 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\"] :scope > 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"
+	"rebrand": "/**\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.-size-sm li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n  }\n\n  :scope.-size-md li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n  }\n\n  :scope.-size-lg li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n  }\n\n  :scope > ol > li {\n    margin: 0;\n  }\n\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a[class*=\"-icon-\"]::before {\n    margin-inline-end: var(--instui-spacing-space2xs);\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope li:not(:last-child) {\n    color: var(--instui-color-text-muted);\n  }\n\n  :scope 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\"] :scope 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    :scope > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n      display: none;\n    }\n\n    :scope li:not(:last-child)::after {\n      display: none;\n    }\n\n    :scope 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\"] :scope > 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",
+	"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.-size-sm li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n  }\n\n  :scope.-size-md li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n  }\n\n  :scope.-size-lg li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n  }\n\n  :scope > ol > li {\n    margin: 0;\n  }\n\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a[class*=\"-icon-\"]::before {\n    margin-inline-end: var(--instui-spacing-space2xs);\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope li:not(:last-child) {\n    color: var(--instui-color-text-muted);\n  }\n\n  :scope 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\"] :scope 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    :scope > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n      display: none;\n    }\n\n    :scope li:not(:last-child)::after {\n      display: none;\n    }\n\n    :scope 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\"] :scope > 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",
+	"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.-size-sm li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n  }\n\n  :scope.-size-md li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n  }\n\n  :scope.-size-lg li:not(:last-child)::after {\n    margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n  }\n\n  :scope > ol > li {\n    margin: 0;\n  }\n\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a[class*=\"-icon-\"]::before {\n    margin-inline-end: var(--instui-spacing-space2xs);\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope li:not(:last-child) {\n    color: var(--instui-color-text-muted);\n  }\n\n  :scope 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\"] :scope 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    :scope > ol:has(> li:nth-last-child(2)) > li:not(:nth-last-child(2)) {\n      display: none;\n    }\n\n    :scope li:not(:last-child)::after {\n      display: none;\n    }\n\n    :scope 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\"] :scope > 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"
 }.rebrand;
 const byline$1 = {
-	"rebrand": "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @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 * <div class=\"pfx-byline -size-md\">\n *   <span class=\"pfx-icon -icon-megaphone\"></span>\n *   <div>\n *     <div class=\"title\">What's new</div>\n *     <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n *   </div>\n * </div>\n * @structure\n * .pfx-byline {\n *   [class*=\"-icon-\"]:optional {}\n *   div {\n *     .title {}\n *     .description {}\n *   }\n * }\n */\n.pfx-byline {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-byline-figure-margin);\n  background: var(--instui-component-byline-background);\n  color: var(--instui-component-byline-color);\n  font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n  align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n  align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n   (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n  max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n  max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n  max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n  :scope > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  .title {\n    margin: 0 0 var(--instui-component-byline-title-margin);\n    font-size: var(--instui-component-byline-title-font-size);\n    font-weight: var(--instui-component-byline-title-font-weight);\n    line-height: var(--instui-component-byline-title-line-height);\n  }\n\n  .description {\n    font-size: var(--instui-component-byline-description-font-size);\n    font-weight: var(--instui-component-byline-description-font-weight);\n    line-height: var(--instui-component-byline-description-line-height);\n  }\n}\n",
-	"canvas": "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @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 * <div class=\"pfx-byline -size-md\">\n *   <span class=\"pfx-icon -icon-megaphone\"></span>\n *   <div>\n *     <div class=\"title\">What's new</div>\n *     <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n *   </div>\n * </div>\n * @structure\n * .pfx-byline {\n *   [class*=\"-icon-\"]:optional {}\n *   div {\n *     .title {}\n *     .description {}\n *   }\n * }\n */\n.pfx-byline {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-byline-figure-margin);\n  background: var(--instui-component-byline-background);\n  color: var(--instui-component-byline-color);\n  font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n  align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n  align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n   (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n  max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n  max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n  max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n  :scope > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  .title {\n    margin: 0 0 var(--instui-component-byline-title-margin);\n    font-size: var(--instui-component-byline-title-font-size);\n    font-weight: var(--instui-component-byline-title-font-weight);\n    line-height: var(--instui-component-byline-title-line-height);\n  }\n\n  .description {\n    font-size: var(--instui-component-byline-description-font-size);\n    font-weight: var(--instui-component-byline-description-font-weight);\n    line-height: var(--instui-component-byline-description-line-height);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @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 * <div class=\"pfx-byline -size-md\">\n *   <span class=\"pfx-icon -icon-megaphone\"></span>\n *   <div>\n *     <div class=\"title\">What's new</div>\n *     <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n *   </div>\n * </div>\n * @structure\n * .pfx-byline {\n *   [class*=\"-icon-\"]:optional {}\n *   div {\n *     .title {}\n *     .description {}\n *   }\n * }\n */\n.pfx-byline {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-byline-figure-margin);\n  background: var(--instui-component-byline-background);\n  color: var(--instui-component-byline-color);\n  font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n  align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n  align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n   (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n  max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n  max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n  max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n  :scope > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  .title {\n    margin: 0 0 var(--instui-component-byline-title-margin);\n    font-size: var(--instui-component-byline-title-font-size);\n    font-weight: var(--instui-component-byline-title-font-weight);\n    line-height: var(--instui-component-byline-title-line-height);\n  }\n\n  .description {\n    font-size: var(--instui-component-byline-description-font-size);\n    font-weight: var(--instui-component-byline-description-font-weight);\n    line-height: var(--instui-component-byline-description-line-height);\n  }\n}\n"
+	"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",
+	"canvasHighContrast": "/**\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"
 }.rebrand;
 const calendar$1 = {
-	"rebrand": "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @remarks See the `calendar.day` member for the individual day cells.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n *   <div class=\"nav\">\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n *     <strong>March 2026</strong>\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n *   </div>\n *   <div class=\"grid\">\n *     <span class=\"weekday\">Su</span>\n *     <span class=\"weekday\">Mo</span>\n *     <span class=\"weekday\">Tu</span>\n *     <span class=\"weekday\">We</span>\n *     <span class=\"weekday\">Th</span>\n *     <span class=\"weekday\">Fr</span>\n *     <span class=\"weekday\">Sa</span>\n *     <span class=\"day -outside-month\">23</span>\n *     <span class=\"day -outside-month\">24</span>\n *     <span class=\"day -outside-month\">25</span>\n *     <span class=\"day -outside-month\">26</span>\n *     <span class=\"day -outside-month\">27</span>\n *     <span class=\"day -outside-month\">28</span>\n *     <span class=\"day\">1</span>\n *     <span class=\"day\">2</span>\n *     <span class=\"day\">3</span>\n *     <span class=\"day\">4</span>\n *     <span class=\"day\">5</span>\n *     <span class=\"day\">6</span>\n *     <span class=\"day -today\">7</span>\n *     <span class=\"day\">8</span>\n *     <span class=\"day\">9</span>\n *     <span class=\"day\">10</span>\n *     <span class=\"day\">11</span>\n *     <span class=\"day -selected\">12</span>\n *     <span class=\"day\">13</span>\n *     <span class=\"day\">14</span>\n *     <span class=\"day\">15</span>\n *   </div>\n * </div>\n * @structure\n * .pfx-calendar {\n *   .nav {\n *     .pfx-button {}\n *     strong {}\n *   }\n *   .grid {\n *     .weekday {}\n *   }\n * }\n */\n.pfx-calendar {\n  display: inline-block;\n  text-align: center;\n  background: var(--instui-component-calendar-background);\n  color: var(--instui-component-calendar-color);\n  font-family: var(--instui-component-calendar-font-family);\n  font-size: var(--instui-component-calendar-font-size);\n  font-weight: var(--instui-component-calendar-font-weight);\n  line-height: var(--instui-component-calendar-line-height);\n}\n\n@scope (.pfx-calendar) {\n  /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n   only spaces the row below itself, so margin is block-end only — no inline inset). */\n  :scope > .nav {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-block-end: var(--instui-component-calendar-nav-margin);\n  }\n\n  /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n   off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n   whose day table spaces cells with the browser-default border-spacing in both directions. */\n  :scope > .grid {\n    display: grid;\n    grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n    justify-content: center;\n    gap: var(--instui-spacing-space2xs);\n  }\n\n  .weekday {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n    font-weight: var(--instui-font-weight-interactive);\n  }\n}\n",
-	"canvas": "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @remarks See the `calendar.day` member for the individual day cells.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n *   <div class=\"nav\">\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n *     <strong>March 2026</strong>\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n *   </div>\n *   <div class=\"grid\">\n *     <span class=\"weekday\">Su</span>\n *     <span class=\"weekday\">Mo</span>\n *     <span class=\"weekday\">Tu</span>\n *     <span class=\"weekday\">We</span>\n *     <span class=\"weekday\">Th</span>\n *     <span class=\"weekday\">Fr</span>\n *     <span class=\"weekday\">Sa</span>\n *     <span class=\"day -outside-month\">23</span>\n *     <span class=\"day -outside-month\">24</span>\n *     <span class=\"day -outside-month\">25</span>\n *     <span class=\"day -outside-month\">26</span>\n *     <span class=\"day -outside-month\">27</span>\n *     <span class=\"day -outside-month\">28</span>\n *     <span class=\"day\">1</span>\n *     <span class=\"day\">2</span>\n *     <span class=\"day\">3</span>\n *     <span class=\"day\">4</span>\n *     <span class=\"day\">5</span>\n *     <span class=\"day\">6</span>\n *     <span class=\"day -today\">7</span>\n *     <span class=\"day\">8</span>\n *     <span class=\"day\">9</span>\n *     <span class=\"day\">10</span>\n *     <span class=\"day\">11</span>\n *     <span class=\"day -selected\">12</span>\n *     <span class=\"day\">13</span>\n *     <span class=\"day\">14</span>\n *     <span class=\"day\">15</span>\n *   </div>\n * </div>\n * @structure\n * .pfx-calendar {\n *   .nav {\n *     .pfx-button {}\n *     strong {}\n *   }\n *   .grid {\n *     .weekday {}\n *   }\n * }\n */\n.pfx-calendar {\n  display: inline-block;\n  text-align: center;\n  background: var(--instui-component-calendar-background);\n  color: var(--instui-component-calendar-color);\n  font-family: var(--instui-component-calendar-font-family);\n  font-size: var(--instui-component-calendar-font-size);\n  font-weight: var(--instui-component-calendar-font-weight);\n  line-height: var(--instui-component-calendar-line-height);\n}\n\n@scope (.pfx-calendar) {\n  /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n   only spaces the row below itself, so margin is block-end only — no inline inset). */\n  :scope > .nav {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-block-end: var(--instui-component-calendar-nav-margin);\n  }\n\n  /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n   off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n   whose day table spaces cells with the browser-default border-spacing in both directions. */\n  :scope > .grid {\n    display: grid;\n    grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n    justify-content: center;\n    gap: var(--instui-spacing-space2xs);\n  }\n\n  .weekday {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n    font-weight: var(--instui-font-weight-interactive);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @remarks See the `calendar.day` member for the individual day cells.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n *   <div class=\"nav\">\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n *     <strong>March 2026</strong>\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n *   </div>\n *   <div class=\"grid\">\n *     <span class=\"weekday\">Su</span>\n *     <span class=\"weekday\">Mo</span>\n *     <span class=\"weekday\">Tu</span>\n *     <span class=\"weekday\">We</span>\n *     <span class=\"weekday\">Th</span>\n *     <span class=\"weekday\">Fr</span>\n *     <span class=\"weekday\">Sa</span>\n *     <span class=\"day -outside-month\">23</span>\n *     <span class=\"day -outside-month\">24</span>\n *     <span class=\"day -outside-month\">25</span>\n *     <span class=\"day -outside-month\">26</span>\n *     <span class=\"day -outside-month\">27</span>\n *     <span class=\"day -outside-month\">28</span>\n *     <span class=\"day\">1</span>\n *     <span class=\"day\">2</span>\n *     <span class=\"day\">3</span>\n *     <span class=\"day\">4</span>\n *     <span class=\"day\">5</span>\n *     <span class=\"day\">6</span>\n *     <span class=\"day -today\">7</span>\n *     <span class=\"day\">8</span>\n *     <span class=\"day\">9</span>\n *     <span class=\"day\">10</span>\n *     <span class=\"day\">11</span>\n *     <span class=\"day -selected\">12</span>\n *     <span class=\"day\">13</span>\n *     <span class=\"day\">14</span>\n *     <span class=\"day\">15</span>\n *   </div>\n * </div>\n * @structure\n * .pfx-calendar {\n *   .nav {\n *     .pfx-button {}\n *     strong {}\n *   }\n *   .grid {\n *     .weekday {}\n *   }\n * }\n */\n.pfx-calendar {\n  display: inline-block;\n  text-align: center;\n  background: var(--instui-component-calendar-background);\n  color: var(--instui-component-calendar-color);\n  font-family: var(--instui-component-calendar-font-family);\n  font-size: var(--instui-component-calendar-font-size);\n  font-weight: var(--instui-component-calendar-font-weight);\n  line-height: var(--instui-component-calendar-line-height);\n}\n\n@scope (.pfx-calendar) {\n  /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n   only spaces the row below itself, so margin is block-end only — no inline inset). */\n  :scope > .nav {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-block-end: var(--instui-component-calendar-nav-margin);\n  }\n\n  /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n   off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n   whose day table spaces cells with the browser-default border-spacing in both directions. */\n  :scope > .grid {\n    display: grid;\n    grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n    justify-content: center;\n    gap: var(--instui-spacing-space2xs);\n  }\n\n  .weekday {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n    font-weight: var(--instui-font-weight-interactive);\n  }\n}\n"
+	"rebrand": "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @remarks See the `calendar.day` member for the individual day cells.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n *   <div class=\"nav\">\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n *     <strong>March 2026</strong>\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n *   </div>\n *   <div class=\"grid\">\n *     <span class=\"weekday\">Su</span>\n *     <span class=\"weekday\">Mo</span>\n *     <span class=\"weekday\">Tu</span>\n *     <span class=\"weekday\">We</span>\n *     <span class=\"weekday\">Th</span>\n *     <span class=\"weekday\">Fr</span>\n *     <span class=\"weekday\">Sa</span>\n *     <span class=\"day -outside-month\">23</span>\n *     <span class=\"day -outside-month\">24</span>\n *     <span class=\"day -outside-month\">25</span>\n *     <span class=\"day -outside-month\">26</span>\n *     <span class=\"day -outside-month\">27</span>\n *     <span class=\"day -outside-month\">28</span>\n *     <span class=\"day\">1</span>\n *     <span class=\"day\">2</span>\n *     <span class=\"day\">3</span>\n *     <span class=\"day\">4</span>\n *     <span class=\"day\">5</span>\n *     <span class=\"day\">6</span>\n *     <span class=\"day -today\">7</span>\n *     <span class=\"day\">8</span>\n *     <span class=\"day\">9</span>\n *     <span class=\"day\">10</span>\n *     <span class=\"day\">11</span>\n *     <span class=\"day -selected\">12</span>\n *     <span class=\"day\">13</span>\n *     <span class=\"day\">14</span>\n *     <span class=\"day\">15</span>\n *   </div>\n * </div>\n * @structure\n * .pfx-calendar {\n *   .nav {\n *     .pfx-button {}\n *     strong {}\n *   }\n *   .grid {\n *     .weekday {}\n *     .day:many {}\n *   }\n * }\n */\n.pfx-calendar {\n  display: inline-block;\n  text-align: center;\n  background: var(--instui-component-calendar-background);\n  color: var(--instui-component-calendar-color);\n  font-family: var(--instui-component-calendar-font-family);\n  font-size: var(--instui-component-calendar-font-size);\n  font-weight: var(--instui-component-calendar-font-weight);\n  line-height: var(--instui-component-calendar-line-height);\n}\n\n@scope (.pfx-calendar) {\n  /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n   only spaces the row below itself, so margin is block-end only — no inline inset). */\n  :scope > .nav {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-block-end: var(--instui-component-calendar-nav-margin);\n  }\n\n  /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n   off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n   whose day table spaces cells with the browser-default border-spacing in both directions. */\n  :scope > .grid {\n    display: grid;\n    grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n    justify-content: center;\n    gap: var(--instui-spacing-space2xs);\n  }\n\n  .weekday {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n    font-weight: var(--instui-font-weight-interactive);\n  }\n}\n",
+	"canvas": "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @remarks See the `calendar.day` member for the individual day cells.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n *   <div class=\"nav\">\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n *     <strong>March 2026</strong>\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n *   </div>\n *   <div class=\"grid\">\n *     <span class=\"weekday\">Su</span>\n *     <span class=\"weekday\">Mo</span>\n *     <span class=\"weekday\">Tu</span>\n *     <span class=\"weekday\">We</span>\n *     <span class=\"weekday\">Th</span>\n *     <span class=\"weekday\">Fr</span>\n *     <span class=\"weekday\">Sa</span>\n *     <span class=\"day -outside-month\">23</span>\n *     <span class=\"day -outside-month\">24</span>\n *     <span class=\"day -outside-month\">25</span>\n *     <span class=\"day -outside-month\">26</span>\n *     <span class=\"day -outside-month\">27</span>\n *     <span class=\"day -outside-month\">28</span>\n *     <span class=\"day\">1</span>\n *     <span class=\"day\">2</span>\n *     <span class=\"day\">3</span>\n *     <span class=\"day\">4</span>\n *     <span class=\"day\">5</span>\n *     <span class=\"day\">6</span>\n *     <span class=\"day -today\">7</span>\n *     <span class=\"day\">8</span>\n *     <span class=\"day\">9</span>\n *     <span class=\"day\">10</span>\n *     <span class=\"day\">11</span>\n *     <span class=\"day -selected\">12</span>\n *     <span class=\"day\">13</span>\n *     <span class=\"day\">14</span>\n *     <span class=\"day\">15</span>\n *   </div>\n * </div>\n * @structure\n * .pfx-calendar {\n *   .nav {\n *     .pfx-button {}\n *     strong {}\n *   }\n *   .grid {\n *     .weekday {}\n *     .day:many {}\n *   }\n * }\n */\n.pfx-calendar {\n  display: inline-block;\n  text-align: center;\n  background: var(--instui-component-calendar-background);\n  color: var(--instui-component-calendar-color);\n  font-family: var(--instui-component-calendar-font-family);\n  font-size: var(--instui-component-calendar-font-size);\n  font-weight: var(--instui-component-calendar-font-weight);\n  line-height: var(--instui-component-calendar-line-height);\n}\n\n@scope (.pfx-calendar) {\n  /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n   only spaces the row below itself, so margin is block-end only — no inline inset). */\n  :scope > .nav {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-block-end: var(--instui-component-calendar-nav-margin);\n  }\n\n  /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n   off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n   whose day table spaces cells with the browser-default border-spacing in both directions. */\n  :scope > .grid {\n    display: grid;\n    grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n    justify-content: center;\n    gap: var(--instui-spacing-space2xs);\n  }\n\n  .weekday {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n    font-weight: var(--instui-font-weight-interactive);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @remarks See the `calendar.day` member for the individual day cells.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n *   <div class=\"nav\">\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n *     <strong>March 2026</strong>\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n *   </div>\n *   <div class=\"grid\">\n *     <span class=\"weekday\">Su</span>\n *     <span class=\"weekday\">Mo</span>\n *     <span class=\"weekday\">Tu</span>\n *     <span class=\"weekday\">We</span>\n *     <span class=\"weekday\">Th</span>\n *     <span class=\"weekday\">Fr</span>\n *     <span class=\"weekday\">Sa</span>\n *     <span class=\"day -outside-month\">23</span>\n *     <span class=\"day -outside-month\">24</span>\n *     <span class=\"day -outside-month\">25</span>\n *     <span class=\"day -outside-month\">26</span>\n *     <span class=\"day -outside-month\">27</span>\n *     <span class=\"day -outside-month\">28</span>\n *     <span class=\"day\">1</span>\n *     <span class=\"day\">2</span>\n *     <span class=\"day\">3</span>\n *     <span class=\"day\">4</span>\n *     <span class=\"day\">5</span>\n *     <span class=\"day\">6</span>\n *     <span class=\"day -today\">7</span>\n *     <span class=\"day\">8</span>\n *     <span class=\"day\">9</span>\n *     <span class=\"day\">10</span>\n *     <span class=\"day\">11</span>\n *     <span class=\"day -selected\">12</span>\n *     <span class=\"day\">13</span>\n *     <span class=\"day\">14</span>\n *     <span class=\"day\">15</span>\n *   </div>\n * </div>\n * @structure\n * .pfx-calendar {\n *   .nav {\n *     .pfx-button {}\n *     strong {}\n *   }\n *   .grid {\n *     .weekday {}\n *     .day:many {}\n *   }\n * }\n */\n.pfx-calendar {\n  display: inline-block;\n  text-align: center;\n  background: var(--instui-component-calendar-background);\n  color: var(--instui-component-calendar-color);\n  font-family: var(--instui-component-calendar-font-family);\n  font-size: var(--instui-component-calendar-font-size);\n  font-weight: var(--instui-component-calendar-font-weight);\n  line-height: var(--instui-component-calendar-line-height);\n}\n\n@scope (.pfx-calendar) {\n  /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n   only spaces the row below itself, so margin is block-end only — no inline inset). */\n  :scope > .nav {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-block-end: var(--instui-component-calendar-nav-margin);\n  }\n\n  /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n   off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n   whose day table spaces cells with the browser-default border-spacing in both directions. */\n  :scope > .grid {\n    display: grid;\n    grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n    justify-content: center;\n    gap: var(--instui-spacing-space2xs);\n  }\n\n  .weekday {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n    font-weight: var(--instui-font-weight-interactive);\n  }\n}\n"
 }.rebrand;
 const calendarDay$1 = {
-	"rebrand": "/**\n * @component calendar.day\n * @memberOf calendar\n * @selector .day\n * @summary A day cell (InstUI `Calendar.Day`); `-today`, `-selected`, and `-outside-month` mark its state.\n * @modifier -today — Today's date.\n * @modifier -selected — The selected date.\n * @modifier -outside-month — A day from the adjacent month (leading/trailing filler).\n * @structure\n * @scope (.pfx-calendar) {\n *   .day {}\n * }\n */\n@scope (.pfx-calendar) {\n  .day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n    font-size: var(--instui-component-calendar-day-font-size);\n    color: var(--instui-component-calendar-day-color);\n    background: var(--instui-component-calendar-day-background);\n    cursor: pointer;\n  }\n\n  .day.-outside-month {\n    color: var(--instui-component-calendar-day-outside-month-color);\n  }\n\n  .day.-today {\n    background: var(--instui-component-calendar-day-today-background);\n    color: var(--instui-component-calendar-day-today-color);\n    border-radius: var(--instui-component-calendar-day-today-border-radius);\n  }\n\n  .day.-selected {\n    background: var(--instui-component-calendar-day-selected-background);\n    color: var(--instui-component-calendar-day-selected-color);\n    border-radius: var(--instui-component-calendar-day-selected-border-radius);\n  }\n}\n",
-	"canvas": "/**\n * @component calendar.day\n * @memberOf calendar\n * @selector .day\n * @summary A day cell (InstUI `Calendar.Day`); `-today`, `-selected`, and `-outside-month` mark its state.\n * @modifier -today — Today's date.\n * @modifier -selected — The selected date.\n * @modifier -outside-month — A day from the adjacent month (leading/trailing filler).\n * @structure\n * @scope (.pfx-calendar) {\n *   .day {}\n * }\n */\n@scope (.pfx-calendar) {\n  .day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n    font-size: var(--instui-component-calendar-day-font-size);\n    color: var(--instui-component-calendar-day-color);\n    background: var(--instui-component-calendar-day-background);\n    cursor: pointer;\n  }\n\n  .day.-outside-month {\n    color: var(--instui-component-calendar-day-outside-month-color);\n  }\n\n  .day.-today {\n    background: var(--instui-component-calendar-day-today-background);\n    color: var(--instui-component-calendar-day-today-color);\n    border-radius: var(--instui-component-calendar-day-today-border-radius);\n  }\n\n  .day.-selected {\n    background: var(--instui-component-calendar-day-selected-background);\n    color: var(--instui-component-calendar-day-selected-color);\n    border-radius: var(--instui-component-calendar-day-selected-border-radius);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component calendar.day\n * @memberOf calendar\n * @selector .day\n * @summary A day cell (InstUI `Calendar.Day`); `-today`, `-selected`, and `-outside-month` mark its state.\n * @modifier -today — Today's date.\n * @modifier -selected — The selected date.\n * @modifier -outside-month — A day from the adjacent month (leading/trailing filler).\n * @structure\n * @scope (.pfx-calendar) {\n *   .day {}\n * }\n */\n@scope (.pfx-calendar) {\n  .day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n    font-size: var(--instui-component-calendar-day-font-size);\n    color: var(--instui-component-calendar-day-color);\n    background: var(--instui-component-calendar-day-background);\n    cursor: pointer;\n  }\n\n  .day.-outside-month {\n    color: var(--instui-component-calendar-day-outside-month-color);\n  }\n\n  .day.-today {\n    background: var(--instui-component-calendar-day-today-background);\n    color: var(--instui-component-calendar-day-today-color);\n    border-radius: var(--instui-component-calendar-day-today-border-radius);\n  }\n\n  .day.-selected {\n    background: var(--instui-component-calendar-day-selected-background);\n    color: var(--instui-component-calendar-day-selected-color);\n    border-radius: var(--instui-component-calendar-day-selected-border-radius);\n  }\n}\n"
+	"rebrand": "/**\n * @component calendar.day\n * @memberOf calendar\n * @selector .day\n * @summary A day cell (InstUI `Calendar.Day`); `-today`, `-selected`, and `-outside-month` mark its state.\n * @modifier -today — Today's date.\n * @modifier -selected — The selected date.\n * @modifier -outside-month — A day from the adjacent month (leading/trailing filler).\n * @structure\n * @component calendar {\n *   .grid {\n *     .day {}\n *   }\n * }\n */\n@scope (.pfx-calendar) {\n  .day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n    font-size: var(--instui-component-calendar-day-font-size);\n    color: var(--instui-component-calendar-day-color);\n    background: var(--instui-component-calendar-day-background);\n    cursor: pointer;\n  }\n\n  .day.-outside-month {\n    color: var(--instui-component-calendar-day-outside-month-color);\n  }\n\n  .day.-today {\n    background: var(--instui-component-calendar-day-today-background);\n    color: var(--instui-component-calendar-day-today-color);\n    border-radius: var(--instui-component-calendar-day-today-border-radius);\n  }\n\n  .day.-selected {\n    background: var(--instui-component-calendar-day-selected-background);\n    color: var(--instui-component-calendar-day-selected-color);\n    border-radius: var(--instui-component-calendar-day-selected-border-radius);\n  }\n}\n",
+	"canvas": "/**\n * @component calendar.day\n * @memberOf calendar\n * @selector .day\n * @summary A day cell (InstUI `Calendar.Day`); `-today`, `-selected`, and `-outside-month` mark its state.\n * @modifier -today — Today's date.\n * @modifier -selected — The selected date.\n * @modifier -outside-month — A day from the adjacent month (leading/trailing filler).\n * @structure\n * @component calendar {\n *   .grid {\n *     .day {}\n *   }\n * }\n */\n@scope (.pfx-calendar) {\n  .day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n    font-size: var(--instui-component-calendar-day-font-size);\n    color: var(--instui-component-calendar-day-color);\n    background: var(--instui-component-calendar-day-background);\n    cursor: pointer;\n  }\n\n  .day.-outside-month {\n    color: var(--instui-component-calendar-day-outside-month-color);\n  }\n\n  .day.-today {\n    background: var(--instui-component-calendar-day-today-background);\n    color: var(--instui-component-calendar-day-today-color);\n    border-radius: var(--instui-component-calendar-day-today-border-radius);\n  }\n\n  .day.-selected {\n    background: var(--instui-component-calendar-day-selected-background);\n    color: var(--instui-component-calendar-day-selected-color);\n    border-radius: var(--instui-component-calendar-day-selected-border-radius);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component calendar.day\n * @memberOf calendar\n * @selector .day\n * @summary A day cell (InstUI `Calendar.Day`); `-today`, `-selected`, and `-outside-month` mark its state.\n * @modifier -today — Today's date.\n * @modifier -selected — The selected date.\n * @modifier -outside-month — A day from the adjacent month (leading/trailing filler).\n * @structure\n * @component calendar {\n *   .grid {\n *     .day {}\n *   }\n * }\n */\n@scope (.pfx-calendar) {\n  .day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n    font-size: var(--instui-component-calendar-day-font-size);\n    color: var(--instui-component-calendar-day-color);\n    background: var(--instui-component-calendar-day-background);\n    cursor: pointer;\n  }\n\n  .day.-outside-month {\n    color: var(--instui-component-calendar-day-outside-month-color);\n  }\n\n  .day.-today {\n    background: var(--instui-component-calendar-day-today-background);\n    color: var(--instui-component-calendar-day-today-color);\n    border-radius: var(--instui-component-calendar-day-today-border-radius);\n  }\n\n  .day.-selected {\n    background: var(--instui-component-calendar-day-selected-background);\n    color: var(--instui-component-calendar-day-selected-color);\n    border-radius: var(--instui-component-calendar-day-selected-border-radius);\n  }\n}\n"
 }.rebrand;
 const checkbox$1 = {
-	"rebrand": "/**\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 -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 instui-display-block instui-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.-required .asterisk {\n    color: var(--instui-component-checkbox-asterisk-color);\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",
-	"canvas": "/**\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 -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 instui-display-block instui-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.-required .asterisk {\n    color: var(--instui-component-checkbox-asterisk-color);\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",
-	"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 -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 instui-display-block instui-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.-required .asterisk {\n    color: var(--instui-component-checkbox-asterisk-color);\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": "/**\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 -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.-required .asterisk {\n    color: var(--instui-component-checkbox-asterisk-color);\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",
+	"canvas": "/**\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 -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.-required .asterisk {\n    color: var(--instui-component-checkbox-asterisk-color);\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",
+	"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 -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.-required .asterisk {\n    color: var(--instui-component-checkbox-asterisk-color);\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 * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n.pfx-close-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1;\n  min-height: var(--instui-component-base-button-medium-height);\n  padding: var(--instui-spacing-space-xs);\n  border: 0;\n  background: transparent;\n  border-radius: var(--instui-component-base-button-border-radius);\n  color: var(--instui-color-text-interactive-action-secondary-base);\n  cursor: pointer;\n}\n.pfx-close-button::before {\n  content: \"\";\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n  -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n  mask: var(--instui-icon-x) center / contain no-repeat;\n}\n.pfx-close-button:hover {\n  background: var(--instui-color-background-interactive-action-tertiary-hover);\n}\n.pfx-close-button:active {\n  background: var(--instui-color-background-interactive-action-tertiary-active);\n}\n.pfx-close-button.-size-sm {\n  min-height: var(--instui-component-base-button-small-height);\n}\n.pfx-close-button.-size-lg {\n  min-height: var(--instui-component-base-button-large-height);\n}\n.pfx-close-button.-color-inverse {\n  color: var(--instui-component-base-button-primary-inverse-ghost-color);\n}\n",
@@ -365,6 +352,21 @@ const contextView$1 = {
 	"canvas": "/**\n * @component context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n.pfx-context-view {\n  position: relative;\n  display: inline-block;\n  padding: var(--instui-spacing-space-md);\n  background: var(--instui-color-background-elevated-surface-base);\n  color: var(--instui-color-text-base);\n  border: var(--instui-component-context-view-arrow-border-width) solid\n    var(--instui-component-context-view-arrow-border-color);\n  border-radius: var(--instui-component-context-view-border-radius);\n  /* ContextView floats over content — InstUI gives it a shadow. */\n  box-shadow: var(--instui-elevation-above);\n}\n\n/* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n   ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n   without it, a surface-coloured caret is invisible against a matching surface. */\n.pfx-context-view::before,\n.pfx-context-view::after {\n  content: \"\";\n  position: absolute;\n  border-style: solid;\n  border-color: transparent;\n}\n\n/* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n   pointing down. */\n.pfx-context-view::before {\n  top: 100%;\n  inset-inline-start: calc(\n    var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n  );\n  border-top-color: var(--instui-component-context-view-arrow-border-color);\n  border-width: calc(\n    var(--instui-component-context-view-arrow-size) +\n      var(--instui-component-context-view-arrow-border-width)\n  );\n}\n\n.pfx-context-view::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.pfx-context-view.-placement-bottom::before {\n  top: auto;\n  bottom: 100%;\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n}\n\n.pfx-context-view.-placement-bottom::after {\n  top: auto;\n  bottom: 100%;\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n}\n\n/* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n.pfx-context-view.-placement-start::before,\n.pfx-context-view.-placement-start::after {\n  top: 50%;\n  inset-inline-start: 100%;\n  transform: translateY(-50%);\n  border-top-color: transparent;\n}\n\n.pfx-context-view.-placement-start::before {\n  border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n}\n\n.pfx-context-view.-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.pfx-context-view.-placement-end::before,\n.pfx-context-view.-placement-end::after {\n  top: 50%;\n  inset-inline-start: auto;\n  inset-inline-end: 100%;\n  transform: translateY(-50%);\n  border-top-color: transparent;\n}\n\n.pfx-context-view.-placement-end::before {\n  border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n}\n\n.pfx-context-view.-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.pfx-context-view.-color-inverse {\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse::before {\n  border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse::after {\n  border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-bottom::before {\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-bottom::after {\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-start::before {\n  border-top-color: transparent;\n  border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-start::after {\n  border-top-color: transparent;\n  border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-end::before {\n  border-top-color: transparent;\n  border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-end::after {\n  border-top-color: transparent;\n  border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n/* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n   above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n   and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n   supported; elsewhere the UA centres it. */\n[popover].pfx-context-view {\n  position: fixed;\n  overflow: visible;\n  margin: 0;\n}\n\n[popover].pfx-context-view: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].pfx-context-view {\n    position-anchor: --pantoken-anchor;\n    position-try-fallbacks: flip-block, flip-inline;\n  }\n\n  [popover].pfx-context-view.-placement-top {\n    position-area: block-start;\n  }\n\n  [popover].pfx-context-view.-placement-bottom {\n    position-area: block-end;\n  }\n\n  [popover].pfx-context-view.-placement-start {\n    position-area: inline-start center;\n  }\n\n  [popover].pfx-context-view.-placement-end {\n    position-area: inline-end center;\n  }\n}\n",
 	"canvasHighContrast": "/**\n * @component context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n.pfx-context-view {\n  position: relative;\n  display: inline-block;\n  padding: var(--instui-spacing-space-md);\n  background: var(--instui-color-background-elevated-surface-base);\n  color: var(--instui-color-text-base);\n  border: var(--instui-component-context-view-arrow-border-width) solid\n    var(--instui-component-context-view-arrow-border-color);\n  border-radius: var(--instui-component-context-view-border-radius);\n  /* ContextView floats over content — InstUI gives it a shadow. */\n  box-shadow: var(--instui-elevation-above);\n}\n\n/* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n   ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n   without it, a surface-coloured caret is invisible against a matching surface. */\n.pfx-context-view::before,\n.pfx-context-view::after {\n  content: \"\";\n  position: absolute;\n  border-style: solid;\n  border-color: transparent;\n}\n\n/* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n   pointing down. */\n.pfx-context-view::before {\n  top: 100%;\n  inset-inline-start: calc(\n    var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n  );\n  border-top-color: var(--instui-component-context-view-arrow-border-color);\n  border-width: calc(\n    var(--instui-component-context-view-arrow-size) +\n      var(--instui-component-context-view-arrow-border-width)\n  );\n}\n\n.pfx-context-view::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.pfx-context-view.-placement-bottom::before {\n  top: auto;\n  bottom: 100%;\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n}\n\n.pfx-context-view.-placement-bottom::after {\n  top: auto;\n  bottom: 100%;\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n}\n\n/* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n.pfx-context-view.-placement-start::before,\n.pfx-context-view.-placement-start::after {\n  top: 50%;\n  inset-inline-start: 100%;\n  transform: translateY(-50%);\n  border-top-color: transparent;\n}\n\n.pfx-context-view.-placement-start::before {\n  border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n}\n\n.pfx-context-view.-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.pfx-context-view.-placement-end::before,\n.pfx-context-view.-placement-end::after {\n  top: 50%;\n  inset-inline-start: auto;\n  inset-inline-end: 100%;\n  transform: translateY(-50%);\n  border-top-color: transparent;\n}\n\n.pfx-context-view.-placement-end::before {\n  border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n}\n\n.pfx-context-view.-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.pfx-context-view.-color-inverse {\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse::before {\n  border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse::after {\n  border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-bottom::before {\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-bottom::after {\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-start::before {\n  border-top-color: transparent;\n  border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-start::after {\n  border-top-color: transparent;\n  border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-end::before {\n  border-top-color: transparent;\n  border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n\n.pfx-context-view.-color-inverse.-placement-end::after {\n  border-top-color: transparent;\n  border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n\n/* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n   above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n   and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n   supported; elsewhere the UA centres it. */\n[popover].pfx-context-view {\n  position: fixed;\n  overflow: visible;\n  margin: 0;\n}\n\n[popover].pfx-context-view: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].pfx-context-view {\n    position-anchor: --pantoken-anchor;\n    position-try-fallbacks: flip-block, flip-inline;\n  }\n\n  [popover].pfx-context-view.-placement-top {\n    position-area: block-start;\n  }\n\n  [popover].pfx-context-view.-placement-bottom {\n    position-area: block-end;\n  }\n\n  [popover].pfx-context-view.-placement-start {\n    position-area: inline-start center;\n  }\n\n  [popover].pfx-context-view.-placement-end {\n    position-area: inline-end center;\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 — 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",
+	"canvas": "/**\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 — 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",
+	"canvasHighContrast": "/**\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 — 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"
+}.rebrand;
+const drawerLayoutContent$1 = {
+	"rebrand": "/**\n * @component drawer-layout.content\n * @memberOf drawer-layout\n * @selector .content\n * @summary The primary content pane that fills remaining space beside the tray.\n * @remarks `min-inline-size` follows `--pantoken-bp-md` (fallback `30em`) so narrow layouts can switch tray to overlay mode.\n * @remarks `overflow: auto` keeps the tray and content independently scrollable.\n * @remarks Once the parent's inline-size drops below `46em` (`16em` tray width + `30em` breakpoint), a `@container` query on the parent's `pantoken-drawer-layout` container drops this member's `min-inline-size` to `0` automatically, matching the manual `[should-overlay-tray]` override.\n * @related drawer-layout.tray — The adjacent panel in the same flex row.\n * @accessibility Carry `role=\"region\"` (InstUI's DrawerLayout convention) and name it with `aria-label`/`aria-labelledby` when context alone doesn't identify it.\n * @structure\n * @scope (@component drawer-layout) {\n *   .content {\n *     slot {}\n *   }\n * }\n * @example\n * ```html\n * <div class=\"pfx-drawer-layout\">\n *   <div class=\"content\" role=\"region\">\n *     <p class=\"pfx-text\">Tray content</p>\n *   </div>\n * </div>\n * ```\n */\n\n@scope (.pfx-drawer-layout) {\n  :scope {\n    > .content {\n      flex: 1 1 auto;\n      overflow: auto;\n      min-inline-size: var(--drawer-layout-content-min-inline-size, var(--pantoken-bp-md, 30em));\n    }\n\n    &[should-overlay-tray] > .content,\n    &.-should-overlay-tray > .content {\n      min-inline-size: 0;\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 > .content {\n    min-inline-size: 0;\n  }\n}\n",
+	"canvas": "/**\n * @component drawer-layout.content\n * @memberOf drawer-layout\n * @selector .content\n * @summary The primary content pane that fills remaining space beside the tray.\n * @remarks `min-inline-size` follows `--pantoken-bp-md` (fallback `30em`) so narrow layouts can switch tray to overlay mode.\n * @remarks `overflow: auto` keeps the tray and content independently scrollable.\n * @remarks Once the parent's inline-size drops below `46em` (`16em` tray width + `30em` breakpoint), a `@container` query on the parent's `pantoken-drawer-layout` container drops this member's `min-inline-size` to `0` automatically, matching the manual `[should-overlay-tray]` override.\n * @related drawer-layout.tray — The adjacent panel in the same flex row.\n * @accessibility Carry `role=\"region\"` (InstUI's DrawerLayout convention) and name it with `aria-label`/`aria-labelledby` when context alone doesn't identify it.\n * @structure\n * @scope (@component drawer-layout) {\n *   .content {\n *     slot {}\n *   }\n * }\n * @example\n * ```html\n * <div class=\"pfx-drawer-layout\">\n *   <div class=\"content\" role=\"region\">\n *     <p class=\"pfx-text\">Tray content</p>\n *   </div>\n * </div>\n * ```\n */\n\n@scope (.pfx-drawer-layout) {\n  :scope {\n    > .content {\n      flex: 1 1 auto;\n      overflow: auto;\n      min-inline-size: var(--drawer-layout-content-min-inline-size, var(--pantoken-bp-md, 30em));\n    }\n\n    &[should-overlay-tray] > .content,\n    &.-should-overlay-tray > .content {\n      min-inline-size: 0;\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 > .content {\n    min-inline-size: 0;\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component drawer-layout.content\n * @memberOf drawer-layout\n * @selector .content\n * @summary The primary content pane that fills remaining space beside the tray.\n * @remarks `min-inline-size` follows `--pantoken-bp-md` (fallback `30em`) so narrow layouts can switch tray to overlay mode.\n * @remarks `overflow: auto` keeps the tray and content independently scrollable.\n * @remarks Once the parent's inline-size drops below `46em` (`16em` tray width + `30em` breakpoint), a `@container` query on the parent's `pantoken-drawer-layout` container drops this member's `min-inline-size` to `0` automatically, matching the manual `[should-overlay-tray]` override.\n * @related drawer-layout.tray — The adjacent panel in the same flex row.\n * @accessibility Carry `role=\"region\"` (InstUI's DrawerLayout convention) and name it with `aria-label`/`aria-labelledby` when context alone doesn't identify it.\n * @structure\n * @scope (@component drawer-layout) {\n *   .content {\n *     slot {}\n *   }\n * }\n * @example\n * ```html\n * <div class=\"pfx-drawer-layout\">\n *   <div class=\"content\" role=\"region\">\n *     <p class=\"pfx-text\">Tray content</p>\n *   </div>\n * </div>\n * ```\n */\n\n@scope (.pfx-drawer-layout) {\n  :scope {\n    > .content {\n      flex: 1 1 auto;\n      overflow: auto;\n      min-inline-size: var(--drawer-layout-content-min-inline-size, var(--pantoken-bp-md, 30em));\n    }\n\n    &[should-overlay-tray] > .content,\n    &.-should-overlay-tray > .content {\n      min-inline-size: 0;\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 > .content {\n    min-inline-size: 0;\n  }\n}\n"
+}.rebrand;
+const drawerLayoutTray$1 = {
+	"rebrand": "/**\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",
+	"canvas": "/**\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",
+	"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 * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n *   <span class=\"pfx-icon -icon-cloud-upload\"></span>\n *   <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n *   <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n *   <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n *   [class*=\"-icon-\"]:optional {}\n *   .pfx-text {\n *     strong {}\n *   }\n *   .pfx-text {}\n *   input {}\n * }\n */\n.pfx-file-drop {\n  display: block;\n  text-align: center;\n  padding: var(--instui-spacing-space-lg);\n  color: var(--instui-color-text-base);\n  background: var(--instui-component-file-drop-background-color);\n  border: var(--instui-component-file-drop-border-width)\n    var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n  border-radius: var(--instui-component-file-drop-border-radius);\n}\n\n.pfx-file-drop:hover,\n.pfx-file-drop.-hover {\n  border-color: var(--instui-component-file-drop-hover-border-color);\n}\n\n.pfx-file-drop.-accepted {\n  border-color: var(--instui-component-file-drop-accepted-color);\n}\n\n.pfx-file-drop.-rejected {\n  border-color: var(--instui-component-file-drop-rejected-color);\n}\n\n.pfx-file-drop > [class*=\"-icon-\"] {\n  line-height: 1;\n}\n",
 	"canvas": "/**\n * @component file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n *   <span class=\"pfx-icon -icon-cloud-upload\"></span>\n *   <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n *   <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n *   <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n *   [class*=\"-icon-\"]:optional {}\n *   .pfx-text {\n *     strong {}\n *   }\n *   .pfx-text {}\n *   input {}\n * }\n */\n.pfx-file-drop {\n  display: block;\n  text-align: center;\n  padding: var(--instui-spacing-space-lg);\n  color: var(--instui-color-text-base);\n  background: var(--instui-component-file-drop-background-color);\n  border: var(--instui-component-file-drop-border-width)\n    var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n  border-radius: var(--instui-component-file-drop-border-radius);\n}\n\n.pfx-file-drop:hover,\n.pfx-file-drop.-hover {\n  border-color: var(--instui-component-file-drop-hover-border-color);\n}\n\n.pfx-file-drop.-accepted {\n  border-color: var(--instui-component-file-drop-accepted-color);\n}\n\n.pfx-file-drop.-rejected {\n  border-color: var(--instui-component-file-drop-rejected-color);\n}\n\n.pfx-file-drop > [class*=\"-icon-\"] {\n  line-height: 1;\n}\n",
@@ -401,14 +403,14 @@ const link$1 = {
 	"canvasHighContrast": "/**\n * @component 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.pfx-link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-link-gap-md);\n  color: var(--instui-component-link-text-color);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n  font-weight: var(--instui-component-link-font-weight);\n  line-height: var(--instui-component-link-line-height-md);\n  text-decoration: var(--instui-component-link-text-decoration-outside-text);\n  cursor: pointer;\n}\n\n.pfx-link:hover {\n  color: var(--instui-component-link-text-hover-color);\n}\n\n.pfx-link[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-text-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-link.-size-sm {\n  gap: var(--instui-component-link-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n  line-height: var(--instui-component-link-line-height-sm);\n}\n\n.pfx-link.-size-lg {\n  gap: var(--instui-component-link-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n  line-height: var(--instui-component-link-line-height-lg);\n}\n\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"
 }.rebrand;
 const list$1 = {
-	"rebrand": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @remarks Sets its own `padding-inline-start` for list indentation; chaining a `-p*`/`-padding*` spacing utility modifier overrides that built-in value. See the `list.item` member for the individual items.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -size-sm — Small. @affects list.item — Scales the item spacing to match.\n * @modifier -size-md — Medium (default). @affects list.item — Scales the item spacing to match.\n * @modifier -size-lg — Large. @affects list.item — Scales the item spacing to match.\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n\n.pfx-list.-size-md {\n  font-size: var(--instui-component-list-item-font-size-medium);\n}\n\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--instui-component-list-item-spacing-medium);\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n.pfx-list.-inline > li {\n  margin: 0;\n}\n",
-	"canvas": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @remarks Sets its own `padding-inline-start` for list indentation; chaining a `-p*`/`-padding*` spacing utility modifier overrides that built-in value. See the `list.item` member for the individual items.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -size-sm — Small. @affects list.item — Scales the item spacing to match.\n * @modifier -size-md — Medium (default). @affects list.item — Scales the item spacing to match.\n * @modifier -size-lg — Large. @affects list.item — Scales the item spacing to match.\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n\n.pfx-list.-size-md {\n  font-size: var(--instui-component-list-item-font-size-medium);\n}\n\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--instui-component-list-item-spacing-medium);\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n.pfx-list.-inline > li {\n  margin: 0;\n}\n",
-	"canvasHighContrast": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @remarks Sets its own `padding-inline-start` for list indentation; chaining a `-p*`/`-padding*` spacing utility modifier overrides that built-in value. See the `list.item` member for the individual items.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -size-sm — Small. @affects list.item — Scales the item spacing to match.\n * @modifier -size-md — Medium (default). @affects list.item — Scales the item spacing to match.\n * @modifier -size-lg — Large. @affects list.item — Scales the item spacing to match.\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n\n.pfx-list.-size-md {\n  font-size: var(--instui-component-list-item-font-size-medium);\n}\n\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--instui-component-list-item-spacing-medium);\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n.pfx-list.-inline > li {\n  margin: 0;\n}\n"
+	"rebrand": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @remarks Sets its own `padding-inline-start` for list indentation; chaining a `-p*`/`-padding*` spacing utility modifier overrides that built-in value. See the `list.item` member for the individual items.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -size-sm — Small. @affects list.item — Scales the item spacing to match.\n * @modifier -size-md — Medium (default). @affects list.item — Scales the item spacing to match.\n * @modifier -size-lg — Large. @affects list.item — Scales the item spacing to match.\n * @structure\n * .pfx-list {\n *   li:many {}\n * }\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n\n.pfx-list.-size-md {\n  font-size: var(--instui-component-list-item-font-size-medium);\n}\n\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--instui-component-list-item-spacing-medium);\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n.pfx-list.-inline > li {\n  margin: 0;\n}\n",
+	"canvas": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @remarks Sets its own `padding-inline-start` for list indentation; chaining a `-p*`/`-padding*` spacing utility modifier overrides that built-in value. See the `list.item` member for the individual items.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -size-sm — Small. @affects list.item — Scales the item spacing to match.\n * @modifier -size-md — Medium (default). @affects list.item — Scales the item spacing to match.\n * @modifier -size-lg — Large. @affects list.item — Scales the item spacing to match.\n * @structure\n * .pfx-list {\n *   li:many {}\n * }\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n\n.pfx-list.-size-md {\n  font-size: var(--instui-component-list-item-font-size-medium);\n}\n\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--instui-component-list-item-spacing-medium);\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n.pfx-list.-inline > li {\n  margin: 0;\n}\n",
+	"canvasHighContrast": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @remarks Sets its own `padding-inline-start` for list indentation; chaining a `-p*`/`-padding*` spacing utility modifier overrides that built-in value. See the `list.item` member for the individual items.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -size-sm — Small. @affects list.item — Scales the item spacing to match.\n * @modifier -size-md — Medium (default). @affects list.item — Scales the item spacing to match.\n * @modifier -size-lg — Large. @affects list.item — Scales the item spacing to match.\n * @structure\n * .pfx-list {\n *   li:many {}\n * }\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n\n.pfx-list.-size-md {\n  font-size: var(--instui-component-list-item-font-size-medium);\n}\n\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--instui-component-list-item-spacing-medium);\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n.pfx-list.-inline > li {\n  margin: 0;\n}\n"
 }.rebrand;
 const listItem$1 = {
-	"rebrand": "/**\n * @component list.item\n * @memberOf list\n * @selector .pfx-list > li\n * @summary A list item (InstUI `List.Item`).\n * @remarks The parent `list`'s `-size-sm`/`-size-lg`, `-ordered`, and `-delimiter-solid`/`-delimiter-dashed` modifiers restyle this member — see `list`'s own doc for those modifiers.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @modifier -delimiter-solid — Separate items with a solid rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -delimiter-dashed — Separate items with a dashed rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -ordered — Ordered-list numbering. @affects list.item — Adds marker weight and indentation.\n * @structure\n * .pfx-list {\n *   li {}\n * }\n */\n\n@scope (.pfx-list) {\n  :scope > li {\n    color: var(--instui-component-list-item-color);\n    font-family: var(--instui-component-list-item-font-family);\n    font-size: var(--instui-component-list-item-font-size-medium);\n    font-weight: var(--instui-component-list-item-font-weight);\n    line-height: var(--instui-component-list-item-line-height);\n  }\n\n  :scope.-size-sm > li {\n    font-size: var(--instui-component-list-item-font-size-small);\n  }\n\n  :scope.-size-md > li {\n    font-size: var(--instui-component-list-item-font-size-medium);\n  }\n\n  :scope.-size-lg > li {\n    font-size: var(--instui-component-list-item-font-size-large);\n  }\n\n  :scope.-ordered > li::marker {\n    font-weight: var(--instui-component-list-ordered-number-font-weight);\n  }\n\n  :scope.-ordered > li {\n    padding-inline-start: var(--instui-component-list-ordered-number-margin);\n  }\n\n  :scope.-delimiter-solid > li + li {\n    border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n      var(--instui-component-list-item-delimiter-solid-border-style)\n      var(--instui-component-list-item-delimiter-solid-border-color);\n    padding-top: var(--instui-component-list-item-spacing-medium);\n  }\n\n  :scope.-delimiter-dashed > li + li {\n    border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n      var(--instui-component-list-item-delimiter-dashed-border-style)\n      var(--instui-component-list-item-delimiter-dashed-border-color);\n    padding-top: var(--instui-component-list-item-spacing-medium);\n  }\n}\n",
-	"canvas": "/**\n * @component list.item\n * @memberOf list\n * @selector .pfx-list > li\n * @summary A list item (InstUI `List.Item`).\n * @remarks The parent `list`'s `-size-sm`/`-size-lg`, `-ordered`, and `-delimiter-solid`/`-delimiter-dashed` modifiers restyle this member — see `list`'s own doc for those modifiers.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @modifier -delimiter-solid — Separate items with a solid rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -delimiter-dashed — Separate items with a dashed rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -ordered — Ordered-list numbering. @affects list.item — Adds marker weight and indentation.\n * @structure\n * .pfx-list {\n *   li {}\n * }\n */\n\n@scope (.pfx-list) {\n  :scope > li {\n    color: var(--instui-component-list-item-color);\n    font-family: var(--instui-component-list-item-font-family);\n    font-size: var(--instui-component-list-item-font-size-medium);\n    font-weight: var(--instui-component-list-item-font-weight);\n    line-height: var(--instui-component-list-item-line-height);\n  }\n\n  :scope.-size-sm > li {\n    font-size: var(--instui-component-list-item-font-size-small);\n  }\n\n  :scope.-size-md > li {\n    font-size: var(--instui-component-list-item-font-size-medium);\n  }\n\n  :scope.-size-lg > li {\n    font-size: var(--instui-component-list-item-font-size-large);\n  }\n\n  :scope.-ordered > li::marker {\n    font-weight: var(--instui-component-list-ordered-number-font-weight);\n  }\n\n  :scope.-ordered > li {\n    padding-inline-start: var(--instui-component-list-ordered-number-margin);\n  }\n\n  :scope.-delimiter-solid > li + li {\n    border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n      var(--instui-component-list-item-delimiter-solid-border-style)\n      var(--instui-component-list-item-delimiter-solid-border-color);\n    padding-top: var(--instui-component-list-item-spacing-medium);\n  }\n\n  :scope.-delimiter-dashed > li + li {\n    border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n      var(--instui-component-list-item-delimiter-dashed-border-style)\n      var(--instui-component-list-item-delimiter-dashed-border-color);\n    padding-top: var(--instui-component-list-item-spacing-medium);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component list.item\n * @memberOf list\n * @selector .pfx-list > li\n * @summary A list item (InstUI `List.Item`).\n * @remarks The parent `list`'s `-size-sm`/`-size-lg`, `-ordered`, and `-delimiter-solid`/`-delimiter-dashed` modifiers restyle this member — see `list`'s own doc for those modifiers.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @modifier -delimiter-solid — Separate items with a solid rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -delimiter-dashed — Separate items with a dashed rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -ordered — Ordered-list numbering. @affects list.item — Adds marker weight and indentation.\n * @structure\n * .pfx-list {\n *   li {}\n * }\n */\n\n@scope (.pfx-list) {\n  :scope > li {\n    color: var(--instui-component-list-item-color);\n    font-family: var(--instui-component-list-item-font-family);\n    font-size: var(--instui-component-list-item-font-size-medium);\n    font-weight: var(--instui-component-list-item-font-weight);\n    line-height: var(--instui-component-list-item-line-height);\n  }\n\n  :scope.-size-sm > li {\n    font-size: var(--instui-component-list-item-font-size-small);\n  }\n\n  :scope.-size-md > li {\n    font-size: var(--instui-component-list-item-font-size-medium);\n  }\n\n  :scope.-size-lg > li {\n    font-size: var(--instui-component-list-item-font-size-large);\n  }\n\n  :scope.-ordered > li::marker {\n    font-weight: var(--instui-component-list-ordered-number-font-weight);\n  }\n\n  :scope.-ordered > li {\n    padding-inline-start: var(--instui-component-list-ordered-number-margin);\n  }\n\n  :scope.-delimiter-solid > li + li {\n    border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n      var(--instui-component-list-item-delimiter-solid-border-style)\n      var(--instui-component-list-item-delimiter-solid-border-color);\n    padding-top: var(--instui-component-list-item-spacing-medium);\n  }\n\n  :scope.-delimiter-dashed > li + li {\n    border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n      var(--instui-component-list-item-delimiter-dashed-border-style)\n      var(--instui-component-list-item-delimiter-dashed-border-color);\n    padding-top: var(--instui-component-list-item-spacing-medium);\n  }\n}\n"
+	"rebrand": "/**\n * @component list.item\n * @memberOf list\n * @selector .pfx-list > li\n * @summary A list item (InstUI `List.Item`).\n * @remarks The parent `list`'s `-size-sm`/`-size-lg`, `-ordered`, and `-delimiter-solid`/`-delimiter-dashed` modifiers restyle this member — see `list`'s own doc for those modifiers.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @modifier -delimiter-solid — Separate items with a solid rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -delimiter-dashed — Separate items with a dashed rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -ordered — Ordered-list numbering. @affects list.item — Adds marker weight and indentation.\n * @structure\n * @component list {\n *   li {}\n * }\n */\n\n@scope (.pfx-list) {\n  :scope > li {\n    color: var(--instui-component-list-item-color);\n    font-family: var(--instui-component-list-item-font-family);\n    font-size: var(--instui-component-list-item-font-size-medium);\n    font-weight: var(--instui-component-list-item-font-weight);\n    line-height: var(--instui-component-list-item-line-height);\n  }\n\n  :scope.-size-sm > li {\n    font-size: var(--instui-component-list-item-font-size-small);\n  }\n\n  :scope.-size-md > li {\n    font-size: var(--instui-component-list-item-font-size-medium);\n  }\n\n  :scope.-size-lg > li {\n    font-size: var(--instui-component-list-item-font-size-large);\n  }\n\n  :scope.-ordered > li::marker {\n    font-weight: var(--instui-component-list-ordered-number-font-weight);\n  }\n\n  :scope.-ordered > li {\n    padding-inline-start: var(--instui-component-list-ordered-number-margin);\n  }\n\n  :scope.-delimiter-solid > li + li {\n    border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n      var(--instui-component-list-item-delimiter-solid-border-style)\n      var(--instui-component-list-item-delimiter-solid-border-color);\n    padding-top: var(--instui-component-list-item-spacing-medium);\n  }\n\n  :scope.-delimiter-dashed > li + li {\n    border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n      var(--instui-component-list-item-delimiter-dashed-border-style)\n      var(--instui-component-list-item-delimiter-dashed-border-color);\n    padding-top: var(--instui-component-list-item-spacing-medium);\n  }\n}\n",
+	"canvas": "/**\n * @component list.item\n * @memberOf list\n * @selector .pfx-list > li\n * @summary A list item (InstUI `List.Item`).\n * @remarks The parent `list`'s `-size-sm`/`-size-lg`, `-ordered`, and `-delimiter-solid`/`-delimiter-dashed` modifiers restyle this member — see `list`'s own doc for those modifiers.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @modifier -delimiter-solid — Separate items with a solid rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -delimiter-dashed — Separate items with a dashed rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -ordered — Ordered-list numbering. @affects list.item — Adds marker weight and indentation.\n * @structure\n * @component list {\n *   li {}\n * }\n */\n\n@scope (.pfx-list) {\n  :scope > li {\n    color: var(--instui-component-list-item-color);\n    font-family: var(--instui-component-list-item-font-family);\n    font-size: var(--instui-component-list-item-font-size-medium);\n    font-weight: var(--instui-component-list-item-font-weight);\n    line-height: var(--instui-component-list-item-line-height);\n  }\n\n  :scope.-size-sm > li {\n    font-size: var(--instui-component-list-item-font-size-small);\n  }\n\n  :scope.-size-md > li {\n    font-size: var(--instui-component-list-item-font-size-medium);\n  }\n\n  :scope.-size-lg > li {\n    font-size: var(--instui-component-list-item-font-size-large);\n  }\n\n  :scope.-ordered > li::marker {\n    font-weight: var(--instui-component-list-ordered-number-font-weight);\n  }\n\n  :scope.-ordered > li {\n    padding-inline-start: var(--instui-component-list-ordered-number-margin);\n  }\n\n  :scope.-delimiter-solid > li + li {\n    border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n      var(--instui-component-list-item-delimiter-solid-border-style)\n      var(--instui-component-list-item-delimiter-solid-border-color);\n    padding-top: var(--instui-component-list-item-spacing-medium);\n  }\n\n  :scope.-delimiter-dashed > li + li {\n    border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n      var(--instui-component-list-item-delimiter-dashed-border-style)\n      var(--instui-component-list-item-delimiter-dashed-border-color);\n    padding-top: var(--instui-component-list-item-spacing-medium);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component list.item\n * @memberOf list\n * @selector .pfx-list > li\n * @summary A list item (InstUI `List.Item`).\n * @remarks The parent `list`'s `-size-sm`/`-size-lg`, `-ordered`, and `-delimiter-solid`/`-delimiter-dashed` modifiers restyle this member — see `list`'s own doc for those modifiers.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @modifier -delimiter-solid — Separate items with a solid rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -delimiter-dashed — Separate items with a dashed rule. @affects list.item — Adds the delimiter rule between items.\n * @modifier -ordered — Ordered-list numbering. @affects list.item — Adds marker weight and indentation.\n * @structure\n * @component list {\n *   li {}\n * }\n */\n\n@scope (.pfx-list) {\n  :scope > li {\n    color: var(--instui-component-list-item-color);\n    font-family: var(--instui-component-list-item-font-family);\n    font-size: var(--instui-component-list-item-font-size-medium);\n    font-weight: var(--instui-component-list-item-font-weight);\n    line-height: var(--instui-component-list-item-line-height);\n  }\n\n  :scope.-size-sm > li {\n    font-size: var(--instui-component-list-item-font-size-small);\n  }\n\n  :scope.-size-md > li {\n    font-size: var(--instui-component-list-item-font-size-medium);\n  }\n\n  :scope.-size-lg > li {\n    font-size: var(--instui-component-list-item-font-size-large);\n  }\n\n  :scope.-ordered > li::marker {\n    font-weight: var(--instui-component-list-ordered-number-font-weight);\n  }\n\n  :scope.-ordered > li {\n    padding-inline-start: var(--instui-component-list-ordered-number-margin);\n  }\n\n  :scope.-delimiter-solid > li + li {\n    border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n      var(--instui-component-list-item-delimiter-solid-border-style)\n      var(--instui-component-list-item-delimiter-solid-border-color);\n    padding-top: var(--instui-component-list-item-spacing-medium);\n  }\n\n  :scope.-delimiter-dashed > li + li {\n    border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n      var(--instui-component-list-item-delimiter-dashed-border-style)\n      var(--instui-component-list-item-delimiter-dashed-border-color);\n    padding-top: var(--instui-component-list-item-spacing-medium);\n  }\n}\n"
 }.rebrand;
 const mask$1 = {
 	"rebrand": "/**\n * @component mask\n * @summary An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native `<dialog>` (its `::backdrop` is the mask). Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `mask` global utility.\n * @modifier -fullscreen — Fixed to the viewport, covering it at a high z-index.\n * @modifier -blur — Blur what's behind the mask with a backdrop-filter.\n * @example\n * <div style=\"position: relative\">\n *   <div class=\"instui-mask\">\n *     <span class=\"instui-spinner\"></span>\n *   </div>\n * </div>\n */\n/* An in-flow overlay for non-modal cases (e.g. a spinner over a card). For a modal, prefer a native\n   <dialog>: its ::backdrop is the mask and reuses the same `--instui-component-mask-background-color`\n   token (see modalRules). */\n.pfx-mask {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--instui-component-mask-background-color);\n}\n\n.pfx-mask.-fullscreen {\n  position: fixed;\n  z-index: 999;\n}\n\n.pfx-mask.-blur {\n  backdrop-filter: blur(0.5rem);\n}\n",
@@ -416,29 +418,29 @@ const mask$1 = {
 	"canvasHighContrast": "/**\n * @component mask\n * @summary An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native `<dialog>` (its `::backdrop` is the mask). Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the `mask` global utility.\n * @modifier -fullscreen — Fixed to the viewport, covering it at a high z-index.\n * @modifier -blur — Blur what's behind the mask with a backdrop-filter.\n * @example\n * <div style=\"position: relative\">\n *   <div class=\"instui-mask\">\n *     <span class=\"instui-spinner\"></span>\n *   </div>\n * </div>\n */\n/* An in-flow overlay for non-modal cases (e.g. a spinner over a card). For a modal, prefer a native\n   <dialog>: its ::backdrop is the mask and reuses the same `--instui-component-mask-background-color`\n   token (see modalRules). */\n.pfx-mask {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--instui-component-mask-background-color);\n}\n\n.pfx-mask.-fullscreen {\n  position: fixed;\n  z-index: 999;\n}\n\n.pfx-mask.-blur {\n  backdrop-filter: blur(0.5rem);\n}\n"
 }.rebrand;
 const menu$1 = {
-	"rebrand": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item` (see the `menu.item` member), label a section with `.group` (see `menu.group`), and divide sections with `.separator` (see `menu.separator`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-menu\">\n *   <div class=\"group\">Actions</div>\n *   <div class=\"item\">Edit</div>\n *   <div class=\"item -active\">Duplicate</div>\n *   <div class=\"separator\"></div>\n *   <div class=\"item\">Delete</div>\n * </div>\n * ```\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n.pfx-menu {\n  min-width: var(--instui-component-menu-min-width);\n  max-width: var(--instui-component-menu-max-width);\n  background: var(--instui-component-menu-item-background);\n  border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-spacing-space-xs) 0;\n}\n",
-	"canvas": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item` (see the `menu.item` member), label a section with `.group` (see `menu.group`), and divide sections with `.separator` (see `menu.separator`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-menu\">\n *   <div class=\"group\">Actions</div>\n *   <div class=\"item\">Edit</div>\n *   <div class=\"item -active\">Duplicate</div>\n *   <div class=\"separator\"></div>\n *   <div class=\"item\">Delete</div>\n * </div>\n * ```\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n.pfx-menu {\n  min-width: var(--instui-component-menu-min-width);\n  max-width: var(--instui-component-menu-max-width);\n  background: var(--instui-component-menu-item-background);\n  border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-spacing-space-xs) 0;\n}\n",
-	"canvasHighContrast": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item` (see the `menu.item` member), label a section with `.group` (see `menu.group`), and divide sections with `.separator` (see `menu.separator`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-menu\">\n *   <div class=\"group\">Actions</div>\n *   <div class=\"item\">Edit</div>\n *   <div class=\"item -active\">Duplicate</div>\n *   <div class=\"separator\"></div>\n *   <div class=\"item\">Delete</div>\n * </div>\n * ```\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n.pfx-menu {\n  min-width: var(--instui-component-menu-min-width);\n  max-width: var(--instui-component-menu-max-width);\n  background: var(--instui-component-menu-item-background);\n  border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-spacing-space-xs) 0;\n}\n"
+	"rebrand": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item` (see the `menu.item` member), label a section with `.group` (see `menu.group`), and divide sections with `.separator` (see `menu.separator`).\n * @structure\n * .pfx-menu {\n *   .group:optional {}\n *   .item:many {}\n *   .separator:optional {}\n * }\n * @example -nocard\n * ```html\n * <div class=\"pfx-menu\">\n *   <div class=\"group\">Actions</div>\n *   <div class=\"item\">Edit</div>\n *   <div class=\"item -active\">Duplicate</div>\n *   <div class=\"separator\"></div>\n *   <div class=\"item\">Delete</div>\n * </div>\n * ```\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n.pfx-menu {\n  min-width: var(--instui-component-menu-min-width);\n  max-width: var(--instui-component-menu-max-width);\n  background: var(--instui-component-menu-item-background);\n  border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-spacing-space-xs) 0;\n}\n",
+	"canvas": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item` (see the `menu.item` member), label a section with `.group` (see `menu.group`), and divide sections with `.separator` (see `menu.separator`).\n * @structure\n * .pfx-menu {\n *   .group:optional {}\n *   .item:many {}\n *   .separator:optional {}\n * }\n * @example -nocard\n * ```html\n * <div class=\"pfx-menu\">\n *   <div class=\"group\">Actions</div>\n *   <div class=\"item\">Edit</div>\n *   <div class=\"item -active\">Duplicate</div>\n *   <div class=\"separator\"></div>\n *   <div class=\"item\">Delete</div>\n * </div>\n * ```\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n.pfx-menu {\n  min-width: var(--instui-component-menu-min-width);\n  max-width: var(--instui-component-menu-max-width);\n  background: var(--instui-component-menu-item-background);\n  border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-spacing-space-xs) 0;\n}\n",
+	"canvasHighContrast": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item` (see the `menu.item` member), label a section with `.group` (see `menu.group`), and divide sections with `.separator` (see `menu.separator`).\n * @structure\n * .pfx-menu {\n *   .group:optional {}\n *   .item:many {}\n *   .separator:optional {}\n * }\n * @example -nocard\n * ```html\n * <div class=\"pfx-menu\">\n *   <div class=\"group\">Actions</div>\n *   <div class=\"item\">Edit</div>\n *   <div class=\"item -active\">Duplicate</div>\n *   <div class=\"separator\"></div>\n *   <div class=\"item\">Delete</div>\n * </div>\n * ```\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n.pfx-menu {\n  min-width: var(--instui-component-menu-min-width);\n  max-width: var(--instui-component-menu-max-width);\n  background: var(--instui-component-menu-item-background);\n  border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-spacing-space-xs) 0;\n}\n"
 }.rebrand;
 const menuGroup$1 = {
-	"rebrand": "/**\n * @component menu.group\n * @memberOf menu\n * @selector .group\n * @summary A labelled group heading (InstUI `Menu.Group`/`Menu.ItemGroup`).\n * @structure\n * @scope (.pfx-menu) {\n *   :scope > .group {}\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .group {\n    padding: var(--instui-component-menu-group-padding-vertical)\n      var(--instui-component-menu-group-padding-horizontal);\n    background: var(--instui-component-menu-group-background);\n    color: var(--instui-component-menu-group-color);\n    font-family: var(--instui-component-menu-group-font-family);\n    font-size: var(--instui-component-menu-group-font-size);\n    font-weight: var(--instui-component-menu-group-font-weight);\n  }\n}\n",
-	"canvas": "/**\n * @component menu.group\n * @memberOf menu\n * @selector .group\n * @summary A labelled group heading (InstUI `Menu.Group`/`Menu.ItemGroup`).\n * @structure\n * @scope (.pfx-menu) {\n *   :scope > .group {}\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .group {\n    padding: var(--instui-component-menu-group-padding-vertical)\n      var(--instui-component-menu-group-padding-horizontal);\n    background: var(--instui-component-menu-group-background);\n    color: var(--instui-component-menu-group-color);\n    font-family: var(--instui-component-menu-group-font-family);\n    font-size: var(--instui-component-menu-group-font-size);\n    font-weight: var(--instui-component-menu-group-font-weight);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component menu.group\n * @memberOf menu\n * @selector .group\n * @summary A labelled group heading (InstUI `Menu.Group`/`Menu.ItemGroup`).\n * @structure\n * @scope (.pfx-menu) {\n *   :scope > .group {}\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .group {\n    padding: var(--instui-component-menu-group-padding-vertical)\n      var(--instui-component-menu-group-padding-horizontal);\n    background: var(--instui-component-menu-group-background);\n    color: var(--instui-component-menu-group-color);\n    font-family: var(--instui-component-menu-group-font-family);\n    font-size: var(--instui-component-menu-group-font-size);\n    font-weight: var(--instui-component-menu-group-font-weight);\n  }\n}\n"
+	"rebrand": "/**\n * @component menu.group\n * @memberOf menu\n * @selector .group\n * @summary A labelled group heading (InstUI `Menu.Group`/`Menu.ItemGroup`).\n * @structure\n * @component menu {\n *   .group {}\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .group {\n    padding: var(--instui-component-menu-group-padding-vertical)\n      var(--instui-component-menu-group-padding-horizontal);\n    background: var(--instui-component-menu-group-background);\n    color: var(--instui-component-menu-group-color);\n    font-family: var(--instui-component-menu-group-font-family);\n    font-size: var(--instui-component-menu-group-font-size);\n    font-weight: var(--instui-component-menu-group-font-weight);\n  }\n}\n",
+	"canvas": "/**\n * @component menu.group\n * @memberOf menu\n * @selector .group\n * @summary A labelled group heading (InstUI `Menu.Group`/`Menu.ItemGroup`).\n * @structure\n * @component menu {\n *   .group {}\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .group {\n    padding: var(--instui-component-menu-group-padding-vertical)\n      var(--instui-component-menu-group-padding-horizontal);\n    background: var(--instui-component-menu-group-background);\n    color: var(--instui-component-menu-group-color);\n    font-family: var(--instui-component-menu-group-font-family);\n    font-size: var(--instui-component-menu-group-font-size);\n    font-weight: var(--instui-component-menu-group-font-weight);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component menu.group\n * @memberOf menu\n * @selector .group\n * @summary A labelled group heading (InstUI `Menu.Group`/`Menu.ItemGroup`).\n * @structure\n * @component menu {\n *   .group {}\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .group {\n    padding: var(--instui-component-menu-group-padding-vertical)\n      var(--instui-component-menu-group-padding-horizontal);\n    background: var(--instui-component-menu-group-background);\n    color: var(--instui-component-menu-group-color);\n    font-family: var(--instui-component-menu-group-font-family);\n    font-size: var(--instui-component-menu-group-font-size);\n    font-weight: var(--instui-component-menu-group-font-weight);\n  }\n}\n"
 }.rebrand;
 const menuItem$1 = {
-	"rebrand": "/**\n * @component menu.item\n * @memberOf menu\n * @selector .item\n * @summary A menu entry (InstUI `Menu.Item`); add -disabled, -highlighted, or -active/[aria-checked].\n * @modifier -disabled — Muted, non-interactive.\n * @modifier -highlighted — Highlighted background/text (keyboard focus or hover).\n * @modifier -active — Active/checked highlight; same styling as `[aria-checked=\"true\"]`.\n * @part .item-info — Secondary info text within the item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @structure\n * @scope (.pfx-menu) {\n *   :scope > .item {\n *     .item-info {}\n *   }\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .item {\n    display: block;\n    padding: var(--instui-component-menu-item-padding-vertical)\n      var(--instui-component-menu-item-padding-horizontal);\n    color: var(--instui-component-menu-item-label-color);\n    font-family: var(--instui-component-menu-item-font-family);\n    font-size: var(--instui-component-menu-item-font-size);\n    font-weight: var(--instui-component-menu-item-font-weight);\n    line-height: var(--instui-component-menu-item-line-height);\n    cursor: pointer;\n  }\n\n  /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n  :scope > .item.-disabled {\n    opacity: var(--instui-opacity-disabled);\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :scope > .item:hover,\n  :scope > .item.-highlighted {\n    background: var(--instui-component-menu-item-highlighted-background);\n    color: var(--instui-component-menu-item-highlighted-label-color);\n  }\n\n  :scope > .item.-active,\n  :scope > .item[aria-checked=\"true\"] {\n    background: var(--instui-component-menu-item-active-background);\n    color: var(--instui-component-menu-item-active-label-color);\n  }\n\n  :scope > .item.-active:hover,\n  :scope > .item[aria-checked=\"true\"]:hover {\n    background: var(--instui-component-menu-item-selected-highlighted-background);\n  }\n\n  /* Secondary line inside an item (a description or shortcut). */\n  .item-info {\n    color: var(--instui-component-menu-item-label-info-color);\n  }\n\n  :scope > .item:hover .item-info,\n  :scope > .item.-highlighted .item-info {\n    color: var(--instui-component-menu-item-highlighted-label-info-color);\n  }\n}\n",
-	"canvas": "/**\n * @component menu.item\n * @memberOf menu\n * @selector .item\n * @summary A menu entry (InstUI `Menu.Item`); add -disabled, -highlighted, or -active/[aria-checked].\n * @modifier -disabled — Muted, non-interactive.\n * @modifier -highlighted — Highlighted background/text (keyboard focus or hover).\n * @modifier -active — Active/checked highlight; same styling as `[aria-checked=\"true\"]`.\n * @part .item-info — Secondary info text within the item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @structure\n * @scope (.pfx-menu) {\n *   :scope > .item {\n *     .item-info {}\n *   }\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .item {\n    display: block;\n    padding: var(--instui-component-menu-item-padding-vertical)\n      var(--instui-component-menu-item-padding-horizontal);\n    color: var(--instui-component-menu-item-label-color);\n    font-family: var(--instui-component-menu-item-font-family);\n    font-size: var(--instui-component-menu-item-font-size);\n    font-weight: var(--instui-component-menu-item-font-weight);\n    line-height: var(--instui-component-menu-item-line-height);\n    cursor: pointer;\n  }\n\n  /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n  :scope > .item.-disabled {\n    opacity: var(--instui-opacity-disabled);\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :scope > .item:hover,\n  :scope > .item.-highlighted {\n    background: var(--instui-component-menu-item-highlighted-background);\n    color: var(--instui-component-menu-item-highlighted-label-color);\n  }\n\n  :scope > .item.-active,\n  :scope > .item[aria-checked=\"true\"] {\n    background: var(--instui-component-menu-item-active-background);\n    color: var(--instui-component-menu-item-active-label-color);\n  }\n\n  :scope > .item.-active:hover,\n  :scope > .item[aria-checked=\"true\"]:hover {\n    background: var(--instui-component-menu-item-selected-highlighted-background);\n  }\n\n  /* Secondary line inside an item (a description or shortcut). */\n  .item-info {\n    color: var(--instui-component-menu-item-label-info-color);\n  }\n\n  :scope > .item:hover .item-info,\n  :scope > .item.-highlighted .item-info {\n    color: var(--instui-component-menu-item-highlighted-label-info-color);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component menu.item\n * @memberOf menu\n * @selector .item\n * @summary A menu entry (InstUI `Menu.Item`); add -disabled, -highlighted, or -active/[aria-checked].\n * @modifier -disabled — Muted, non-interactive.\n * @modifier -highlighted — Highlighted background/text (keyboard focus or hover).\n * @modifier -active — Active/checked highlight; same styling as `[aria-checked=\"true\"]`.\n * @part .item-info — Secondary info text within the item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @structure\n * @scope (.pfx-menu) {\n *   :scope > .item {\n *     .item-info {}\n *   }\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .item {\n    display: block;\n    padding: var(--instui-component-menu-item-padding-vertical)\n      var(--instui-component-menu-item-padding-horizontal);\n    color: var(--instui-component-menu-item-label-color);\n    font-family: var(--instui-component-menu-item-font-family);\n    font-size: var(--instui-component-menu-item-font-size);\n    font-weight: var(--instui-component-menu-item-font-weight);\n    line-height: var(--instui-component-menu-item-line-height);\n    cursor: pointer;\n  }\n\n  /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n  :scope > .item.-disabled {\n    opacity: var(--instui-opacity-disabled);\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :scope > .item:hover,\n  :scope > .item.-highlighted {\n    background: var(--instui-component-menu-item-highlighted-background);\n    color: var(--instui-component-menu-item-highlighted-label-color);\n  }\n\n  :scope > .item.-active,\n  :scope > .item[aria-checked=\"true\"] {\n    background: var(--instui-component-menu-item-active-background);\n    color: var(--instui-component-menu-item-active-label-color);\n  }\n\n  :scope > .item.-active:hover,\n  :scope > .item[aria-checked=\"true\"]:hover {\n    background: var(--instui-component-menu-item-selected-highlighted-background);\n  }\n\n  /* Secondary line inside an item (a description or shortcut). */\n  .item-info {\n    color: var(--instui-component-menu-item-label-info-color);\n  }\n\n  :scope > .item:hover .item-info,\n  :scope > .item.-highlighted .item-info {\n    color: var(--instui-component-menu-item-highlighted-label-info-color);\n  }\n}\n"
+	"rebrand": "/**\n * @component menu.item\n * @memberOf menu\n * @selector .item\n * @summary A menu entry (InstUI `Menu.Item`); add -disabled, -highlighted, or -active/[aria-checked].\n * @modifier -disabled — Muted, non-interactive.\n * @modifier -highlighted — Highlighted background/text (keyboard focus or hover).\n * @modifier -active — Active/checked highlight; same styling as `[aria-checked=\"true\"]`.\n * @part .item-info — Secondary info text within the item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @structure\n * @component menu {\n *   .item {\n *     .item-info {}\n *   }\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .item {\n    display: block;\n    padding: var(--instui-component-menu-item-padding-vertical)\n      var(--instui-component-menu-item-padding-horizontal);\n    color: var(--instui-component-menu-item-label-color);\n    font-family: var(--instui-component-menu-item-font-family);\n    font-size: var(--instui-component-menu-item-font-size);\n    font-weight: var(--instui-component-menu-item-font-weight);\n    line-height: var(--instui-component-menu-item-line-height);\n    cursor: pointer;\n  }\n\n  /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n  :scope > .item.-disabled {\n    opacity: var(--instui-opacity-disabled);\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :scope > .item:hover,\n  :scope > .item.-highlighted {\n    background: var(--instui-component-menu-item-highlighted-background);\n    color: var(--instui-component-menu-item-highlighted-label-color);\n  }\n\n  :scope > .item.-active,\n  :scope > .item[aria-checked=\"true\"] {\n    background: var(--instui-component-menu-item-active-background);\n    color: var(--instui-component-menu-item-active-label-color);\n  }\n\n  :scope > .item.-active:hover,\n  :scope > .item[aria-checked=\"true\"]:hover {\n    background: var(--instui-component-menu-item-selected-highlighted-background);\n  }\n\n  /* Secondary line inside an item (a description or shortcut). */\n  .item-info {\n    color: var(--instui-component-menu-item-label-info-color);\n  }\n\n  :scope > .item:hover .item-info,\n  :scope > .item.-highlighted .item-info {\n    color: var(--instui-component-menu-item-highlighted-label-info-color);\n  }\n}\n",
+	"canvas": "/**\n * @component menu.item\n * @memberOf menu\n * @selector .item\n * @summary A menu entry (InstUI `Menu.Item`); add -disabled, -highlighted, or -active/[aria-checked].\n * @modifier -disabled — Muted, non-interactive.\n * @modifier -highlighted — Highlighted background/text (keyboard focus or hover).\n * @modifier -active — Active/checked highlight; same styling as `[aria-checked=\"true\"]`.\n * @part .item-info — Secondary info text within the item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @structure\n * @component menu {\n *   .item {\n *     .item-info {}\n *   }\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .item {\n    display: block;\n    padding: var(--instui-component-menu-item-padding-vertical)\n      var(--instui-component-menu-item-padding-horizontal);\n    color: var(--instui-component-menu-item-label-color);\n    font-family: var(--instui-component-menu-item-font-family);\n    font-size: var(--instui-component-menu-item-font-size);\n    font-weight: var(--instui-component-menu-item-font-weight);\n    line-height: var(--instui-component-menu-item-line-height);\n    cursor: pointer;\n  }\n\n  /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n  :scope > .item.-disabled {\n    opacity: var(--instui-opacity-disabled);\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :scope > .item:hover,\n  :scope > .item.-highlighted {\n    background: var(--instui-component-menu-item-highlighted-background);\n    color: var(--instui-component-menu-item-highlighted-label-color);\n  }\n\n  :scope > .item.-active,\n  :scope > .item[aria-checked=\"true\"] {\n    background: var(--instui-component-menu-item-active-background);\n    color: var(--instui-component-menu-item-active-label-color);\n  }\n\n  :scope > .item.-active:hover,\n  :scope > .item[aria-checked=\"true\"]:hover {\n    background: var(--instui-component-menu-item-selected-highlighted-background);\n  }\n\n  /* Secondary line inside an item (a description or shortcut). */\n  .item-info {\n    color: var(--instui-component-menu-item-label-info-color);\n  }\n\n  :scope > .item:hover .item-info,\n  :scope > .item.-highlighted .item-info {\n    color: var(--instui-component-menu-item-highlighted-label-info-color);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component menu.item\n * @memberOf menu\n * @selector .item\n * @summary A menu entry (InstUI `Menu.Item`); add -disabled, -highlighted, or -active/[aria-checked].\n * @modifier -disabled — Muted, non-interactive.\n * @modifier -highlighted — Highlighted background/text (keyboard focus or hover).\n * @modifier -active — Active/checked highlight; same styling as `[aria-checked=\"true\"]`.\n * @part .item-info — Secondary info text within the item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @structure\n * @component menu {\n *   .item {\n *     .item-info {}\n *   }\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .item {\n    display: block;\n    padding: var(--instui-component-menu-item-padding-vertical)\n      var(--instui-component-menu-item-padding-horizontal);\n    color: var(--instui-component-menu-item-label-color);\n    font-family: var(--instui-component-menu-item-font-family);\n    font-size: var(--instui-component-menu-item-font-size);\n    font-weight: var(--instui-component-menu-item-font-weight);\n    line-height: var(--instui-component-menu-item-line-height);\n    cursor: pointer;\n  }\n\n  /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n  :scope > .item.-disabled {\n    opacity: var(--instui-opacity-disabled);\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :scope > .item:hover,\n  :scope > .item.-highlighted {\n    background: var(--instui-component-menu-item-highlighted-background);\n    color: var(--instui-component-menu-item-highlighted-label-color);\n  }\n\n  :scope > .item.-active,\n  :scope > .item[aria-checked=\"true\"] {\n    background: var(--instui-component-menu-item-active-background);\n    color: var(--instui-component-menu-item-active-label-color);\n  }\n\n  :scope > .item.-active:hover,\n  :scope > .item[aria-checked=\"true\"]:hover {\n    background: var(--instui-component-menu-item-selected-highlighted-background);\n  }\n\n  /* Secondary line inside an item (a description or shortcut). */\n  .item-info {\n    color: var(--instui-component-menu-item-label-info-color);\n  }\n\n  :scope > .item:hover .item-info,\n  :scope > .item.-highlighted .item-info {\n    color: var(--instui-component-menu-item-highlighted-label-info-color);\n  }\n}\n"
 }.rebrand;
 const menuSeparator$1 = {
-	"rebrand": "/**\n * @component menu.separator\n * @memberOf menu\n * @selector .separator\n * @summary A divider rule between items (InstUI `Menu.Separator`).\n * @structure\n * @scope (.pfx-menu) {\n *   :scope > .separator {}\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .separator {\n    height: var(--instui-component-menu-separator-height);\n    background: var(--instui-component-menu-separator-background);\n    margin: var(--instui-component-menu-separator-margin-vertical)\n      var(--instui-component-menu-separator-margin-horizontal);\n  }\n}\n",
-	"canvas": "/**\n * @component menu.separator\n * @memberOf menu\n * @selector .separator\n * @summary A divider rule between items (InstUI `Menu.Separator`).\n * @structure\n * @scope (.pfx-menu) {\n *   :scope > .separator {}\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .separator {\n    height: var(--instui-component-menu-separator-height);\n    background: var(--instui-component-menu-separator-background);\n    margin: var(--instui-component-menu-separator-margin-vertical)\n      var(--instui-component-menu-separator-margin-horizontal);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component menu.separator\n * @memberOf menu\n * @selector .separator\n * @summary A divider rule between items (InstUI `Menu.Separator`).\n * @structure\n * @scope (.pfx-menu) {\n *   :scope > .separator {}\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .separator {\n    height: var(--instui-component-menu-separator-height);\n    background: var(--instui-component-menu-separator-background);\n    margin: var(--instui-component-menu-separator-margin-vertical)\n      var(--instui-component-menu-separator-margin-horizontal);\n  }\n}\n"
+	"rebrand": "/**\n * @component menu.separator\n * @memberOf menu\n * @selector .separator\n * @summary A divider rule between items (InstUI `Menu.Separator`).\n * @structure\n * @component menu {\n *   .separator {}\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .separator {\n    height: var(--instui-component-menu-separator-height);\n    background: var(--instui-component-menu-separator-background);\n    margin: var(--instui-component-menu-separator-margin-vertical)\n      var(--instui-component-menu-separator-margin-horizontal);\n  }\n}\n",
+	"canvas": "/**\n * @component menu.separator\n * @memberOf menu\n * @selector .separator\n * @summary A divider rule between items (InstUI `Menu.Separator`).\n * @structure\n * @component menu {\n *   .separator {}\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .separator {\n    height: var(--instui-component-menu-separator-height);\n    background: var(--instui-component-menu-separator-background);\n    margin: var(--instui-component-menu-separator-margin-vertical)\n      var(--instui-component-menu-separator-margin-horizontal);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component menu.separator\n * @memberOf menu\n * @selector .separator\n * @summary A divider rule between items (InstUI `Menu.Separator`).\n * @structure\n * @component menu {\n *   .separator {}\n * }\n */\n@scope (.pfx-menu) {\n  :scope > .separator {\n    height: var(--instui-component-menu-separator-height);\n    background: var(--instui-component-menu-separator-background);\n    margin: var(--instui-component-menu-separator-margin-vertical)\n      var(--instui-component-menu-separator-margin-horizontal);\n  }\n}\n"
 }.rebrand;
 const metric$1 = {
-	"rebrand": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @remarks Sets its own `gap` between the value and label, and its own horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n *   <span class=\"value\">1,284</span>\n *   <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n *   .value {}\n *   .label {}\n * }\n */\n.pfx-metric {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--instui-component-metric-gap-texts);\n  padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n\n@scope (.pfx-metric) {\n  :scope > .value {\n    color: var(--instui-component-metric-value-color);\n    font-family: var(--instui-component-metric-value-font-family);\n    font-size: var(--instui-component-metric-value-font-size);\n    font-weight: var(--instui-component-metric-value-font-weight);\n    line-height: var(--instui-component-metric-value-line-height);\n  }\n\n  :scope > .label {\n    color: var(--instui-component-metric-label-color);\n    font-family: var(--instui-component-metric-label-font-family);\n    font-size: var(--instui-component-metric-label-font-size);\n    font-weight: var(--instui-component-metric-label-font-weight);\n    line-height: var(--instui-component-metric-label-line-height);\n  }\n}\n\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n   actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n   covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n  align-items: flex-start;\n  text-align: start;\n}\n\n.pfx-metric.-text-align-center {\n  align-items: center;\n  text-align: center;\n}\n\n.pfx-metric.-text-align-end {\n  align-items: flex-end;\n  text-align: end;\n}\n",
-	"canvas": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @remarks Sets its own `gap` between the value and label, and its own horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n *   <span class=\"value\">1,284</span>\n *   <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n *   .value {}\n *   .label {}\n * }\n */\n.pfx-metric {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--instui-component-metric-gap-texts);\n  padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n\n@scope (.pfx-metric) {\n  :scope > .value {\n    color: var(--instui-component-metric-value-color);\n    font-family: var(--instui-component-metric-value-font-family);\n    font-size: var(--instui-component-metric-value-font-size);\n    font-weight: var(--instui-component-metric-value-font-weight);\n    line-height: var(--instui-component-metric-value-line-height);\n  }\n\n  :scope > .label {\n    color: var(--instui-component-metric-label-color);\n    font-family: var(--instui-component-metric-label-font-family);\n    font-size: var(--instui-component-metric-label-font-size);\n    font-weight: var(--instui-component-metric-label-font-weight);\n    line-height: var(--instui-component-metric-label-line-height);\n  }\n}\n\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n   actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n   covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n  align-items: flex-start;\n  text-align: start;\n}\n\n.pfx-metric.-text-align-center {\n  align-items: center;\n  text-align: center;\n}\n\n.pfx-metric.-text-align-end {\n  align-items: flex-end;\n  text-align: end;\n}\n",
-	"canvasHighContrast": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @remarks Sets its own `gap` between the value and label, and its own horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n *   <span class=\"value\">1,284</span>\n *   <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n *   .value {}\n *   .label {}\n * }\n */\n.pfx-metric {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--instui-component-metric-gap-texts);\n  padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n\n@scope (.pfx-metric) {\n  :scope > .value {\n    color: var(--instui-component-metric-value-color);\n    font-family: var(--instui-component-metric-value-font-family);\n    font-size: var(--instui-component-metric-value-font-size);\n    font-weight: var(--instui-component-metric-value-font-weight);\n    line-height: var(--instui-component-metric-value-line-height);\n  }\n\n  :scope > .label {\n    color: var(--instui-component-metric-label-color);\n    font-family: var(--instui-component-metric-label-font-family);\n    font-size: var(--instui-component-metric-label-font-size);\n    font-weight: var(--instui-component-metric-label-font-weight);\n    line-height: var(--instui-component-metric-label-line-height);\n  }\n}\n\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n   actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n   covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n  align-items: flex-start;\n  text-align: start;\n}\n\n.pfx-metric.-text-align-center {\n  align-items: center;\n  text-align: center;\n}\n\n.pfx-metric.-text-align-end {\n  align-items: flex-end;\n  text-align: end;\n}\n"
+	"rebrand": "/**\n * @component metric\n * @selector .pfx-metric\n * @summary A labelled statistic — a large value over a caption.\n * @remarks Sets its own `gap` between the value and label, and its own horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * ```html\n * <div class=\"pfx-metric\">\n *   <span class=\"value\">1,284</span>\n *   <span class=\"label\">Active users</span>\n * </div>\n * ```\n * @structure\n * .pfx-metric {\n *   .value {}\n *   .label {}\n * }\n */\n@scope (.pfx-metric) {\n  :scope {\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--instui-component-metric-gap-texts);\n    padding: 0 var(--instui-component-metric-padding-horizontal);\n\n    > .value {\n      color: var(--instui-component-metric-value-color);\n      font-family: var(--instui-component-metric-value-font-family);\n      font-size: var(--instui-component-metric-value-font-size);\n      font-weight: var(--instui-component-metric-value-font-weight);\n      line-height: var(--instui-component-metric-value-line-height);\n    }\n\n    > .label {\n      color: var(--instui-component-metric-label-color);\n      font-family: var(--instui-component-metric-label-font-family);\n      font-size: var(--instui-component-metric-label-font-size);\n      font-weight: var(--instui-component-metric-label-font-weight);\n      line-height: var(--instui-component-metric-label-line-height);\n    }\n\n    /* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n       actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n       covers wrapped multi-line text. */\n    &.-text-align-start {\n      align-items: flex-start;\n      text-align: start;\n    }\n\n    &.-text-align-center {\n      align-items: center;\n      text-align: center;\n    }\n\n    &.-text-align-end {\n      align-items: flex-end;\n      text-align: end;\n    }\n  }\n}\n",
+	"canvas": "/**\n * @component metric\n * @selector .pfx-metric\n * @summary A labelled statistic — a large value over a caption.\n * @remarks Sets its own `gap` between the value and label, and its own horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * ```html\n * <div class=\"pfx-metric\">\n *   <span class=\"value\">1,284</span>\n *   <span class=\"label\">Active users</span>\n * </div>\n * ```\n * @structure\n * .pfx-metric {\n *   .value {}\n *   .label {}\n * }\n */\n@scope (.pfx-metric) {\n  :scope {\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--instui-component-metric-gap-texts);\n    padding: 0 var(--instui-component-metric-padding-horizontal);\n\n    > .value {\n      color: var(--instui-component-metric-value-color);\n      font-family: var(--instui-component-metric-value-font-family);\n      font-size: var(--instui-component-metric-value-font-size);\n      font-weight: var(--instui-component-metric-value-font-weight);\n      line-height: var(--instui-component-metric-value-line-height);\n    }\n\n    > .label {\n      color: var(--instui-component-metric-label-color);\n      font-family: var(--instui-component-metric-label-font-family);\n      font-size: var(--instui-component-metric-label-font-size);\n      font-weight: var(--instui-component-metric-label-font-weight);\n      line-height: var(--instui-component-metric-label-line-height);\n    }\n\n    /* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n       actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n       covers wrapped multi-line text. */\n    &.-text-align-start {\n      align-items: flex-start;\n      text-align: start;\n    }\n\n    &.-text-align-center {\n      align-items: center;\n      text-align: center;\n    }\n\n    &.-text-align-end {\n      align-items: flex-end;\n      text-align: end;\n    }\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component metric\n * @selector .pfx-metric\n * @summary A labelled statistic — a large value over a caption.\n * @remarks Sets its own `gap` between the value and label, and its own horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * ```html\n * <div class=\"pfx-metric\">\n *   <span class=\"value\">1,284</span>\n *   <span class=\"label\">Active users</span>\n * </div>\n * ```\n * @structure\n * .pfx-metric {\n *   .value {}\n *   .label {}\n * }\n */\n@scope (.pfx-metric) {\n  :scope {\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--instui-component-metric-gap-texts);\n    padding: 0 var(--instui-component-metric-padding-horizontal);\n\n    > .value {\n      color: var(--instui-component-metric-value-color);\n      font-family: var(--instui-component-metric-value-font-family);\n      font-size: var(--instui-component-metric-value-font-size);\n      font-weight: var(--instui-component-metric-value-font-weight);\n      line-height: var(--instui-component-metric-value-line-height);\n    }\n\n    > .label {\n      color: var(--instui-component-metric-label-color);\n      font-family: var(--instui-component-metric-label-font-family);\n      font-size: var(--instui-component-metric-label-font-size);\n      font-weight: var(--instui-component-metric-label-font-weight);\n      line-height: var(--instui-component-metric-label-line-height);\n    }\n\n    /* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n       actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n       covers wrapped multi-line text. */\n    &.-text-align-start {\n      align-items: flex-start;\n      text-align: start;\n    }\n\n    &.-text-align-center {\n      align-items: center;\n      text-align: center;\n    }\n\n    &.-text-align-end {\n      align-items: flex-end;\n      text-align: end;\n    }\n  }\n}\n"
 }.rebrand;
 const modal$1 = {
 	"rebrand": "/**\n * @component modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @element dialog\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding. @affects modal.header @affects modal.body @affects modal.footer — Tightens each part's padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body). @affects modal.header @affects modal.body @affects modal.footer — Recolours each part for the on-dark look.\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body. @affects modal.body — Scrolls the body when the modal is capped to the viewport.\n * @remarks See the `modal.header`, `modal.body`, and `modal.footer` members for the individual parts.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n *   <div class=\"header\"><strong>Small</strong></div>\n *   <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n *   <div class=\"footer\">\n *     <button class=\"pfx-button\">Close</button>\n *   </div>\n * </dialog>\n * @structure\n * .pfx-modal {\n *   .header {}\n *   .body {}\n *   .footer {}\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n.pfx-modal {\n  max-width: var(--instui-component-modal-medium-max-width);\n  background: var(--instui-component-modal-background-color);\n  color: var(--instui-component-modal-text-color);\n  border: var(--instui-component-modal-border-width) solid\n    var(--instui-component-modal-border-color);\n  border-radius: var(--instui-component-modal-border-radius);\n  font-family: var(--instui-component-modal-font-family);\n  overflow: hidden;\n  /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n  box-shadow: var(--instui-elevation-topmost);\n}\n\n/* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n   no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n   optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\ndialog.pfx-modal {\n  margin: auto;\n  padding: 0;\n}\n\ndialog.pfx-modal::backdrop {\n  background: var(--instui-component-mask-background-color);\n}\n\ndialog.pfx-modal.-blur::backdrop {\n  backdrop-filter: blur(0.5rem);\n}\n\n.pfx-modal.-size-sm {\n  max-width: var(--instui-component-modal-small-max-width);\n}\n\n.pfx-modal.-size-lg {\n  max-width: var(--instui-component-modal-large-max-width);\n}\n\n.pfx-modal.-size-auto {\n  max-width: none;\n  min-width: var(--instui-component-modal-auto-min-width);\n}\n\n/* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n   inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n   `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n   at the viewport edge. */\n.pfx-modal.-size-fullscreen {\n  position: fixed;\n  inset: 0;\n  width: auto;\n  height: auto;\n  max-width: none;\n  max-height: none;\n  margin: 0;\n  border-radius: 0;\n}\n\n/* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n   stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n.pfx-modal.-overflow-fit {\n  display: flex;\n  flex-direction: column;\n  max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n}\n\n.pfx-modal.-color-inverse {\n  background: var(--instui-component-modal-inverse-background-color);\n  color: var(--instui-component-modal-inverse-text-color);\n  border-color: var(--instui-component-modal-inverse-border-color);\n}\n",
@@ -446,34 +448,34 @@ const modal$1 = {
 	"canvasHighContrast": "/**\n * @component modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @element dialog\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding. @affects modal.header @affects modal.body @affects modal.footer — Tightens each part's padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body). @affects modal.header @affects modal.body @affects modal.footer — Recolours each part for the on-dark look.\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body. @affects modal.body — Scrolls the body when the modal is capped to the viewport.\n * @remarks See the `modal.header`, `modal.body`, and `modal.footer` members for the individual parts.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n *   <div class=\"header\"><strong>Small</strong></div>\n *   <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n *   <div class=\"footer\">\n *     <button class=\"pfx-button\">Close</button>\n *   </div>\n * </dialog>\n * @structure\n * .pfx-modal {\n *   .header {}\n *   .body {}\n *   .footer {}\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n.pfx-modal {\n  max-width: var(--instui-component-modal-medium-max-width);\n  background: var(--instui-component-modal-background-color);\n  color: var(--instui-component-modal-text-color);\n  border: var(--instui-component-modal-border-width) solid\n    var(--instui-component-modal-border-color);\n  border-radius: var(--instui-component-modal-border-radius);\n  font-family: var(--instui-component-modal-font-family);\n  overflow: hidden;\n  /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n  box-shadow: var(--instui-elevation-topmost);\n}\n\n/* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n   no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n   optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\ndialog.pfx-modal {\n  margin: auto;\n  padding: 0;\n}\n\ndialog.pfx-modal::backdrop {\n  background: var(--instui-component-mask-background-color);\n}\n\ndialog.pfx-modal.-blur::backdrop {\n  backdrop-filter: blur(0.5rem);\n}\n\n.pfx-modal.-size-sm {\n  max-width: var(--instui-component-modal-small-max-width);\n}\n\n.pfx-modal.-size-lg {\n  max-width: var(--instui-component-modal-large-max-width);\n}\n\n.pfx-modal.-size-auto {\n  max-width: none;\n  min-width: var(--instui-component-modal-auto-min-width);\n}\n\n/* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n   inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n   `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n   at the viewport edge. */\n.pfx-modal.-size-fullscreen {\n  position: fixed;\n  inset: 0;\n  width: auto;\n  height: auto;\n  max-width: none;\n  max-height: none;\n  margin: 0;\n  border-radius: 0;\n}\n\n/* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n   stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n.pfx-modal.-overflow-fit {\n  display: flex;\n  flex-direction: column;\n  max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n}\n\n.pfx-modal.-color-inverse {\n  background: var(--instui-component-modal-inverse-background-color);\n  color: var(--instui-component-modal-inverse-text-color);\n  border-color: var(--instui-component-modal-inverse-border-color);\n}\n"
 }.rebrand;
 const modalBody$1 = {
-	"rebrand": "/**\n * @component modal.body\n * @memberOf modal\n * @selector .body\n * @summary The content region (InstUI `Modal.Body`); a lone `<img>` goes full-bleed.\n * @remarks The parent `modal`'s `-overflow-fit`, `-density-compact`, and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @scope (.pfx-modal) {\n *   :scope > .body {\n *     code {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope.-overflow-fit > .body {\n    overflow-y: auto;\n  }\n\n  :scope > .body {\n    padding: var(--instui-component-modal-body-padding);\n  }\n\n  /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n   modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n  :scope > .body:has(> img) {\n    padding: 0;\n  }\n\n  :scope > .body:has(> img) img {\n    display: block;\n    width: 100%;\n  }\n\n  :scope.-density-compact > .body {\n    padding: var(--instui-component-modal-body-padding-compact);\n  }\n\n  :scope.-color-inverse > .body {\n    background: var(--instui-component-modal-body-inverse-background-color);\n  }\n}\n",
-	"canvas": "/**\n * @component modal.body\n * @memberOf modal\n * @selector .body\n * @summary The content region (InstUI `Modal.Body`); a lone `<img>` goes full-bleed.\n * @remarks The parent `modal`'s `-overflow-fit`, `-density-compact`, and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @scope (.pfx-modal) {\n *   :scope > .body {\n *     code {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope.-overflow-fit > .body {\n    overflow-y: auto;\n  }\n\n  :scope > .body {\n    padding: var(--instui-component-modal-body-padding);\n  }\n\n  /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n   modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n  :scope > .body:has(> img) {\n    padding: 0;\n  }\n\n  :scope > .body:has(> img) img {\n    display: block;\n    width: 100%;\n  }\n\n  :scope.-density-compact > .body {\n    padding: var(--instui-component-modal-body-padding-compact);\n  }\n\n  :scope.-color-inverse > .body {\n    background: var(--instui-component-modal-body-inverse-background-color);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component modal.body\n * @memberOf modal\n * @selector .body\n * @summary The content region (InstUI `Modal.Body`); a lone `<img>` goes full-bleed.\n * @remarks The parent `modal`'s `-overflow-fit`, `-density-compact`, and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @scope (.pfx-modal) {\n *   :scope > .body {\n *     code {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope.-overflow-fit > .body {\n    overflow-y: auto;\n  }\n\n  :scope > .body {\n    padding: var(--instui-component-modal-body-padding);\n  }\n\n  /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n   modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n  :scope > .body:has(> img) {\n    padding: 0;\n  }\n\n  :scope > .body:has(> img) img {\n    display: block;\n    width: 100%;\n  }\n\n  :scope.-density-compact > .body {\n    padding: var(--instui-component-modal-body-padding-compact);\n  }\n\n  :scope.-color-inverse > .body {\n    background: var(--instui-component-modal-body-inverse-background-color);\n  }\n}\n"
+	"rebrand": "/**\n * @component modal.body\n * @memberOf modal\n * @selector .body\n * @summary The content region (InstUI `Modal.Body`); a lone `<img>` goes full-bleed.\n * @remarks The parent `modal`'s `-overflow-fit`, `-density-compact`, and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n *   .body {\n *     code {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope.-overflow-fit > .body {\n    overflow-y: auto;\n  }\n\n  :scope > .body {\n    padding: var(--instui-component-modal-body-padding);\n  }\n\n  /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n   modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n  :scope > .body:has(> img) {\n    padding: 0;\n  }\n\n  :scope > .body:has(> img) img {\n    display: block;\n    width: 100%;\n  }\n\n  :scope.-density-compact > .body {\n    padding: var(--instui-component-modal-body-padding-compact);\n  }\n\n  :scope.-color-inverse > .body {\n    background: var(--instui-component-modal-body-inverse-background-color);\n  }\n}\n",
+	"canvas": "/**\n * @component modal.body\n * @memberOf modal\n * @selector .body\n * @summary The content region (InstUI `Modal.Body`); a lone `<img>` goes full-bleed.\n * @remarks The parent `modal`'s `-overflow-fit`, `-density-compact`, and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n *   .body {\n *     code {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope.-overflow-fit > .body {\n    overflow-y: auto;\n  }\n\n  :scope > .body {\n    padding: var(--instui-component-modal-body-padding);\n  }\n\n  /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n   modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n  :scope > .body:has(> img) {\n    padding: 0;\n  }\n\n  :scope > .body:has(> img) img {\n    display: block;\n    width: 100%;\n  }\n\n  :scope.-density-compact > .body {\n    padding: var(--instui-component-modal-body-padding-compact);\n  }\n\n  :scope.-color-inverse > .body {\n    background: var(--instui-component-modal-body-inverse-background-color);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component modal.body\n * @memberOf modal\n * @selector .body\n * @summary The content region (InstUI `Modal.Body`); a lone `<img>` goes full-bleed.\n * @remarks The parent `modal`'s `-overflow-fit`, `-density-compact`, and `-color-inverse` modifiers restyle this member — see `modal`'s own doc for those modifiers.\n * @structure\n * @component modal {\n *   .body {\n *     code {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope.-overflow-fit > .body {\n    overflow-y: auto;\n  }\n\n  :scope > .body {\n    padding: var(--instui-component-modal-body-padding);\n  }\n\n  /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n   modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n  :scope > .body:has(> img) {\n    padding: 0;\n  }\n\n  :scope > .body:has(> img) img {\n    display: block;\n    width: 100%;\n  }\n\n  :scope.-density-compact > .body {\n    padding: var(--instui-component-modal-body-padding-compact);\n  }\n\n  :scope.-color-inverse > .body {\n    background: var(--instui-component-modal-body-inverse-background-color);\n  }\n}\n"
 }.rebrand;
 const modalFooter$1 = {
-	"rebrand": "/**\n * @component modal.footer\n * @memberOf modal\n * @selector .footer\n * @summary The actions row (InstUI `Modal.Footer`).\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 * @scope (.pfx-modal) {\n *   :scope > .footer {\n *     @component button {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope > .footer {\n    padding: var(--instui-component-modal-footer-padding);\n    background: var(--instui-component-modal-footer-background-color);\n    border-top: var(--instui-component-modal-footer-border-width) solid\n      var(--instui-component-modal-footer-border-color);\n    border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n      var(--instui-component-modal-footer-border-radius);\n  }\n\n  :scope.-density-compact > .footer {\n    padding: var(--instui-component-modal-footer-padding-compact);\n  }\n\n  :scope.-color-inverse > .footer {\n    background: var(--instui-component-modal-footer-inverse-background-color);\n    border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n  }\n}\n",
-	"canvas": "/**\n * @component modal.footer\n * @memberOf modal\n * @selector .footer\n * @summary The actions row (InstUI `Modal.Footer`).\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 * @scope (.pfx-modal) {\n *   :scope > .footer {\n *     @component button {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope > .footer {\n    padding: var(--instui-component-modal-footer-padding);\n    background: var(--instui-component-modal-footer-background-color);\n    border-top: var(--instui-component-modal-footer-border-width) solid\n      var(--instui-component-modal-footer-border-color);\n    border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n      var(--instui-component-modal-footer-border-radius);\n  }\n\n  :scope.-density-compact > .footer {\n    padding: var(--instui-component-modal-footer-padding-compact);\n  }\n\n  :scope.-color-inverse > .footer {\n    background: var(--instui-component-modal-footer-inverse-background-color);\n    border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component modal.footer\n * @memberOf modal\n * @selector .footer\n * @summary The actions row (InstUI `Modal.Footer`).\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 * @scope (.pfx-modal) {\n *   :scope > .footer {\n *     @component button {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope > .footer {\n    padding: var(--instui-component-modal-footer-padding);\n    background: var(--instui-component-modal-footer-background-color);\n    border-top: var(--instui-component-modal-footer-border-width) solid\n      var(--instui-component-modal-footer-border-color);\n    border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n      var(--instui-component-modal-footer-border-radius);\n  }\n\n  :scope.-density-compact > .footer {\n    padding: var(--instui-component-modal-footer-padding-compact);\n  }\n\n  :scope.-color-inverse > .footer {\n    background: var(--instui-component-modal-footer-inverse-background-color);\n    border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n  }\n}\n"
+	"rebrand": "/**\n * @component modal.footer\n * @memberOf modal\n * @selector .footer\n * @summary The actions row (InstUI `Modal.Footer`).\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 *   .footer {\n *     @component button {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope > .footer {\n    padding: var(--instui-component-modal-footer-padding);\n    background: var(--instui-component-modal-footer-background-color);\n    border-top: var(--instui-component-modal-footer-border-width) solid\n      var(--instui-component-modal-footer-border-color);\n    border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n      var(--instui-component-modal-footer-border-radius);\n  }\n\n  :scope.-density-compact > .footer {\n    padding: var(--instui-component-modal-footer-padding-compact);\n  }\n\n  :scope.-color-inverse > .footer {\n    background: var(--instui-component-modal-footer-inverse-background-color);\n    border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n  }\n}\n",
+	"canvas": "/**\n * @component modal.footer\n * @memberOf modal\n * @selector .footer\n * @summary The actions row (InstUI `Modal.Footer`).\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 *   .footer {\n *     @component button {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope > .footer {\n    padding: var(--instui-component-modal-footer-padding);\n    background: var(--instui-component-modal-footer-background-color);\n    border-top: var(--instui-component-modal-footer-border-width) solid\n      var(--instui-component-modal-footer-border-color);\n    border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n      var(--instui-component-modal-footer-border-radius);\n  }\n\n  :scope.-density-compact > .footer {\n    padding: var(--instui-component-modal-footer-padding-compact);\n  }\n\n  :scope.-color-inverse > .footer {\n    background: var(--instui-component-modal-footer-inverse-background-color);\n    border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component modal.footer\n * @memberOf modal\n * @selector .footer\n * @summary The actions row (InstUI `Modal.Footer`).\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 *   .footer {\n *     @component button {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope > .footer {\n    padding: var(--instui-component-modal-footer-padding);\n    background: var(--instui-component-modal-footer-background-color);\n    border-top: var(--instui-component-modal-footer-border-width) solid\n      var(--instui-component-modal-footer-border-color);\n    border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n      var(--instui-component-modal-footer-border-radius);\n  }\n\n  :scope.-density-compact > .footer {\n    padding: var(--instui-component-modal-footer-padding-compact);\n  }\n\n  :scope.-color-inverse > .footer {\n    background: var(--instui-component-modal-footer-inverse-background-color);\n    border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n  }\n}\n"
 }.rebrand;
 const modalHeader$1 = {
-	"rebrand": "/**\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 * @scope (.pfx-modal) {\n *   :scope > .header {\n *     strong {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope > .header {\n    padding: var(--instui-component-modal-header-padding);\n    background: var(--instui-component-modal-header-background-color);\n    border-bottom: var(--instui-component-modal-header-border-width) solid\n      var(--instui-component-modal-header-border-color);\n  }\n\n  :scope.-density-compact > .header {\n    padding: var(--instui-component-modal-header-padding-compact);\n  }\n\n  :scope.-color-inverse > .header {\n    background: var(--instui-component-modal-header-inverse-background-color);\n    border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n  }\n}\n",
-	"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 * @scope (.pfx-modal) {\n *   :scope > .header {\n *     strong {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope > .header {\n    padding: var(--instui-component-modal-header-padding);\n    background: var(--instui-component-modal-header-background-color);\n    border-bottom: var(--instui-component-modal-header-border-width) solid\n      var(--instui-component-modal-header-border-color);\n  }\n\n  :scope.-density-compact > .header {\n    padding: var(--instui-component-modal-header-padding-compact);\n  }\n\n  :scope.-color-inverse > .header {\n    background: var(--instui-component-modal-header-inverse-background-color);\n    border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n  }\n}\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 * @scope (.pfx-modal) {\n *   :scope > .header {\n *     strong {}\n *   }\n * }\n */\n@scope (.pfx-modal) {\n  :scope > .header {\n    padding: var(--instui-component-modal-header-padding);\n    background: var(--instui-component-modal-header-background-color);\n    border-bottom: var(--instui-component-modal-header-border-width) solid\n      var(--instui-component-modal-header-border-color);\n  }\n\n  :scope.-density-compact > .header {\n    padding: var(--instui-component-modal-header-padding-compact);\n  }\n\n  :scope.-color-inverse > .header {\n    background: var(--instui-component-modal-header-inverse-background-color);\n    border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n  }\n}\n"
+	"rebrand": "/**\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 > .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  :scope.-density-compact > .header {\n    padding: var(--instui-component-modal-header-padding-compact);\n  }\n\n  :scope.-color-inverse > .header {\n    background: var(--instui-component-modal-header-inverse-background-color);\n    border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n  }\n}\n",
+	"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 > .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  :scope.-density-compact > .header {\n    padding: var(--instui-component-modal-header-padding-compact);\n  }\n\n  :scope.-color-inverse > .header {\n    background: var(--instui-component-modal-header-inverse-background-color);\n    border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n  }\n}\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 > .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  :scope.-density-compact > .header {\n    padding: var(--instui-component-modal-header-padding-compact);\n  }\n\n  :scope.-color-inverse > .header {\n    background: var(--instui-component-modal-header-inverse-background-color);\n    border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n  }\n}\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 *   .ellipsis {}\n * }\n */\n.pfx-pagination {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-pagination-page-indicator-gap);\n  font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n  /* A nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .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  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n",
-	"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 *   .ellipsis {}\n * }\n */\n.pfx-pagination {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-pagination-page-indicator-gap);\n  font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n  /* A nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .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  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n",
-	"canvasHighContrast": "/**\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 *   .ellipsis {}\n * }\n */\n.pfx-pagination {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-pagination-page-indicator-gap);\n  font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n  /* A nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .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  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n"
+	"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  /* A nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .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  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n",
+	"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  /* A nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .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  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n",
+	"canvasHighContrast": "/**\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  /* A nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .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  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n"
 }.rebrand;
 const paginationPage$1 = {
-	"rebrand": "/**\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 * @scope (.pfx-pagination) {\n *   :scope > .page {}\n * }\n */\n@scope (.pfx-pagination) {\n  /* A page number — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .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  :scope > .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  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n}\n",
-	"canvas": "/**\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 * @scope (.pfx-pagination) {\n *   :scope > .page {}\n * }\n */\n@scope (.pfx-pagination) {\n  /* A page number — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .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  :scope > .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  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n}\n",
-	"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 * @scope (.pfx-pagination) {\n *   :scope > .page {}\n * }\n */\n@scope (.pfx-pagination) {\n  /* A page number — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .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  :scope > .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  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n}\n"
+	"rebrand": "/**\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  /* A page number — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .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  :scope > .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  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n}\n",
+	"canvas": "/**\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  /* A page number — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .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  :scope > .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  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n}\n",
+	"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  /* A page number — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .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  :scope > .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  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n}\n"
 }.rebrand;
 const pill$1 = {
-	"rebrand": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"instui-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.pfx-pill {\n  display: inline-flex;\n  align-items: center;\n  height: var(--instui-component-pill-height);\n  max-width: var(--instui-component-pill-max-width);\n  padding: 0 var(--instui-component-pill-padding-horizontal);\n  background: var(--instui-component-pill-background-color);\n  color: var(--instui-component-pill-base-text-color);\n  border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n    var(--instui-component-pill-base-border-color);\n  border-radius: var(--instui-component-pill-border-radius);\n  font-family: var(--instui-component-pill-font-family);\n  font-size: var(--instui-component-pill-text-font-size);\n  font-weight: var(--instui-component-pill-text-font-weight);\n  line-height: var(--instui-component-pill-line-height);\n}\n\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n   inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n  inline-size: var(--instui-font-size-text-xs);\n  block-size: var(--instui-font-size-text-xs);\n  margin-inline-end: 0.375rem;\n}\n\n.pfx-pill.-color-info {\n  color: var(--instui-component-pill-info-text-color);\n  border-color: var(--instui-component-pill-info-border-color);\n}\n\n.pfx-pill.-color-success {\n  color: var(--instui-component-pill-success-text-color);\n  border-color: var(--instui-component-pill-success-border-color);\n}\n\n.pfx-pill.-color-warning {\n  color: var(--instui-component-pill-warning-text-color);\n  border-color: var(--instui-component-pill-warning-border-color);\n}\n\n.pfx-pill.-color-danger {\n  color: var(--instui-component-pill-error-text-color);\n  border-color: var(--instui-component-pill-error-border-color);\n}\n\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n  font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n",
-	"canvas": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"instui-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.pfx-pill {\n  display: inline-flex;\n  align-items: center;\n  height: var(--instui-component-pill-height);\n  max-width: var(--instui-component-pill-max-width);\n  padding: 0 var(--instui-component-pill-padding-horizontal);\n  background: var(--instui-component-pill-background-color);\n  color: var(--instui-component-pill-base-text-color);\n  border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n    var(--instui-component-pill-base-border-color);\n  border-radius: var(--instui-component-pill-border-radius);\n  font-family: var(--instui-component-pill-font-family);\n  font-size: var(--instui-component-pill-text-font-size);\n  font-weight: var(--instui-component-pill-text-font-weight);\n  line-height: var(--instui-component-pill-line-height);\n}\n\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n   inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n  inline-size: var(--instui-font-size-text-xs);\n  block-size: var(--instui-font-size-text-xs);\n  margin-inline-end: 0.375rem;\n}\n\n.pfx-pill.-color-info {\n  color: var(--instui-component-pill-info-text-color);\n  border-color: var(--instui-component-pill-info-border-color);\n}\n\n.pfx-pill.-color-success {\n  color: var(--instui-component-pill-success-text-color);\n  border-color: var(--instui-component-pill-success-border-color);\n}\n\n.pfx-pill.-color-warning {\n  color: var(--instui-component-pill-warning-text-color);\n  border-color: var(--instui-component-pill-warning-border-color);\n}\n\n.pfx-pill.-color-danger {\n  color: var(--instui-component-pill-error-text-color);\n  border-color: var(--instui-component-pill-error-border-color);\n}\n\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n  font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n",
-	"canvasHighContrast": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"instui-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.pfx-pill {\n  display: inline-flex;\n  align-items: center;\n  height: var(--instui-component-pill-height);\n  max-width: var(--instui-component-pill-max-width);\n  padding: 0 var(--instui-component-pill-padding-horizontal);\n  background: var(--instui-component-pill-background-color);\n  color: var(--instui-component-pill-base-text-color);\n  border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n    var(--instui-component-pill-base-border-color);\n  border-radius: var(--instui-component-pill-border-radius);\n  font-family: var(--instui-component-pill-font-family);\n  font-size: var(--instui-component-pill-text-font-size);\n  font-weight: var(--instui-component-pill-text-font-weight);\n  line-height: var(--instui-component-pill-line-height);\n}\n\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n   inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n  inline-size: var(--instui-font-size-text-xs);\n  block-size: var(--instui-font-size-text-xs);\n  margin-inline-end: 0.375rem;\n}\n\n.pfx-pill.-color-info {\n  color: var(--instui-component-pill-info-text-color);\n  border-color: var(--instui-component-pill-info-border-color);\n}\n\n.pfx-pill.-color-success {\n  color: var(--instui-component-pill-success-text-color);\n  border-color: var(--instui-component-pill-success-border-color);\n}\n\n.pfx-pill.-color-warning {\n  color: var(--instui-component-pill-warning-text-color);\n  border-color: var(--instui-component-pill-warning-border-color);\n}\n\n.pfx-pill.-color-danger {\n  color: var(--instui-component-pill-error-text-color);\n  border-color: var(--instui-component-pill-error-border-color);\n}\n\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n  font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n"
+	"rebrand": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```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.pfx-pill {\n  display: inline-flex;\n  align-items: center;\n  height: var(--instui-component-pill-height);\n  max-width: var(--instui-component-pill-max-width);\n  padding: 0 var(--instui-component-pill-padding-horizontal);\n  background: var(--instui-component-pill-background-color);\n  color: var(--instui-component-pill-base-text-color);\n  border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n    var(--instui-component-pill-base-border-color);\n  border-radius: var(--instui-component-pill-border-radius);\n  font-family: var(--instui-component-pill-font-family);\n  font-size: var(--instui-component-pill-text-font-size);\n  font-weight: var(--instui-component-pill-text-font-weight);\n  line-height: var(--instui-component-pill-line-height);\n}\n\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n   inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n  inline-size: var(--instui-font-size-text-xs);\n  block-size: var(--instui-font-size-text-xs);\n  margin-inline-end: 0.375rem;\n}\n\n.pfx-pill.-color-info {\n  color: var(--instui-component-pill-info-text-color);\n  border-color: var(--instui-component-pill-info-border-color);\n}\n\n.pfx-pill.-color-success {\n  color: var(--instui-component-pill-success-text-color);\n  border-color: var(--instui-component-pill-success-border-color);\n}\n\n.pfx-pill.-color-warning {\n  color: var(--instui-component-pill-warning-text-color);\n  border-color: var(--instui-component-pill-warning-border-color);\n}\n\n.pfx-pill.-color-danger {\n  color: var(--instui-component-pill-error-text-color);\n  border-color: var(--instui-component-pill-error-border-color);\n}\n\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n  font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n",
+	"canvas": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```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.pfx-pill {\n  display: inline-flex;\n  align-items: center;\n  height: var(--instui-component-pill-height);\n  max-width: var(--instui-component-pill-max-width);\n  padding: 0 var(--instui-component-pill-padding-horizontal);\n  background: var(--instui-component-pill-background-color);\n  color: var(--instui-component-pill-base-text-color);\n  border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n    var(--instui-component-pill-base-border-color);\n  border-radius: var(--instui-component-pill-border-radius);\n  font-family: var(--instui-component-pill-font-family);\n  font-size: var(--instui-component-pill-text-font-size);\n  font-weight: var(--instui-component-pill-text-font-weight);\n  line-height: var(--instui-component-pill-line-height);\n}\n\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n   inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n  inline-size: var(--instui-font-size-text-xs);\n  block-size: var(--instui-font-size-text-xs);\n  margin-inline-end: 0.375rem;\n}\n\n.pfx-pill.-color-info {\n  color: var(--instui-component-pill-info-text-color);\n  border-color: var(--instui-component-pill-info-border-color);\n}\n\n.pfx-pill.-color-success {\n  color: var(--instui-component-pill-success-text-color);\n  border-color: var(--instui-component-pill-success-border-color);\n}\n\n.pfx-pill.-color-warning {\n  color: var(--instui-component-pill-warning-text-color);\n  border-color: var(--instui-component-pill-warning-border-color);\n}\n\n.pfx-pill.-color-danger {\n  color: var(--instui-component-pill-error-text-color);\n  border-color: var(--instui-component-pill-error-border-color);\n}\n\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n  font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n",
+	"canvasHighContrast": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```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.pfx-pill {\n  display: inline-flex;\n  align-items: center;\n  height: var(--instui-component-pill-height);\n  max-width: var(--instui-component-pill-max-width);\n  padding: 0 var(--instui-component-pill-padding-horizontal);\n  background: var(--instui-component-pill-background-color);\n  color: var(--instui-component-pill-base-text-color);\n  border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n    var(--instui-component-pill-base-border-color);\n  border-radius: var(--instui-component-pill-border-radius);\n  font-family: var(--instui-component-pill-font-family);\n  font-size: var(--instui-component-pill-text-font-size);\n  font-weight: var(--instui-component-pill-text-font-weight);\n  line-height: var(--instui-component-pill-line-height);\n}\n\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n   inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n  inline-size: var(--instui-font-size-text-xs);\n  block-size: var(--instui-font-size-text-xs);\n  margin-inline-end: 0.375rem;\n}\n\n.pfx-pill.-color-info {\n  color: var(--instui-component-pill-info-text-color);\n  border-color: var(--instui-component-pill-info-border-color);\n}\n\n.pfx-pill.-color-success {\n  color: var(--instui-component-pill-success-text-color);\n  border-color: var(--instui-component-pill-success-border-color);\n}\n\n.pfx-pill.-color-warning {\n  color: var(--instui-component-pill-warning-text-color);\n  border-color: var(--instui-component-pill-warning-border-color);\n}\n\n.pfx-pill.-color-danger {\n  color: var(--instui-component-pill-error-text-color);\n  border-color: var(--instui-component-pill-error-border-color);\n}\n\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n  font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n"
 }.rebrand;
 const popover$1 = {
 	"rebrand": "/**\n * @component popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n *   <div class=\"pfx-heading -level-h4\">Share this page</div>\n *   <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n *   .pfx-heading {}\n *   .pfx-text {\n *     code {}\n *   }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n.pfx-popover {\n  background: var(--instui-color-background-elevated-surface-base);\n  color: var(--instui-color-text-base);\n  border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n  border-radius: var(--instui-component-popover-border-radius);\n  padding: var(--instui-spacing-space-sm);\n  box-shadow: var(--instui-elevation-above);\n}\n[popover].pfx-popover {\n  margin: 0;\n}\n/* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n   popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n   modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n   then centres the popover in the top layer. */\n@supports (position-area: block-end) {\n  [popover].pfx-popover {\n    position-anchor: --pantoken-anchor;\n    position-try-fallbacks: flip-block, flip-inline;\n  }\n  [popover].pfx-popover.-placement-top {\n    position-area: block-start;\n  }\n  [popover].pfx-popover.-placement-bottom {\n    position-area: block-end;\n  }\n  [popover].pfx-popover.-placement-start {\n    position-area: inline-start center;\n  }\n  [popover].pfx-popover.-placement-end {\n    position-area: inline-end center;\n  }\n}\n/* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n@supports (transition-behavior: allow-discrete) {\n  [popover].pfx-popover {\n    transition:\n      opacity 0.15s ease,\n      transform 0.15s ease,\n      overlay 0.15s allow-discrete,\n      display 0.15s allow-discrete;\n    opacity: 1;\n    transform: translateY(0);\n  }\n  [popover].pfx-popover:not(:popover-open) {\n    opacity: 0;\n    transform: translateY(-0.25rem);\n  }\n  @starting-style {\n    [popover].pfx-popover:popover-open {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n  }\n}\n",
@@ -516,24 +518,24 @@ const select = {
 	"canvasHighContrast": "/* Experimental: CSS Customizable Select (`appearance: base-select`, Chrome 135+, not yet Baseline).\n   Enhances .pfx-simple-select; degrades to the plain control where unsupported. */\n@supports (appearance: base-select) {\n  .pfx-simple-select,\n  .pfx-simple-select::picker(select) {\n    appearance: base-select;\n  }\n  /* Keep simple-select's own background-image caret; hide the UA-generated picker icon. */\n  .pfx-simple-select::picker-icon {\n    display: none;\n  }\n  .pfx-simple-select::picker(select) {\n    border: var(--instui-component-select-popover-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-border-radius-lg);\n    box-shadow: var(--instui-elevation-topmost);\n    background-color: var(--instui-component-options-item-background);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n  }\n  .pfx-simple-select option {\n    padding: var(--instui-component-options-item-padding-vertical)\n      var(--instui-component-options-item-padding-horizontal);\n    background-color: var(--instui-component-options-item-background);\n    color: var(--instui-component-options-item-color);\n    font-family: var(--instui-component-options-item-font-family);\n    font-weight: var(--instui-component-options-item-font-weight);\n    font-size: var(--instui-component-options-item-font-size);\n    line-height: var(--instui-component-options-item-line-height);\n    cursor: pointer;\n  }\n  /* Hide the UA checkmark; the selected row gets our own trailing check via background-image. */\n  .pfx-simple-select option::checkmark {\n    display: none;\n  }\n  .pfx-simple-select option:hover,\n  .pfx-simple-select option:focus {\n    background-color: var(--instui-component-options-item-highlighted-background);\n    color: var(--instui-component-options-item-highlighted-label-color);\n    outline: none;\n  }\n  .pfx-simple-select option:checked {\n    background-color: var(--instui-component-options-item-selected-background);\n    color: var(--instui-component-options-item-selected-label-color);\n    font-weight: var(--instui-component-options-item-font-weight-selected);\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right var(--instui-component-options-item-padding-horizontal) center;\n    background-size: 1rem 1rem;\n    padding-inline-end: calc(var(--instui-component-options-item-padding-horizontal) + 1.5rem);\n  }\n}\n"
 }.rebrand;
 const sideNavBar$1 = {
-	"rebrand": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @remarks Sets its own `gap` between nav items and its own `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. See the `side-nav-bar.item` member for the individual nav entries.\n * @modifier -minimized — Collapse to icons only (labels hidden). @affects side-nav-bar.item — Hides the item's label.\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n",
-	"canvas": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @remarks Sets its own `gap` between nav items and its own `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. See the `side-nav-bar.item` member for the individual nav entries.\n * @modifier -minimized — Collapse to icons only (labels hidden). @affects side-nav-bar.item — Hides the item's label.\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n",
-	"canvasHighContrast": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @remarks Sets its own `gap` between nav items and its own `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. See the `side-nav-bar.item` member for the individual nav entries.\n * @modifier -minimized — Collapse to icons only (labels hidden). @affects side-nav-bar.item — Hides the item's label.\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n"
+	"rebrand": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @remarks Sets its own `gap` between nav items and its own `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. See the `side-nav-bar.item` member for the individual nav entries.\n * @modifier -minimized — Collapse to icons only (labels hidden). @affects side-nav-bar.item — Hides the item's label.\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @structure\n * .pfx-side-nav-bar {\n *   .item:one-or-more {}\n * }\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n",
+	"canvas": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @remarks Sets its own `gap` between nav items and its own `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. See the `side-nav-bar.item` member for the individual nav entries.\n * @modifier -minimized — Collapse to icons only (labels hidden). @affects side-nav-bar.item — Hides the item's label.\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @structure\n * .pfx-side-nav-bar {\n *   .item:one-or-more {}\n * }\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n",
+	"canvasHighContrast": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @remarks Sets its own `gap` between nav items and its own `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. See the `side-nav-bar.item` member for the individual nav entries.\n * @modifier -minimized — Collapse to icons only (labels hidden). @affects side-nav-bar.item — Hides the item's label.\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @structure\n * .pfx-side-nav-bar {\n *   .item:one-or-more {}\n * }\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n"
 }.rebrand;
 const sideNavBarItem$1 = {
-	"rebrand": "/**\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 * @scope (.pfx-side-nav-bar) {\n *   :scope > .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n@scope (.pfx-side-nav-bar) {\n  :scope > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n",
-	"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 * @scope (.pfx-side-nav-bar) {\n *   :scope > .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n@scope (.pfx-side-nav-bar) {\n  :scope > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n",
-	"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 * @scope (.pfx-side-nav-bar) {\n *   :scope > .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n@scope (.pfx-side-nav-bar) {\n  :scope > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n"
+	"rebrand": "/**\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 > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n",
+	"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 > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n",
+	"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 > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n"
 }.rebrand;
 const spinner$1 = {
-	"rebrand": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```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.pfx-spinner {\n  display: inline-block;\n  width: var(--instui-component-spinner-spinner-size-md);\n  height: var(--instui-component-spinner-spinner-size-md);\n  border: var(--instui-component-spinner-stroke-width-md) solid\n    var(--instui-component-spinner-track-color);\n  border-top-color: var(--instui-component-spinner-color);\n  border-radius: 50%;\n  animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n\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\n.pfx-spinner.-color-inverse {\n  border-top-color: var(--instui-component-spinner-inverse-color);\n}\n",
-	"canvas": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```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.pfx-spinner {\n  display: inline-block;\n  width: var(--instui-component-spinner-spinner-size-md);\n  height: var(--instui-component-spinner-spinner-size-md);\n  border: var(--instui-component-spinner-stroke-width-md) solid\n    var(--instui-component-spinner-track-color);\n  border-top-color: var(--instui-component-spinner-color);\n  border-radius: 50%;\n  animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n\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\n.pfx-spinner.-color-inverse {\n  border-top-color: var(--instui-component-spinner-inverse-color);\n}\n",
-	"canvasHighContrast": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```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.pfx-spinner {\n  display: inline-block;\n  width: var(--instui-component-spinner-spinner-size-md);\n  height: var(--instui-component-spinner-spinner-size-md);\n  border: var(--instui-component-spinner-stroke-width-md) solid\n    var(--instui-component-spinner-track-color);\n  border-top-color: var(--instui-component-spinner-color);\n  border-radius: 50%;\n  animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n\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\n.pfx-spinner.-color-inverse {\n  border-top-color: var(--instui-component-spinner-inverse-color);\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 * @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;
 const table$1 = {
-	"rebrand": "/**\n * @component table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`. 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 * }\n */\n.pfx-table {\n  border-collapse: collapse;\n  width: 100%;\n  background: var(--instui-component-table-background);\n  color: var(--instui-component-table-color);\n  font-family: var(--instui-component-table-font-family);\n  font-size: var(--instui-component-table-font-size);\n}\n\n.pfx-table caption {\n  text-align: start;\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n}\n\n/* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n.pfx-table.-layout-fixed {\n  table-layout: fixed;\n}\n\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.pfx-table.-layout-stacked {\n  display: block;\n  width: auto;\n}\n",
-	"canvas": "/**\n * @component table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`. 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 * }\n */\n.pfx-table {\n  border-collapse: collapse;\n  width: 100%;\n  background: var(--instui-component-table-background);\n  color: var(--instui-component-table-color);\n  font-family: var(--instui-component-table-font-family);\n  font-size: var(--instui-component-table-font-size);\n}\n\n.pfx-table caption {\n  text-align: start;\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n}\n\n/* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n.pfx-table.-layout-fixed {\n  table-layout: fixed;\n}\n\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.pfx-table.-layout-stacked {\n  display: block;\n  width: auto;\n}\n",
-	"canvasHighContrast": "/**\n * @component table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`. 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 * }\n */\n.pfx-table {\n  border-collapse: collapse;\n  width: 100%;\n  background: var(--instui-component-table-background);\n  color: var(--instui-component-table-color);\n  font-family: var(--instui-component-table-font-family);\n  font-size: var(--instui-component-table-font-size);\n}\n\n.pfx-table caption {\n  text-align: start;\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n}\n\n/* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n.pfx-table.-layout-fixed {\n  table-layout: fixed;\n}\n\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.pfx-table.-layout-stacked {\n  display: block;\n  width: auto;\n}\n"
+	"rebrand": "/**\n * @component table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`. 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.pfx-table {\n  border-collapse: collapse;\n  width: 100%;\n  background: var(--instui-component-table-background);\n  color: var(--instui-component-table-color);\n  font-family: var(--instui-component-table-font-family);\n  font-size: var(--instui-component-table-font-size);\n}\n\n.pfx-table caption {\n  text-align: start;\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n}\n\n/* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n.pfx-table.-layout-fixed {\n  table-layout: fixed;\n}\n\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.pfx-table.-layout-stacked {\n  display: block;\n  width: auto;\n}\n",
+	"canvas": "/**\n * @component table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`. 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.pfx-table {\n  border-collapse: collapse;\n  width: 100%;\n  background: var(--instui-component-table-background);\n  color: var(--instui-component-table-color);\n  font-family: var(--instui-component-table-font-family);\n  font-size: var(--instui-component-table-font-size);\n}\n\n.pfx-table caption {\n  text-align: start;\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n}\n\n/* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n.pfx-table.-layout-fixed {\n  table-layout: fixed;\n}\n\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.pfx-table.-layout-stacked {\n  display: block;\n  width: auto;\n}\n",
+	"canvasHighContrast": "/**\n * @component table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`. 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.pfx-table {\n  border-collapse: collapse;\n  width: 100%;\n  background: var(--instui-component-table-background);\n  color: var(--instui-component-table-color);\n  font-family: var(--instui-component-table-font-family);\n  font-size: var(--instui-component-table-font-size);\n}\n\n.pfx-table caption {\n  text-align: start;\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n}\n\n/* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n.pfx-table.-layout-fixed {\n  table-layout: fixed;\n}\n\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.pfx-table.-layout-stacked {\n  display: block;\n  width: auto;\n}\n"
 }.rebrand;
 const tableBody$1 = {
 	"rebrand": "/**\n * @component table.body\n * @memberOf table\n * @selector tbody\n * @summary The table's data row group (InstUI `Table.Body`).\n * @remarks The parent `table`'s `-layout-stacked` modifier restyles this member — see `table`'s own doc for that modifier.\n * @structure\n * @component table {\n *   tbody {}\n * }\n */\n/* layout=\"stacked\": each row becomes a card; the body itself just stops being a table row-group box. */\n.pfx-table.-layout-stacked tbody {\n  display: block;\n  width: auto;\n}\n",
@@ -566,19 +568,19 @@ const tableRowHeader$1 = {
 	"canvasHighContrast": "/**\n * @component table.row-header\n * @memberOf table\n * @selector th[scope=\"row\"]\n * @summary A row-header cell (InstUI `Table.RowHeader`); styled from the row-header tokens, not the column-header ones.\n * @remarks The parent `table`'s `-layout-stacked` modifier stacks this member as a block and labels it via `::before` — see `table`'s own doc for that modifier.\n * @structure\n * @component table {\n *   tbody {\n *     tr {\n *       th[scope=\"row\"] {}\n *     }\n *   }\n * }\n */\n/* A row-header cell (th scope=row) — styled from the row-header tokens, not the column-header ones. */\n.pfx-table tbody th,\n.pfx-table th[scope=\"row\"] {\n  background: var(--instui-component-table-row-header-background);\n  color: var(--instui-component-table-row-header-color);\n  font-weight: var(--instui-component-table-row-header-font-weight);\n  line-height: var(--instui-component-table-row-header-line-height);\n  padding: var(--instui-component-table-row-header-padding-vertical)\n    var(--instui-component-table-row-header-padding-horizontal);\n}\n\n/* No border of its own — the separator lives on the row (see table.row). Reset with tbody specificity\n (0,1,2) so a host stylesheet's cell borders (e.g. `.pantoken-prose td`, 0,1,1) can't leak in. */\n.pfx-table tbody th {\n  border: 0;\n}\n\n/* layout=\"stacked\": stack as a block, labelled by its column via ::before (pure CSS can't pull the\n <th> text automatically, so the author supplies a `data-label` per cell). */\n.pfx-table.-layout-stacked th {\n  display: block;\n  width: auto;\n}\n\n.pfx-table.-layout-stacked tbody th[data-label]::before {\n  content: attr(data-label);\n  display: block;\n  font-weight: var(--instui-component-table-head-font-weight);\n  color: var(--instui-component-table-col-header-color);\n}\n"
 }.rebrand;
 const tabs$1 = {
-	"rebrand": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope > .list {\n    display: flex;\n    width: 100%;\n    flex-flow: row wrap;\n  }\n\n  :scope.-overflow-scroll > .list {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  :scope.-overflow-scroll > .list::-webkit-scrollbar {\n    display: none;\n  }\n}\n",
-	"canvas": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope > .list {\n    display: flex;\n    width: 100%;\n    flex-flow: row wrap;\n  }\n\n  :scope.-overflow-scroll > .list {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  :scope.-overflow-scroll > .list::-webkit-scrollbar {\n    display: none;\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope > .list {\n    display: flex;\n    width: 100%;\n    flex-flow: row wrap;\n  }\n\n  :scope.-overflow-scroll > .list {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  :scope.-overflow-scroll > .list::-webkit-scrollbar {\n    display: none;\n  }\n}\n"
+	"rebrand": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab:many {}\n *   }\n *   .panel:many {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope > .list {\n    display: flex;\n    width: 100%;\n    flex-flow: row wrap;\n  }\n\n  :scope.-overflow-scroll > .list {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  :scope.-overflow-scroll > .list::-webkit-scrollbar {\n    display: none;\n  }\n}\n",
+	"canvas": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab:many {}\n *   }\n *   .panel:many {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope > .list {\n    display: flex;\n    width: 100%;\n    flex-flow: row wrap;\n  }\n\n  :scope.-overflow-scroll > .list {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  :scope.-overflow-scroll > .list::-webkit-scrollbar {\n    display: none;\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab:many {}\n *   }\n *   .panel:many {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope > .list {\n    display: flex;\n    width: 100%;\n    flex-flow: row wrap;\n  }\n\n  :scope.-overflow-scroll > .list {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  :scope.-overflow-scroll > .list::-webkit-scrollbar {\n    display: none;\n  }\n}\n"
 }.rebrand;
 const tabsPanel$1 = {
-	"rebrand": "/**\n * @component tabs.panel\n * @memberOf tabs\n * @selector .panel\n * @summary The content panel for a tab (InstUI `Tabs.Panel`).\n * @cssstate hidden\n * @structure\n * @scope (.pfx-tabs) {\n *   :scope > .panel {}\n * }\n */\n@scope (.pfx-tabs) {\n  :scope > .panel {\n    box-sizing: border-box;\n    border-top: var(--instui-component-tabs-panel-border-width) solid\n      var(--instui-component-tabs-panel-border-color);\n    background: var(--instui-component-tabs-panel-background);\n    color: var(--instui-component-tabs-panel-text-color);\n    font-family: var(--instui-component-tabs-panel-font-family);\n    font-size: var(--instui-component-tabs-panel-font-size);\n    font-weight: var(--instui-component-tabs-panel-font-weight);\n    line-height: var(--instui-component-tabs-panel-line-height);\n    padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n      var(--instui-spacing-space-md);\n  }\n\n  :scope > .panel[hidden] {\n    display: none;\n  }\n}\n",
-	"canvas": "/**\n * @component tabs.panel\n * @memberOf tabs\n * @selector .panel\n * @summary The content panel for a tab (InstUI `Tabs.Panel`).\n * @cssstate hidden\n * @structure\n * @scope (.pfx-tabs) {\n *   :scope > .panel {}\n * }\n */\n@scope (.pfx-tabs) {\n  :scope > .panel {\n    box-sizing: border-box;\n    border-top: var(--instui-component-tabs-panel-border-width) solid\n      var(--instui-component-tabs-panel-border-color);\n    background: var(--instui-component-tabs-panel-background);\n    color: var(--instui-component-tabs-panel-text-color);\n    font-family: var(--instui-component-tabs-panel-font-family);\n    font-size: var(--instui-component-tabs-panel-font-size);\n    font-weight: var(--instui-component-tabs-panel-font-weight);\n    line-height: var(--instui-component-tabs-panel-line-height);\n    padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n      var(--instui-spacing-space-md);\n  }\n\n  :scope > .panel[hidden] {\n    display: none;\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component tabs.panel\n * @memberOf tabs\n * @selector .panel\n * @summary The content panel for a tab (InstUI `Tabs.Panel`).\n * @cssstate hidden\n * @structure\n * @scope (.pfx-tabs) {\n *   :scope > .panel {}\n * }\n */\n@scope (.pfx-tabs) {\n  :scope > .panel {\n    box-sizing: border-box;\n    border-top: var(--instui-component-tabs-panel-border-width) solid\n      var(--instui-component-tabs-panel-border-color);\n    background: var(--instui-component-tabs-panel-background);\n    color: var(--instui-component-tabs-panel-text-color);\n    font-family: var(--instui-component-tabs-panel-font-family);\n    font-size: var(--instui-component-tabs-panel-font-size);\n    font-weight: var(--instui-component-tabs-panel-font-weight);\n    line-height: var(--instui-component-tabs-panel-line-height);\n    padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n      var(--instui-spacing-space-md);\n  }\n\n  :scope > .panel[hidden] {\n    display: none;\n  }\n}\n"
+	"rebrand": "/**\n * @component tabs.panel\n * @memberOf tabs\n * @selector .panel\n * @summary The content panel for a tab (InstUI `Tabs.Panel`).\n * @cssstate hidden\n * @structure\n * @component tabs {\n *   .panel {}\n * }\n */\n@scope (.pfx-tabs) {\n  :scope > .panel {\n    box-sizing: border-box;\n    border-top: var(--instui-component-tabs-panel-border-width) solid\n      var(--instui-component-tabs-panel-border-color);\n    background: var(--instui-component-tabs-panel-background);\n    color: var(--instui-component-tabs-panel-text-color);\n    font-family: var(--instui-component-tabs-panel-font-family);\n    font-size: var(--instui-component-tabs-panel-font-size);\n    font-weight: var(--instui-component-tabs-panel-font-weight);\n    line-height: var(--instui-component-tabs-panel-line-height);\n    padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n      var(--instui-spacing-space-md);\n  }\n\n  :scope > .panel[hidden] {\n    display: none;\n  }\n}\n",
+	"canvas": "/**\n * @component tabs.panel\n * @memberOf tabs\n * @selector .panel\n * @summary The content panel for a tab (InstUI `Tabs.Panel`).\n * @cssstate hidden\n * @structure\n * @component tabs {\n *   .panel {}\n * }\n */\n@scope (.pfx-tabs) {\n  :scope > .panel {\n    box-sizing: border-box;\n    border-top: var(--instui-component-tabs-panel-border-width) solid\n      var(--instui-component-tabs-panel-border-color);\n    background: var(--instui-component-tabs-panel-background);\n    color: var(--instui-component-tabs-panel-text-color);\n    font-family: var(--instui-component-tabs-panel-font-family);\n    font-size: var(--instui-component-tabs-panel-font-size);\n    font-weight: var(--instui-component-tabs-panel-font-weight);\n    line-height: var(--instui-component-tabs-panel-line-height);\n    padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n      var(--instui-spacing-space-md);\n  }\n\n  :scope > .panel[hidden] {\n    display: none;\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component tabs.panel\n * @memberOf tabs\n * @selector .panel\n * @summary The content panel for a tab (InstUI `Tabs.Panel`).\n * @cssstate hidden\n * @structure\n * @component tabs {\n *   .panel {}\n * }\n */\n@scope (.pfx-tabs) {\n  :scope > .panel {\n    box-sizing: border-box;\n    border-top: var(--instui-component-tabs-panel-border-width) solid\n      var(--instui-component-tabs-panel-border-color);\n    background: var(--instui-component-tabs-panel-background);\n    color: var(--instui-component-tabs-panel-text-color);\n    font-family: var(--instui-component-tabs-panel-font-family);\n    font-size: var(--instui-component-tabs-panel-font-size);\n    font-weight: var(--instui-component-tabs-panel-font-weight);\n    line-height: var(--instui-component-tabs-panel-line-height);\n    padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n      var(--instui-spacing-space-md);\n  }\n\n  :scope > .panel[hidden] {\n    display: none;\n  }\n}\n"
 }.rebrand;
 const tabsTab$1 = {
-	"rebrand": "/**\n * @component tabs.tab\n * @memberOf tabs\n * @selector .tab\n * @summary A single tab button (InstUI `Tabs.Tab`, configured via the parent `Tabs`'s tab list); `-selected` marks the active one.\n * @modifier -selected — The active tab; same styling as `[aria-selected=\"true\"]`.\n * @modifier -disabled — Non-interactive; same styling as `[aria-disabled=\"true\"]`/`:disabled`.\n * @cssstate selected\n * @cssstate disabled\n * @remarks The parent `tabs`'s `-variant-secondary` modifier restyles this member into a rounded \"folder\" tab — see `tabs`'s own doc for that modifier.\n * @structure\n * @scope (.pfx-tabs) {\n *   .tab {}\n * }\n */\n@scope (.pfx-tabs) {\n  .tab {\n    appearance: none;\n    -webkit-appearance: none;\n    background: transparent;\n    border: 0;\n    color: var(--instui-component-tabs-tab-default-text-color);\n    font-family: var(--instui-component-tabs-tab-font-family);\n    font-size: var(--instui-component-tabs-tab-font-size);\n    font-weight: var(--instui-component-tabs-tab-font-weight);\n    line-height: 1;\n    padding: 1rem 1.25rem;\n    cursor: pointer;\n    user-select: none;\n    white-space: nowrap;\n    position: relative;\n    z-index: 1;\n    /* Layout-stable underline: always 0.25rem, coloured only when hovered or selected. */\n    border-bottom: 0.25rem solid transparent;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n  }\n\n  .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n      [aria-disabled=\"true\"]\n    ) {\n    border-bottom-color: var(--instui-component-tabs-tab-default-hover-border-color);\n  }\n\n  .tab.-selected,\n  .tab[aria-selected=\"true\"] {\n    border-bottom-color: var(--instui-component-tabs-tab-default-selected-border-color);\n  }\n\n  .tab.-disabled,\n  .tab[aria-disabled=\"true\"],\n  .tab:disabled {\n    opacity: 0.5;\n    font-weight: normal;\n    cursor: default;\n  }\n\n  /* Secondary variant (the parent tabs's `-variant-secondary`): rounded \"folder\" tabs; the selected\n   tab's bottom border matches the panel background so it visually connects into the panel below. */\n  :scope.-variant-secondary .tab {\n    padding: 0.75rem 1rem;\n    line-height: var(--instui-component-tabs-tab-line-height);\n    color: var(--instui-component-tabs-tab-secondary-text-color);\n    margin-inline-end: 0.2em;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n    border: var(--instui-component-tabs-panel-border-width) solid transparent;\n    border-radius: 0.1875rem 0.1875rem 0 0;\n  }\n\n  :scope.-variant-secondary .tab:first-of-type {\n    margin-inline-start: 0;\n  }\n\n  :scope.-variant-secondary\n    .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n      [aria-disabled=\"true\"]\n    ) {\n    background: var(--instui-component-tabs-tab-secondary-selected-background);\n    border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n    color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n  }\n\n  :scope.-variant-secondary .tab.-selected,\n  :scope.-variant-secondary .tab[aria-selected=\"true\"] {\n    background: var(--instui-component-tabs-tab-secondary-selected-background);\n    border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n    border-bottom-color: var(--instui-component-tabs-tab-secondary-selected-background);\n    color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n  }\n}\n",
-	"canvas": "/**\n * @component tabs.tab\n * @memberOf tabs\n * @selector .tab\n * @summary A single tab button (InstUI `Tabs.Tab`, configured via the parent `Tabs`'s tab list); `-selected` marks the active one.\n * @modifier -selected — The active tab; same styling as `[aria-selected=\"true\"]`.\n * @modifier -disabled — Non-interactive; same styling as `[aria-disabled=\"true\"]`/`:disabled`.\n * @cssstate selected\n * @cssstate disabled\n * @remarks The parent `tabs`'s `-variant-secondary` modifier restyles this member into a rounded \"folder\" tab — see `tabs`'s own doc for that modifier.\n * @structure\n * @scope (.pfx-tabs) {\n *   .tab {}\n * }\n */\n@scope (.pfx-tabs) {\n  .tab {\n    appearance: none;\n    -webkit-appearance: none;\n    background: transparent;\n    border: 0;\n    color: var(--instui-component-tabs-tab-default-text-color);\n    font-family: var(--instui-component-tabs-tab-font-family);\n    font-size: var(--instui-component-tabs-tab-font-size);\n    font-weight: var(--instui-component-tabs-tab-font-weight);\n    line-height: 1;\n    padding: 1rem 1.25rem;\n    cursor: pointer;\n    user-select: none;\n    white-space: nowrap;\n    position: relative;\n    z-index: 1;\n    /* Layout-stable underline: always 0.25rem, coloured only when hovered or selected. */\n    border-bottom: 0.25rem solid transparent;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n  }\n\n  .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n      [aria-disabled=\"true\"]\n    ) {\n    border-bottom-color: var(--instui-component-tabs-tab-default-hover-border-color);\n  }\n\n  .tab.-selected,\n  .tab[aria-selected=\"true\"] {\n    border-bottom-color: var(--instui-component-tabs-tab-default-selected-border-color);\n  }\n\n  .tab.-disabled,\n  .tab[aria-disabled=\"true\"],\n  .tab:disabled {\n    opacity: 0.5;\n    font-weight: normal;\n    cursor: default;\n  }\n\n  /* Secondary variant (the parent tabs's `-variant-secondary`): rounded \"folder\" tabs; the selected\n   tab's bottom border matches the panel background so it visually connects into the panel below. */\n  :scope.-variant-secondary .tab {\n    padding: 0.75rem 1rem;\n    line-height: var(--instui-component-tabs-tab-line-height);\n    color: var(--instui-component-tabs-tab-secondary-text-color);\n    margin-inline-end: 0.2em;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n    border: var(--instui-component-tabs-panel-border-width) solid transparent;\n    border-radius: 0.1875rem 0.1875rem 0 0;\n  }\n\n  :scope.-variant-secondary .tab:first-of-type {\n    margin-inline-start: 0;\n  }\n\n  :scope.-variant-secondary\n    .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n      [aria-disabled=\"true\"]\n    ) {\n    background: var(--instui-component-tabs-tab-secondary-selected-background);\n    border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n    color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n  }\n\n  :scope.-variant-secondary .tab.-selected,\n  :scope.-variant-secondary .tab[aria-selected=\"true\"] {\n    background: var(--instui-component-tabs-tab-secondary-selected-background);\n    border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n    border-bottom-color: var(--instui-component-tabs-tab-secondary-selected-background);\n    color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component tabs.tab\n * @memberOf tabs\n * @selector .tab\n * @summary A single tab button (InstUI `Tabs.Tab`, configured via the parent `Tabs`'s tab list); `-selected` marks the active one.\n * @modifier -selected — The active tab; same styling as `[aria-selected=\"true\"]`.\n * @modifier -disabled — Non-interactive; same styling as `[aria-disabled=\"true\"]`/`:disabled`.\n * @cssstate selected\n * @cssstate disabled\n * @remarks The parent `tabs`'s `-variant-secondary` modifier restyles this member into a rounded \"folder\" tab — see `tabs`'s own doc for that modifier.\n * @structure\n * @scope (.pfx-tabs) {\n *   .tab {}\n * }\n */\n@scope (.pfx-tabs) {\n  .tab {\n    appearance: none;\n    -webkit-appearance: none;\n    background: transparent;\n    border: 0;\n    color: var(--instui-component-tabs-tab-default-text-color);\n    font-family: var(--instui-component-tabs-tab-font-family);\n    font-size: var(--instui-component-tabs-tab-font-size);\n    font-weight: var(--instui-component-tabs-tab-font-weight);\n    line-height: 1;\n    padding: 1rem 1.25rem;\n    cursor: pointer;\n    user-select: none;\n    white-space: nowrap;\n    position: relative;\n    z-index: 1;\n    /* Layout-stable underline: always 0.25rem, coloured only when hovered or selected. */\n    border-bottom: 0.25rem solid transparent;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n  }\n\n  .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n      [aria-disabled=\"true\"]\n    ) {\n    border-bottom-color: var(--instui-component-tabs-tab-default-hover-border-color);\n  }\n\n  .tab.-selected,\n  .tab[aria-selected=\"true\"] {\n    border-bottom-color: var(--instui-component-tabs-tab-default-selected-border-color);\n  }\n\n  .tab.-disabled,\n  .tab[aria-disabled=\"true\"],\n  .tab:disabled {\n    opacity: 0.5;\n    font-weight: normal;\n    cursor: default;\n  }\n\n  /* Secondary variant (the parent tabs's `-variant-secondary`): rounded \"folder\" tabs; the selected\n   tab's bottom border matches the panel background so it visually connects into the panel below. */\n  :scope.-variant-secondary .tab {\n    padding: 0.75rem 1rem;\n    line-height: var(--instui-component-tabs-tab-line-height);\n    color: var(--instui-component-tabs-tab-secondary-text-color);\n    margin-inline-end: 0.2em;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n    border: var(--instui-component-tabs-panel-border-width) solid transparent;\n    border-radius: 0.1875rem 0.1875rem 0 0;\n  }\n\n  :scope.-variant-secondary .tab:first-of-type {\n    margin-inline-start: 0;\n  }\n\n  :scope.-variant-secondary\n    .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n      [aria-disabled=\"true\"]\n    ) {\n    background: var(--instui-component-tabs-tab-secondary-selected-background);\n    border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n    color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n  }\n\n  :scope.-variant-secondary .tab.-selected,\n  :scope.-variant-secondary .tab[aria-selected=\"true\"] {\n    background: var(--instui-component-tabs-tab-secondary-selected-background);\n    border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n    border-bottom-color: var(--instui-component-tabs-tab-secondary-selected-background);\n    color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n  }\n}\n"
+	"rebrand": "/**\n * @component tabs.tab\n * @memberOf tabs\n * @selector .tab\n * @summary A single tab button (InstUI `Tabs.Tab`, configured via the parent `Tabs`'s tab list); `-selected` marks the active one.\n * @modifier -selected — The active tab; same styling as `[aria-selected=\"true\"]`.\n * @modifier -disabled — Non-interactive; same styling as `[aria-disabled=\"true\"]`/`:disabled`.\n * @cssstate selected\n * @cssstate disabled\n * @remarks The parent `tabs`'s `-variant-secondary` modifier restyles this member into a rounded \"folder\" tab — see `tabs`'s own doc for that modifier.\n * @structure\n * @component tabs {\n *   .list {\n *     .tab {}\n *   }\n * }\n */\n@scope (.pfx-tabs) {\n  .tab {\n    appearance: none;\n    -webkit-appearance: none;\n    background: transparent;\n    border: 0;\n    color: var(--instui-component-tabs-tab-default-text-color);\n    font-family: var(--instui-component-tabs-tab-font-family);\n    font-size: var(--instui-component-tabs-tab-font-size);\n    font-weight: var(--instui-component-tabs-tab-font-weight);\n    line-height: 1;\n    padding: 1rem 1.25rem;\n    cursor: pointer;\n    user-select: none;\n    white-space: nowrap;\n    position: relative;\n    z-index: 1;\n    /* Layout-stable underline: always 0.25rem, coloured only when hovered or selected. */\n    border-bottom: 0.25rem solid transparent;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n  }\n\n  .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n      [aria-disabled=\"true\"]\n    ) {\n    border-bottom-color: var(--instui-component-tabs-tab-default-hover-border-color);\n  }\n\n  .tab.-selected,\n  .tab[aria-selected=\"true\"] {\n    border-bottom-color: var(--instui-component-tabs-tab-default-selected-border-color);\n  }\n\n  .tab.-disabled,\n  .tab[aria-disabled=\"true\"],\n  .tab:disabled {\n    opacity: 0.5;\n    font-weight: normal;\n    cursor: default;\n  }\n\n  /* Secondary variant (the parent tabs's `-variant-secondary`): rounded \"folder\" tabs; the selected\n   tab's bottom border matches the panel background so it visually connects into the panel below. */\n  :scope.-variant-secondary .tab {\n    padding: 0.75rem 1rem;\n    line-height: var(--instui-component-tabs-tab-line-height);\n    color: var(--instui-component-tabs-tab-secondary-text-color);\n    margin-inline-end: 0.2em;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n    border: var(--instui-component-tabs-panel-border-width) solid transparent;\n    border-radius: 0.1875rem 0.1875rem 0 0;\n  }\n\n  :scope.-variant-secondary .tab:first-of-type {\n    margin-inline-start: 0;\n  }\n\n  :scope.-variant-secondary\n    .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n      [aria-disabled=\"true\"]\n    ) {\n    background: var(--instui-component-tabs-tab-secondary-selected-background);\n    border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n    color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n  }\n\n  :scope.-variant-secondary .tab.-selected,\n  :scope.-variant-secondary .tab[aria-selected=\"true\"] {\n    background: var(--instui-component-tabs-tab-secondary-selected-background);\n    border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n    border-bottom-color: var(--instui-component-tabs-tab-secondary-selected-background);\n    color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n  }\n}\n",
+	"canvas": "/**\n * @component tabs.tab\n * @memberOf tabs\n * @selector .tab\n * @summary A single tab button (InstUI `Tabs.Tab`, configured via the parent `Tabs`'s tab list); `-selected` marks the active one.\n * @modifier -selected — The active tab; same styling as `[aria-selected=\"true\"]`.\n * @modifier -disabled — Non-interactive; same styling as `[aria-disabled=\"true\"]`/`:disabled`.\n * @cssstate selected\n * @cssstate disabled\n * @remarks The parent `tabs`'s `-variant-secondary` modifier restyles this member into a rounded \"folder\" tab — see `tabs`'s own doc for that modifier.\n * @structure\n * @component tabs {\n *   .list {\n *     .tab {}\n *   }\n * }\n */\n@scope (.pfx-tabs) {\n  .tab {\n    appearance: none;\n    -webkit-appearance: none;\n    background: transparent;\n    border: 0;\n    color: var(--instui-component-tabs-tab-default-text-color);\n    font-family: var(--instui-component-tabs-tab-font-family);\n    font-size: var(--instui-component-tabs-tab-font-size);\n    font-weight: var(--instui-component-tabs-tab-font-weight);\n    line-height: 1;\n    padding: 1rem 1.25rem;\n    cursor: pointer;\n    user-select: none;\n    white-space: nowrap;\n    position: relative;\n    z-index: 1;\n    /* Layout-stable underline: always 0.25rem, coloured only when hovered or selected. */\n    border-bottom: 0.25rem solid transparent;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n  }\n\n  .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n      [aria-disabled=\"true\"]\n    ) {\n    border-bottom-color: var(--instui-component-tabs-tab-default-hover-border-color);\n  }\n\n  .tab.-selected,\n  .tab[aria-selected=\"true\"] {\n    border-bottom-color: var(--instui-component-tabs-tab-default-selected-border-color);\n  }\n\n  .tab.-disabled,\n  .tab[aria-disabled=\"true\"],\n  .tab:disabled {\n    opacity: 0.5;\n    font-weight: normal;\n    cursor: default;\n  }\n\n  /* Secondary variant (the parent tabs's `-variant-secondary`): rounded \"folder\" tabs; the selected\n   tab's bottom border matches the panel background so it visually connects into the panel below. */\n  :scope.-variant-secondary .tab {\n    padding: 0.75rem 1rem;\n    line-height: var(--instui-component-tabs-tab-line-height);\n    color: var(--instui-component-tabs-tab-secondary-text-color);\n    margin-inline-end: 0.2em;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n    border: var(--instui-component-tabs-panel-border-width) solid transparent;\n    border-radius: 0.1875rem 0.1875rem 0 0;\n  }\n\n  :scope.-variant-secondary .tab:first-of-type {\n    margin-inline-start: 0;\n  }\n\n  :scope.-variant-secondary\n    .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n      [aria-disabled=\"true\"]\n    ) {\n    background: var(--instui-component-tabs-tab-secondary-selected-background);\n    border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n    color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n  }\n\n  :scope.-variant-secondary .tab.-selected,\n  :scope.-variant-secondary .tab[aria-selected=\"true\"] {\n    background: var(--instui-component-tabs-tab-secondary-selected-background);\n    border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n    border-bottom-color: var(--instui-component-tabs-tab-secondary-selected-background);\n    color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component tabs.tab\n * @memberOf tabs\n * @selector .tab\n * @summary A single tab button (InstUI `Tabs.Tab`, configured via the parent `Tabs`'s tab list); `-selected` marks the active one.\n * @modifier -selected — The active tab; same styling as `[aria-selected=\"true\"]`.\n * @modifier -disabled — Non-interactive; same styling as `[aria-disabled=\"true\"]`/`:disabled`.\n * @cssstate selected\n * @cssstate disabled\n * @remarks The parent `tabs`'s `-variant-secondary` modifier restyles this member into a rounded \"folder\" tab — see `tabs`'s own doc for that modifier.\n * @structure\n * @component tabs {\n *   .list {\n *     .tab {}\n *   }\n * }\n */\n@scope (.pfx-tabs) {\n  .tab {\n    appearance: none;\n    -webkit-appearance: none;\n    background: transparent;\n    border: 0;\n    color: var(--instui-component-tabs-tab-default-text-color);\n    font-family: var(--instui-component-tabs-tab-font-family);\n    font-size: var(--instui-component-tabs-tab-font-size);\n    font-weight: var(--instui-component-tabs-tab-font-weight);\n    line-height: 1;\n    padding: 1rem 1.25rem;\n    cursor: pointer;\n    user-select: none;\n    white-space: nowrap;\n    position: relative;\n    z-index: 1;\n    /* Layout-stable underline: always 0.25rem, coloured only when hovered or selected. */\n    border-bottom: 0.25rem solid transparent;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n  }\n\n  .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n      [aria-disabled=\"true\"]\n    ) {\n    border-bottom-color: var(--instui-component-tabs-tab-default-hover-border-color);\n  }\n\n  .tab.-selected,\n  .tab[aria-selected=\"true\"] {\n    border-bottom-color: var(--instui-component-tabs-tab-default-selected-border-color);\n  }\n\n  .tab.-disabled,\n  .tab[aria-disabled=\"true\"],\n  .tab:disabled {\n    opacity: 0.5;\n    font-weight: normal;\n    cursor: default;\n  }\n\n  /* Secondary variant (the parent tabs's `-variant-secondary`): rounded \"folder\" tabs; the selected\n   tab's bottom border matches the panel background so it visually connects into the panel below. */\n  :scope.-variant-secondary .tab {\n    padding: 0.75rem 1rem;\n    line-height: var(--instui-component-tabs-tab-line-height);\n    color: var(--instui-component-tabs-tab-secondary-text-color);\n    margin-inline-end: 0.2em;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n    border: var(--instui-component-tabs-panel-border-width) solid transparent;\n    border-radius: 0.1875rem 0.1875rem 0 0;\n  }\n\n  :scope.-variant-secondary .tab:first-of-type {\n    margin-inline-start: 0;\n  }\n\n  :scope.-variant-secondary\n    .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n      [aria-disabled=\"true\"]\n    ) {\n    background: var(--instui-component-tabs-tab-secondary-selected-background);\n    border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n    color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n  }\n\n  :scope.-variant-secondary .tab.-selected,\n  :scope.-variant-secondary .tab[aria-selected=\"true\"] {\n    background: var(--instui-component-tabs-tab-secondary-selected-background);\n    border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n    border-bottom-color: var(--instui-component-tabs-tab-secondary-selected-background);\n    color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n  }\n}\n"
 }.rebrand;
 const tag$1 = {
 	"rebrand": "/**\n * @component 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.pfx-tag {\n  display: inline-flex;\n  align-items: center;\n  height: var(--instui-component-tag-height-medium);\n  max-width: var(--instui-component-tag-max-width);\n  padding: 0 var(--instui-component-tag-padding-horizontal);\n  background: var(--instui-component-tag-default-background);\n  color: var(--instui-component-tag-default-color);\n  border: var(--instui-component-tag-default-border-width)\n    var(--instui-component-tag-default-border-style)\n    var(--instui-component-tag-default-border-color);\n  border-radius: var(--instui-component-tag-default-border-radius);\n  font-family: var(--instui-component-tag-font-family);\n  font-size: var(--instui-component-tag-font-size-medium);\n}\n\n.pfx-tag:hover {\n  background: var(--instui-component-tag-default-background-hover);\n}\n\n.pfx-tag.-size-sm {\n  height: var(--instui-component-tag-height-small);\n  padding: 0 var(--instui-component-tag-padding-horizontal-small);\n  font-size: var(--instui-component-tag-font-size-small);\n}\n\n.pfx-tag.-size-lg {\n  height: var(--instui-component-tag-height-large);\n  font-size: var(--instui-component-tag-font-size-large);\n}\n\n.pfx-tag.-inline {\n  gap: var(--instui-spacing-space-xs);\n  background: var(--instui-component-tag-inline-background);\n  color: var(--instui-component-tag-inline-color);\n  border-color: var(--instui-component-tag-inline-border-color);\n  border-radius: var(--instui-component-tag-inline-border-radius);\n  cursor: pointer;\n}\n\n.pfx-tag.-inline:hover {\n  background: var(--instui-component-tag-inline-background-hover);\n}\n\n.pfx-tag.-inline::after {\n  content: \"\";\n  flex: none;\n  width: 1em;\n  height: 1em;\n  background: var(--instui-component-tag-inline-icon-color);\n  -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n  mask: var(--instui-icon-x) center / contain no-repeat;\n}\n\n.pfx-tag.-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.pfx-tag.-readonly {\n  cursor: default;\n  background: var(--instui-component-tag-default-background);\n}\n\n.pfx-tag.-readonly.-inline::after {\n  display: none;\n}\n",
@@ -586,9 +588,9 @@ const tag$1 = {
 	"canvasHighContrast": "/**\n * @component 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.pfx-tag {\n  display: inline-flex;\n  align-items: center;\n  height: var(--instui-component-tag-height-medium);\n  max-width: var(--instui-component-tag-max-width);\n  padding: 0 var(--instui-component-tag-padding-horizontal);\n  background: var(--instui-component-tag-default-background);\n  color: var(--instui-component-tag-default-color);\n  border: var(--instui-component-tag-default-border-width)\n    var(--instui-component-tag-default-border-style)\n    var(--instui-component-tag-default-border-color);\n  border-radius: var(--instui-component-tag-default-border-radius);\n  font-family: var(--instui-component-tag-font-family);\n  font-size: var(--instui-component-tag-font-size-medium);\n}\n\n.pfx-tag:hover {\n  background: var(--instui-component-tag-default-background-hover);\n}\n\n.pfx-tag.-size-sm {\n  height: var(--instui-component-tag-height-small);\n  padding: 0 var(--instui-component-tag-padding-horizontal-small);\n  font-size: var(--instui-component-tag-font-size-small);\n}\n\n.pfx-tag.-size-lg {\n  height: var(--instui-component-tag-height-large);\n  font-size: var(--instui-component-tag-font-size-large);\n}\n\n.pfx-tag.-inline {\n  gap: var(--instui-spacing-space-xs);\n  background: var(--instui-component-tag-inline-background);\n  color: var(--instui-component-tag-inline-color);\n  border-color: var(--instui-component-tag-inline-border-color);\n  border-radius: var(--instui-component-tag-inline-border-radius);\n  cursor: pointer;\n}\n\n.pfx-tag.-inline:hover {\n  background: var(--instui-component-tag-inline-background-hover);\n}\n\n.pfx-tag.-inline::after {\n  content: \"\";\n  flex: none;\n  width: 1em;\n  height: 1em;\n  background: var(--instui-component-tag-inline-icon-color);\n  -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n  mask: var(--instui-icon-x) center / contain no-repeat;\n}\n\n.pfx-tag.-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.pfx-tag.-readonly {\n  cursor: default;\n  background: var(--instui-component-tag-default-background);\n}\n\n.pfx-tag.-readonly.-inline::after {\n  display: none;\n}\n"
 }.rebrand;
 const text$1 = {
-	"rebrand": "/**\n * @component text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @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 instui-display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm instui-display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote instui-display-block\">AI highlight 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.pfx-text {\n  font-family: var(--instui-component-text-content-font-family);\n  color: var(--instui-component-text-base-color);\n  font-size: var(--instui-component-text-font-size-medium);\n  font-weight: var(--instui-component-text-font-weight-normal);\n  line-height: var(--instui-component-text-content-line-height);\n}\n\n.pfx-text.-size-xs {\n  font-size: var(--instui-component-text-font-size-x-small);\n}\n\n.pfx-text.-size-sm {\n  font-size: var(--instui-component-text-font-size-small);\n}\n\n.pfx-text.-size-lg {\n  font-size: var(--instui-component-text-font-size-large);\n}\n\n.pfx-text.-size-xl {\n  font-size: var(--instui-component-text-font-size-x-large);\n}\n\n.pfx-text.-weight-bold {\n  font-weight: var(--instui-component-text-font-weight-bold);\n}\n\n.pfx-text.-style-italic {\n  font-style: italic;\n}\n\n.pfx-text.-color-primary {\n  color: var(--instui-component-text-primary-color);\n}\n\n.pfx-text.-color-secondary {\n  color: var(--instui-component-text-muted-color);\n}\n\n.pfx-text.-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.pfx-text.-color-success {\n  color: var(--instui-component-text-success-color);\n}\n\n.pfx-text.-color-danger {\n  color: var(--instui-component-text-error-color);\n}\n\n.pfx-text.-color-warning {\n  color: var(--instui-component-text-warning-color);\n}\n\n.pfx-text: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.pfx-text.-color-primary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-secondary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-primary-on {\n  color: var(--instui-component-text-base-on-color);\n}\n\n.pfx-text.-color-secondary-on {\n  color: var(--instui-component-text-muted-on-color);\n}\n\n.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-variant-content-quote {\n  font-size: var(--instui-component-text-content-quote-font-size);\n  /* @todo - `--instui-component-text-content-quote-font-weight` token is broken upstream */\n  font-weight: 500;\n  font-style: italic;\n  line-height: var(--instui-component-text-content-quote-line-height);\n}\n\n.pfx-text.-variant-legend {\n  font-size: var(--instui-component-text-legend-font-size);\n  line-height: var(--instui-component-text-legend-line-height);\n  font-weight: var(--instui-component-text-legend-font-weight);\n}\n\n.pfx-text.-transform-uppercase {\n  text-transform: uppercase;\n}\n\n.pfx-text.-transform-lowercase {\n  text-transform: lowercase;\n}\n\n.pfx-text.-transform-capitalize {\n  text-transform: capitalize;\n}\n",
-	"canvas": "/**\n * @component text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @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 instui-display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm instui-display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote instui-display-block\">AI highlight 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.pfx-text {\n  font-family: var(--instui-component-text-content-font-family);\n  color: var(--instui-component-text-base-color);\n  font-size: var(--instui-component-text-font-size-medium);\n  font-weight: var(--instui-component-text-font-weight-normal);\n  line-height: var(--instui-component-text-content-line-height);\n}\n\n.pfx-text.-size-xs {\n  font-size: var(--instui-component-text-font-size-x-small);\n}\n\n.pfx-text.-size-sm {\n  font-size: var(--instui-component-text-font-size-small);\n}\n\n.pfx-text.-size-lg {\n  font-size: var(--instui-component-text-font-size-large);\n}\n\n.pfx-text.-size-xl {\n  font-size: var(--instui-component-text-font-size-x-large);\n}\n\n.pfx-text.-weight-bold {\n  font-weight: var(--instui-component-text-font-weight-bold);\n}\n\n.pfx-text.-style-italic {\n  font-style: italic;\n}\n\n.pfx-text.-color-primary {\n  color: var(--instui-component-text-primary-color);\n}\n\n.pfx-text.-color-secondary {\n  color: var(--instui-component-text-muted-color);\n}\n\n.pfx-text.-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.pfx-text.-color-success {\n  color: var(--instui-component-text-success-color);\n}\n\n.pfx-text.-color-danger {\n  color: var(--instui-component-text-error-color);\n}\n\n.pfx-text.-color-warning {\n  color: var(--instui-component-text-warning-color);\n}\n\n.pfx-text: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.pfx-text.-color-primary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-secondary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-primary-on {\n  color: var(--instui-component-text-base-on-color);\n}\n\n.pfx-text.-color-secondary-on {\n  color: var(--instui-component-text-muted-on-color);\n}\n\n.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-variant-content-quote {\n  font-size: var(--instui-component-text-content-quote-font-size);\n  /* @todo - `--instui-component-text-content-quote-font-weight` token is broken upstream */\n  font-weight: 500;\n  font-style: italic;\n  line-height: var(--instui-component-text-content-quote-line-height);\n}\n\n.pfx-text.-variant-legend {\n  font-size: var(--instui-component-text-legend-font-size);\n  line-height: var(--instui-component-text-legend-line-height);\n  font-weight: var(--instui-component-text-legend-font-weight);\n}\n\n.pfx-text.-transform-uppercase {\n  text-transform: uppercase;\n}\n\n.pfx-text.-transform-lowercase {\n  text-transform: lowercase;\n}\n\n.pfx-text.-transform-capitalize {\n  text-transform: capitalize;\n}\n",
-	"canvasHighContrast": "/**\n * @component text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @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 instui-display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm instui-display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote instui-display-block\">AI highlight 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.pfx-text {\n  font-family: var(--instui-component-text-content-font-family);\n  color: var(--instui-component-text-base-color);\n  font-size: var(--instui-component-text-font-size-medium);\n  font-weight: var(--instui-component-text-font-weight-normal);\n  line-height: var(--instui-component-text-content-line-height);\n}\n\n.pfx-text.-size-xs {\n  font-size: var(--instui-component-text-font-size-x-small);\n}\n\n.pfx-text.-size-sm {\n  font-size: var(--instui-component-text-font-size-small);\n}\n\n.pfx-text.-size-lg {\n  font-size: var(--instui-component-text-font-size-large);\n}\n\n.pfx-text.-size-xl {\n  font-size: var(--instui-component-text-font-size-x-large);\n}\n\n.pfx-text.-weight-bold {\n  font-weight: var(--instui-component-text-font-weight-bold);\n}\n\n.pfx-text.-style-italic {\n  font-style: italic;\n}\n\n.pfx-text.-color-primary {\n  color: var(--instui-component-text-primary-color);\n}\n\n.pfx-text.-color-secondary {\n  color: var(--instui-component-text-muted-color);\n}\n\n.pfx-text.-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.pfx-text.-color-success {\n  color: var(--instui-component-text-success-color);\n}\n\n.pfx-text.-color-danger {\n  color: var(--instui-component-text-error-color);\n}\n\n.pfx-text.-color-warning {\n  color: var(--instui-component-text-warning-color);\n}\n\n.pfx-text: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.pfx-text.-color-primary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-secondary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-primary-on {\n  color: var(--instui-component-text-base-on-color);\n}\n\n.pfx-text.-color-secondary-on {\n  color: var(--instui-component-text-muted-on-color);\n}\n\n.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-variant-content-quote {\n  font-size: var(--instui-component-text-content-quote-font-size);\n  /* @todo - `--instui-component-text-content-quote-font-weight` token is broken upstream */\n  font-weight: 500;\n  font-style: italic;\n  line-height: var(--instui-component-text-content-quote-line-height);\n}\n\n.pfx-text.-variant-legend {\n  font-size: var(--instui-component-text-legend-font-size);\n  line-height: var(--instui-component-text-legend-line-height);\n  font-weight: var(--instui-component-text-legend-font-weight);\n}\n\n.pfx-text.-transform-uppercase {\n  text-transform: uppercase;\n}\n\n.pfx-text.-transform-lowercase {\n  text-transform: lowercase;\n}\n\n.pfx-text.-transform-capitalize {\n  text-transform: capitalize;\n}\n"
+	"rebrand": "/**\n * @component text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @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\">AI highlight 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.pfx-text {\n  font-family: var(--instui-component-text-content-font-family);\n  color: var(--instui-component-text-base-color);\n  font-size: var(--instui-component-text-font-size-medium);\n  font-weight: var(--instui-component-text-font-weight-normal);\n  line-height: var(--instui-component-text-content-line-height);\n}\n\n.pfx-text.-size-xs {\n  font-size: var(--instui-component-text-font-size-x-small);\n}\n\n.pfx-text.-size-sm {\n  font-size: var(--instui-component-text-font-size-small);\n}\n\n.pfx-text.-size-lg {\n  font-size: var(--instui-component-text-font-size-large);\n}\n\n.pfx-text.-size-xl {\n  font-size: var(--instui-component-text-font-size-x-large);\n}\n\n.pfx-text.-weight-bold {\n  font-weight: var(--instui-component-text-font-weight-bold);\n}\n\n.pfx-text.-style-italic {\n  font-style: italic;\n}\n\n.pfx-text.-color-primary {\n  color: var(--instui-component-text-primary-color);\n}\n\n.pfx-text.-color-secondary {\n  color: var(--instui-component-text-muted-color);\n}\n\n.pfx-text.-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.pfx-text.-color-success {\n  color: var(--instui-component-text-success-color);\n}\n\n.pfx-text.-color-danger {\n  color: var(--instui-component-text-error-color);\n}\n\n.pfx-text.-color-warning {\n  color: var(--instui-component-text-warning-color);\n}\n\n.pfx-text: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.pfx-text.-color-primary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-secondary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-primary-on {\n  color: var(--instui-component-text-base-on-color);\n}\n\n.pfx-text.-color-secondary-on {\n  color: var(--instui-component-text-muted-on-color);\n}\n\n.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-variant-legend {\n  font-size: var(--instui-component-text-legend-font-size);\n  line-height: var(--instui-component-text-legend-line-height);\n  font-weight: var(--instui-component-text-legend-font-weight);\n}\n\n.pfx-text.-transform-uppercase {\n  text-transform: uppercase;\n}\n\n.pfx-text.-transform-lowercase {\n  text-transform: lowercase;\n}\n\n.pfx-text.-transform-capitalize {\n  text-transform: capitalize;\n}\n",
+	"canvas": "/**\n * @component text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @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\">AI highlight 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.pfx-text {\n  font-family: var(--instui-component-text-content-font-family);\n  color: var(--instui-component-text-base-color);\n  font-size: var(--instui-component-text-font-size-medium);\n  font-weight: var(--instui-component-text-font-weight-normal);\n  line-height: var(--instui-component-text-content-line-height);\n}\n\n.pfx-text.-size-xs {\n  font-size: var(--instui-component-text-font-size-x-small);\n}\n\n.pfx-text.-size-sm {\n  font-size: var(--instui-component-text-font-size-small);\n}\n\n.pfx-text.-size-lg {\n  font-size: var(--instui-component-text-font-size-large);\n}\n\n.pfx-text.-size-xl {\n  font-size: var(--instui-component-text-font-size-x-large);\n}\n\n.pfx-text.-weight-bold {\n  font-weight: var(--instui-component-text-font-weight-bold);\n}\n\n.pfx-text.-style-italic {\n  font-style: italic;\n}\n\n.pfx-text.-color-primary {\n  color: var(--instui-component-text-primary-color);\n}\n\n.pfx-text.-color-secondary {\n  color: var(--instui-component-text-muted-color);\n}\n\n.pfx-text.-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.pfx-text.-color-success {\n  color: var(--instui-component-text-success-color);\n}\n\n.pfx-text.-color-danger {\n  color: var(--instui-component-text-error-color);\n}\n\n.pfx-text.-color-warning {\n  color: var(--instui-component-text-warning-color);\n}\n\n.pfx-text: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.pfx-text.-color-primary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-secondary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-primary-on {\n  color: var(--instui-component-text-base-on-color);\n}\n\n.pfx-text.-color-secondary-on {\n  color: var(--instui-component-text-muted-on-color);\n}\n\n.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-variant-legend {\n  font-size: var(--instui-component-text-legend-font-size);\n  line-height: var(--instui-component-text-legend-line-height);\n  font-weight: var(--instui-component-text-legend-font-weight);\n}\n\n.pfx-text.-transform-uppercase {\n  text-transform: uppercase;\n}\n\n.pfx-text.-transform-lowercase {\n  text-transform: lowercase;\n}\n\n.pfx-text.-transform-capitalize {\n  text-transform: capitalize;\n}\n",
+	"canvasHighContrast": "/**\n * @component text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @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\">AI highlight 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.pfx-text {\n  font-family: var(--instui-component-text-content-font-family);\n  color: var(--instui-component-text-base-color);\n  font-size: var(--instui-component-text-font-size-medium);\n  font-weight: var(--instui-component-text-font-weight-normal);\n  line-height: var(--instui-component-text-content-line-height);\n}\n\n.pfx-text.-size-xs {\n  font-size: var(--instui-component-text-font-size-x-small);\n}\n\n.pfx-text.-size-sm {\n  font-size: var(--instui-component-text-font-size-small);\n}\n\n.pfx-text.-size-lg {\n  font-size: var(--instui-component-text-font-size-large);\n}\n\n.pfx-text.-size-xl {\n  font-size: var(--instui-component-text-font-size-x-large);\n}\n\n.pfx-text.-weight-bold {\n  font-weight: var(--instui-component-text-font-weight-bold);\n}\n\n.pfx-text.-style-italic {\n  font-style: italic;\n}\n\n.pfx-text.-color-primary {\n  color: var(--instui-component-text-primary-color);\n}\n\n.pfx-text.-color-secondary {\n  color: var(--instui-component-text-muted-color);\n}\n\n.pfx-text.-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.pfx-text.-color-success {\n  color: var(--instui-component-text-success-color);\n}\n\n.pfx-text.-color-danger {\n  color: var(--instui-component-text-error-color);\n}\n\n.pfx-text.-color-warning {\n  color: var(--instui-component-text-warning-color);\n}\n\n.pfx-text: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.pfx-text.-color-primary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-secondary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n\n.pfx-text.-color-primary-on {\n  color: var(--instui-component-text-base-on-color);\n}\n\n.pfx-text.-color-secondary-on {\n  color: var(--instui-component-text-muted-on-color);\n}\n\n.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-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.pfx-text.-variant-legend {\n  font-size: var(--instui-component-text-legend-font-size);\n  line-height: var(--instui-component-text-legend-line-height);\n  font-weight: var(--instui-component-text-legend-font-weight);\n}\n\n.pfx-text.-transform-uppercase {\n  text-transform: uppercase;\n}\n\n.pfx-text.-transform-lowercase {\n  text-transform: lowercase;\n}\n\n.pfx-text.-transform-capitalize {\n  text-transform: capitalize;\n}\n"
 }.rebrand;
 const toggleDetails$1 = {
 	"rebrand": "/**\n * @component toggle-details\n * @summary A styled native `<details>` disclosure with a rotating chevron.\n * @remarks Built on the native `<details>` element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.\n * @modifier -variant-filled — Filled (surface) variant.\n * @modifier -chevron-end — Place the chevron after the summary.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-details\" open>\n *   <summary>What ships in this package?</summary>\n *   Class-based component styles, built from the Instructure tokens, plus a prose layer.\n * </details>\n * @structure\n * .pfx-toggle-details {\n *   summary {}\n * }\n * @related toggle-group — The bordered, grouped form of the same disclosure.\n */\n.pfx-toggle-details {\n  color: var(--instui-component-toggle-details-text-color);\n  font-family: var(--instui-component-toggle-details-font-family);\n  font-weight: var(--instui-component-toggle-details-font-weight);\n  line-height: var(--instui-component-toggle-details-line-height);\n}\n.pfx-toggle-details > summary {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-toggle-details-icon-margin);\n  cursor: pointer;\n  list-style: none;\n  font-size: var(--instui-component-toggle-details-font-size-medium);\n  padding: var(--instui-component-toggle-details-toggle-padding);\n  color: var(--instui-component-toggle-details-text-color);\n}\n/* Kill the native disclosure marker; we supply a rotating chevron. */\n.pfx-toggle-details > summary::-webkit-details-marker {\n  display: none;\n}\n.pfx-toggle-details > summary::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n  -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n  mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n  transition: transform 0.2s ease;\n}\n.pfx-toggle-details[open] > summary::before {\n  transform: rotate(90deg);\n}\n/* iconPosition=\"end\" (named -chevron-end, NOT -icon-position-end — a \"-icon-\" class would collide with the\n   generic [class*=\"-icon-\"] glyph painter): push the disclosure chevron to the inline-end. */\n.pfx-toggle-details.-chevron-end > summary::before {\n  order: 1;\n  margin-inline-start: auto;\n}\n/* variant=\"filled\": the summary reads as an action-secondary button. */\n.pfx-toggle-details.-variant-filled > summary {\n  background: var(--instui-color-background-interactive-action-secondary-base);\n  border-radius: var(--instui-component-toggle-details-toggle-border-radius);\n}\n.pfx-toggle-details > :not(summary) {\n  padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-details.-size-sm > summary {\n  font-size: var(--instui-component-toggle-details-font-size-small);\n}\n.pfx-toggle-details.-size-sm > :not(summary) {\n  padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-details.-size-lg > summary {\n  font-size: var(--instui-component-toggle-details-font-size-large);\n}\n.pfx-toggle-details.-size-lg > :not(summary) {\n  padding: var(--instui-component-toggle-details-content-padding-large);\n}\n",
@@ -601,14 +603,14 @@ const toggleGroup$1 = {
 	"canvasHighContrast": "/**\n * @component toggle-group\n * @summary A bordered disclosure built on `<details>`: a chevron summary row and collapsible content.\n * @remarks Built on the same native `<details>` foundation as toggle-details; put the `<summary>` first so it becomes the clickable header row and the rest is the collapsible content.\n * @modifier -without-border — Remove the border.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary row's disclosure chevron, a masked glyph that rotates to point down when the group is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-group\" open>\n *   <summary>Advanced settings</summary>\n *   <div>These options are revealed when the group is expanded. The header row carries a chevron that rotates on open, and the content sits below a divider.</div>\n * </details>\n * @structure\n * .pfx-toggle-group {\n *   summary {}\n *   div {}\n * }\n * @related toggle-details — The single, unbordered form of the same disclosure.\n */\n.pfx-toggle-group {\n  display: block;\n  border: var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);\n  border-radius: var(--instui-border-radius-md);\n  background: var(--instui-color-background-elevated-surface-base);\n  color: var(--instui-component-toggle-details-text-color);\n  font-family: var(--instui-component-toggle-details-font-family);\n  font-weight: var(--instui-component-toggle-details-font-weight);\n  line-height: var(--instui-component-toggle-details-line-height);\n  overflow: hidden;\n}\n.pfx-toggle-group > summary {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-toggle-details-icon-margin);\n  cursor: pointer;\n  list-style: none;\n  padding: var(--instui-component-toggle-details-content-padding-medium);\n  font-size: var(--instui-component-toggle-details-font-size-medium);\n}\n.pfx-toggle-group > summary::-webkit-details-marker {\n  display: none;\n}\n.pfx-toggle-group > summary::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n  -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n  mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n  transition: transform 0.2s ease;\n}\n.pfx-toggle-group[open] > summary::before {\n  transform: rotate(90deg);\n}\n/* the collapsible content: separated from the header by a top border in the group colour */\n.pfx-toggle-group > :not(summary) {\n  border-block-start: var(--instui-border-width-sm) solid\n    var(--instui-component-toggle-group-border-color);\n  padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-group.-size-sm > summary,\n.pfx-toggle-group.-size-sm > :not(summary) {\n  font-size: var(--instui-component-toggle-details-font-size-small);\n  padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-group.-size-lg > summary,\n.pfx-toggle-group.-size-lg > :not(summary) {\n  font-size: var(--instui-component-toggle-details-font-size-large);\n  padding: var(--instui-component-toggle-details-content-padding-large);\n}\n/* border={false} */\n.pfx-toggle-group.-without-border {\n  border: 0;\n}\n.pfx-toggle-group.-without-border > :not(summary) {\n  border-block-start: 0;\n}\n"
 }.rebrand;
 const tooltip$1 = {
-	"rebrand": "/**\n * @component tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n *   <span class=\"pfx-icon -icon-info\"></span>\n *   <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * @structure\n * .pfx-tooltip {\n *   [class*=\"-icon-\"]:optional {}\n *   .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n.pfx-tooltip {\n  position: relative;\n  display: inline-flex;\n}\n\n@scope (.pfx-tooltip) {\n  :scope > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .tip {\n    position: absolute;\n    z-index: 1;\n    inset-block-end: 100%;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n    margin-block-end: var(--instui-spacing-space-xs);\n    padding: var(--instui-component-tooltip-padding);\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-radius: var(--instui-border-radius-sm);\n    font-family: var(--instui-component-tooltip-font-family);\n    font-size: var(--instui-component-tooltip-font-size);\n    font-weight: var(--instui-component-tooltip-font-weight);\n    white-space: nowrap;\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n  }\n}\n\n/* Show on hover or keyboard focus of the trigger. */\n.pfx-tooltip:hover > .tip,\n.pfx-tooltip:focus-within > .tip {\n  opacity: 1;\n  visibility: visible;\n}\n\n/* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n   bubble to the other sides. */\n.pfx-tooltip > .tip.-placement-bottom {\n  inset-block: 100% auto;\n  margin-block: var(--instui-spacing-space-xs) 0;\n}\n\n.pfx-tooltip > .tip.-placement-start {\n  inset-block-end: auto;\n  inset-inline: auto 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0 var(--instui-spacing-space-xs) 0 0;\n}\n\n.pfx-tooltip > .tip.-placement-end {\n  inset-block-end: auto;\n  inset-inline: 100% auto;\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0 0 0 var(--instui-spacing-space-xs);\n}\n",
-	"canvas": "/**\n * @component tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n *   <span class=\"pfx-icon -icon-info\"></span>\n *   <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * @structure\n * .pfx-tooltip {\n *   [class*=\"-icon-\"]:optional {}\n *   .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n.pfx-tooltip {\n  position: relative;\n  display: inline-flex;\n}\n\n@scope (.pfx-tooltip) {\n  :scope > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .tip {\n    position: absolute;\n    z-index: 1;\n    inset-block-end: 100%;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n    margin-block-end: var(--instui-spacing-space-xs);\n    padding: var(--instui-component-tooltip-padding);\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-radius: var(--instui-border-radius-sm);\n    font-family: var(--instui-component-tooltip-font-family);\n    font-size: var(--instui-component-tooltip-font-size);\n    font-weight: var(--instui-component-tooltip-font-weight);\n    white-space: nowrap;\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n  }\n}\n\n/* Show on hover or keyboard focus of the trigger. */\n.pfx-tooltip:hover > .tip,\n.pfx-tooltip:focus-within > .tip {\n  opacity: 1;\n  visibility: visible;\n}\n\n/* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n   bubble to the other sides. */\n.pfx-tooltip > .tip.-placement-bottom {\n  inset-block: 100% auto;\n  margin-block: var(--instui-spacing-space-xs) 0;\n}\n\n.pfx-tooltip > .tip.-placement-start {\n  inset-block-end: auto;\n  inset-inline: auto 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0 var(--instui-spacing-space-xs) 0 0;\n}\n\n.pfx-tooltip > .tip.-placement-end {\n  inset-block-end: auto;\n  inset-inline: 100% auto;\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0 0 0 var(--instui-spacing-space-xs);\n}\n",
-	"canvasHighContrast": "/**\n * @component tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n *   <span class=\"pfx-icon -icon-info\"></span>\n *   <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * @structure\n * .pfx-tooltip {\n *   [class*=\"-icon-\"]:optional {}\n *   .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n.pfx-tooltip {\n  position: relative;\n  display: inline-flex;\n}\n\n@scope (.pfx-tooltip) {\n  :scope > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .tip {\n    position: absolute;\n    z-index: 1;\n    inset-block-end: 100%;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n    margin-block-end: var(--instui-spacing-space-xs);\n    padding: var(--instui-component-tooltip-padding);\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-radius: var(--instui-border-radius-sm);\n    font-family: var(--instui-component-tooltip-font-family);\n    font-size: var(--instui-component-tooltip-font-size);\n    font-weight: var(--instui-component-tooltip-font-weight);\n    white-space: nowrap;\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n  }\n}\n\n/* Show on hover or keyboard focus of the trigger. */\n.pfx-tooltip:hover > .tip,\n.pfx-tooltip:focus-within > .tip {\n  opacity: 1;\n  visibility: visible;\n}\n\n/* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n   bubble to the other sides. */\n.pfx-tooltip > .tip.-placement-bottom {\n  inset-block: 100% auto;\n  margin-block: var(--instui-spacing-space-xs) 0;\n}\n\n.pfx-tooltip > .tip.-placement-start {\n  inset-block-end: auto;\n  inset-inline: auto 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0 var(--instui-spacing-space-xs) 0 0;\n}\n\n.pfx-tooltip > .tip.-placement-end {\n  inset-block-end: auto;\n  inset-inline: 100% auto;\n  top: 50%;\n  transform: translateY(-50%);\n  margin: 0 0 0 var(--instui-spacing-space-xs);\n}\n"
+	"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;
 const tray$1 = {
-	"rebrand": "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * <div class=\"pfx-tray -size-sm\" id=\"tray-start\">\n *   <div>\n *     <strong>Filters</strong>\n *     <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n *   </div>\n *   <p class=\"pfx-text -size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * @structure\n * .pfx-tray {\n *   div {\n *     strong {}\n *     .pfx-close-button {}\n *   }\n *   .pfx-text {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n.pfx-tray {\n  position: fixed;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: var(--instui-component-tray-width-md);\n  max-inline-size: 100%;\n  /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n     height:fit-content; so the edge shadows fall outside the viewport. */\n  block-size: auto;\n  max-block-size: none;\n  background: var(--instui-component-tray-background-color);\n  border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n  padding: var(--instui-component-tray-padding);\n  z-index: var(--instui-component-tray-z-index);\n  box-shadow: var(--instui-elevation-topmost);\n}\n.pfx-tray.-placement-end {\n  inset-inline: auto 0;\n}\n.pfx-tray.-placement-top {\n  inset: 0 0 auto 0;\n  inline-size: 100%;\n  block-size: auto;\n}\n.pfx-tray.-placement-bottom {\n  inset: auto 0 0 0;\n  inline-size: 100%;\n  block-size: auto;\n}\n.pfx-tray.-size-xs {\n  inline-size: var(--instui-component-tray-width-xs);\n}\n.pfx-tray.-size-sm {\n  inline-size: var(--instui-component-tray-width-sm);\n}\n.pfx-tray.-size-lg {\n  inline-size: var(--instui-component-tray-width-lg);\n}\n.pfx-tray.-size-xl {\n  inline-size: var(--instui-component-tray-width-xl);\n}\n[popover].pfx-tray {\n  margin: 0;\n}\ndialog.pfx-tray {\n  margin: 0;\n  padding: var(--instui-component-tray-padding);\n  border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n/* Slide in from the docked edge on open (native popover + @starting-style, no JS). The transform is\n   keyed to placement; inert where allow-discrete transitions aren't supported. */\n@supports (transition-behavior: allow-discrete) {\n  [popover].pfx-tray {\n    transition:\n      transform 0.2s ease,\n      overlay 0.2s allow-discrete,\n      display 0.2s allow-discrete;\n    transform: translateX(0);\n  }\n  [popover].pfx-tray:not(:popover-open) {\n    transform: translateX(-100%);\n  }\n  @starting-style {\n    [popover].pfx-tray:popover-open {\n      transform: translateX(-100%);\n    }\n  }\n  [popover].pfx-tray.-placement-end:not(:popover-open) {\n    transform: translateX(100%);\n  }\n  @starting-style {\n    [popover].pfx-tray.-placement-end:popover-open {\n      transform: translateX(100%);\n    }\n  }\n  [popover].pfx-tray.-placement-top:not(:popover-open) {\n    transform: translateY(-100%);\n  }\n  @starting-style {\n    [popover].pfx-tray.-placement-top:popover-open {\n      transform: translateY(-100%);\n    }\n  }\n  [popover].pfx-tray.-placement-bottom:not(:popover-open) {\n    transform: translateY(100%);\n  }\n  @starting-style {\n    [popover].pfx-tray.-placement-bottom:popover-open {\n      transform: translateY(100%);\n    }\n  }\n}\n",
-	"canvas": "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * <div class=\"pfx-tray -size-sm\" id=\"tray-start\">\n *   <div>\n *     <strong>Filters</strong>\n *     <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n *   </div>\n *   <p class=\"pfx-text -size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * @structure\n * .pfx-tray {\n *   div {\n *     strong {}\n *     .pfx-close-button {}\n *   }\n *   .pfx-text {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n.pfx-tray {\n  position: fixed;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: var(--instui-component-tray-width-md);\n  max-inline-size: 100%;\n  /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n     height:fit-content; so the edge shadows fall outside the viewport. */\n  block-size: auto;\n  max-block-size: none;\n  background: var(--instui-component-tray-background-color);\n  border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n  padding: var(--instui-component-tray-padding);\n  z-index: var(--instui-component-tray-z-index);\n  box-shadow: var(--instui-elevation-topmost);\n}\n.pfx-tray.-placement-end {\n  inset-inline: auto 0;\n}\n.pfx-tray.-placement-top {\n  inset: 0 0 auto 0;\n  inline-size: 100%;\n  block-size: auto;\n}\n.pfx-tray.-placement-bottom {\n  inset: auto 0 0 0;\n  inline-size: 100%;\n  block-size: auto;\n}\n.pfx-tray.-size-xs {\n  inline-size: var(--instui-component-tray-width-xs);\n}\n.pfx-tray.-size-sm {\n  inline-size: var(--instui-component-tray-width-sm);\n}\n.pfx-tray.-size-lg {\n  inline-size: var(--instui-component-tray-width-lg);\n}\n.pfx-tray.-size-xl {\n  inline-size: var(--instui-component-tray-width-xl);\n}\n[popover].pfx-tray {\n  margin: 0;\n}\ndialog.pfx-tray {\n  margin: 0;\n  padding: var(--instui-component-tray-padding);\n  border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n/* Slide in from the docked edge on open (native popover + @starting-style, no JS). The transform is\n   keyed to placement; inert where allow-discrete transitions aren't supported. */\n@supports (transition-behavior: allow-discrete) {\n  [popover].pfx-tray {\n    transition:\n      transform 0.2s ease,\n      overlay 0.2s allow-discrete,\n      display 0.2s allow-discrete;\n    transform: translateX(0);\n  }\n  [popover].pfx-tray:not(:popover-open) {\n    transform: translateX(-100%);\n  }\n  @starting-style {\n    [popover].pfx-tray:popover-open {\n      transform: translateX(-100%);\n    }\n  }\n  [popover].pfx-tray.-placement-end:not(:popover-open) {\n    transform: translateX(100%);\n  }\n  @starting-style {\n    [popover].pfx-tray.-placement-end:popover-open {\n      transform: translateX(100%);\n    }\n  }\n  [popover].pfx-tray.-placement-top:not(:popover-open) {\n    transform: translateY(-100%);\n  }\n  @starting-style {\n    [popover].pfx-tray.-placement-top:popover-open {\n      transform: translateY(-100%);\n    }\n  }\n  [popover].pfx-tray.-placement-bottom:not(:popover-open) {\n    transform: translateY(100%);\n  }\n  @starting-style {\n    [popover].pfx-tray.-placement-bottom:popover-open {\n      transform: translateY(100%);\n    }\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * <div class=\"pfx-tray -size-sm\" id=\"tray-start\">\n *   <div>\n *     <strong>Filters</strong>\n *     <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n *   </div>\n *   <p class=\"pfx-text -size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * @structure\n * .pfx-tray {\n *   div {\n *     strong {}\n *     .pfx-close-button {}\n *   }\n *   .pfx-text {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n.pfx-tray {\n  position: fixed;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: var(--instui-component-tray-width-md);\n  max-inline-size: 100%;\n  /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n     height:fit-content; so the edge shadows fall outside the viewport. */\n  block-size: auto;\n  max-block-size: none;\n  background: var(--instui-component-tray-background-color);\n  border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n  padding: var(--instui-component-tray-padding);\n  z-index: var(--instui-component-tray-z-index);\n  box-shadow: var(--instui-elevation-topmost);\n}\n.pfx-tray.-placement-end {\n  inset-inline: auto 0;\n}\n.pfx-tray.-placement-top {\n  inset: 0 0 auto 0;\n  inline-size: 100%;\n  block-size: auto;\n}\n.pfx-tray.-placement-bottom {\n  inset: auto 0 0 0;\n  inline-size: 100%;\n  block-size: auto;\n}\n.pfx-tray.-size-xs {\n  inline-size: var(--instui-component-tray-width-xs);\n}\n.pfx-tray.-size-sm {\n  inline-size: var(--instui-component-tray-width-sm);\n}\n.pfx-tray.-size-lg {\n  inline-size: var(--instui-component-tray-width-lg);\n}\n.pfx-tray.-size-xl {\n  inline-size: var(--instui-component-tray-width-xl);\n}\n[popover].pfx-tray {\n  margin: 0;\n}\ndialog.pfx-tray {\n  margin: 0;\n  padding: var(--instui-component-tray-padding);\n  border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n/* Slide in from the docked edge on open (native popover + @starting-style, no JS). The transform is\n   keyed to placement; inert where allow-discrete transitions aren't supported. */\n@supports (transition-behavior: allow-discrete) {\n  [popover].pfx-tray {\n    transition:\n      transform 0.2s ease,\n      overlay 0.2s allow-discrete,\n      display 0.2s allow-discrete;\n    transform: translateX(0);\n  }\n  [popover].pfx-tray:not(:popover-open) {\n    transform: translateX(-100%);\n  }\n  @starting-style {\n    [popover].pfx-tray:popover-open {\n      transform: translateX(-100%);\n    }\n  }\n  [popover].pfx-tray.-placement-end:not(:popover-open) {\n    transform: translateX(100%);\n  }\n  @starting-style {\n    [popover].pfx-tray.-placement-end:popover-open {\n      transform: translateX(100%);\n    }\n  }\n  [popover].pfx-tray.-placement-top:not(:popover-open) {\n    transform: translateY(-100%);\n  }\n  @starting-style {\n    [popover].pfx-tray.-placement-top:popover-open {\n      transform: translateY(-100%);\n    }\n  }\n  [popover].pfx-tray.-placement-bottom:not(:popover-open) {\n    transform: translateY(100%);\n  }\n  @starting-style {\n    [popover].pfx-tray.-placement-bottom:popover-open {\n      transform: translateY(100%);\n    }\n  }\n}\n"
+	"rebrand": "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-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.pfx-tray {\n  position: fixed;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: var(--instui-component-tray-width-md);\n  max-inline-size: 100%;\n  /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n     height:fit-content; so the edge shadows fall outside the viewport. */\n  block-size: auto;\n  max-block-size: none;\n  background: var(--instui-component-tray-background-color);\n  border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n  padding: var(--instui-component-tray-padding);\n  z-index: var(--instui-component-tray-z-index);\n  box-shadow: var(--instui-elevation-topmost);\n}\n\n.pfx-tray.-placement-start {\n  inset-inline: 0 auto;\n}\n\n.pfx-tray.-placement-end {\n  inset-inline: auto 0;\n}\n\n.pfx-tray.-placement-top {\n  inset: 0 0 auto 0;\n  inline-size: 100%;\n  block-size: auto;\n}\n\n.pfx-tray.-placement-bottom {\n  inset: auto 0 0 0;\n  inline-size: 100%;\n  block-size: auto;\n}\n\n.pfx-tray.-size-xs {\n  inline-size: var(--instui-component-tray-width-xs);\n}\n\n.pfx-tray.-size-sm {\n  inline-size: var(--instui-component-tray-width-sm);\n}\n\n.pfx-tray.-size-md {\n  inline-size: var(--instui-component-tray-width-md);\n}\n\n.pfx-tray.-size-lg {\n  inline-size: var(--instui-component-tray-width-lg);\n}\n\n.pfx-tray.-size-xl {\n  inline-size: var(--instui-component-tray-width-xl);\n}\n\n[popover].pfx-tray {\n  margin: 0;\n}\n\ndialog.pfx-tray {\n  margin: 0;\n  padding: var(--instui-component-tray-padding);\n  border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n\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].pfx-tray {\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].pfx-tray:not(:popover-open) {\n    transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n  }\n\n  @starting-style {\n    [popover].pfx-tray: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\"] .pfx-tray {\n    --tray-slide-x: 100%;\n  }\n\n  .pfx-tray.-placement-end {\n    --tray-slide-x: 100%;\n  }\n\n  [dir=\"rtl\"] .pfx-tray.-placement-end {\n    --tray-slide-x: -100%;\n  }\n\n  .pfx-tray.-placement-top {\n    --tray-slide-x: 0%;\n    --tray-slide-y: -100%;\n  }\n\n  .pfx-tray.-placement-bottom {\n    --tray-slide-x: 0%;\n    --tray-slide-y: 100%;\n  }\n}\n",
+	"canvas": "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-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.pfx-tray {\n  position: fixed;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: var(--instui-component-tray-width-md);\n  max-inline-size: 100%;\n  /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n     height:fit-content; so the edge shadows fall outside the viewport. */\n  block-size: auto;\n  max-block-size: none;\n  background: var(--instui-component-tray-background-color);\n  border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n  padding: var(--instui-component-tray-padding);\n  z-index: var(--instui-component-tray-z-index);\n  box-shadow: var(--instui-elevation-topmost);\n}\n\n.pfx-tray.-placement-start {\n  inset-inline: 0 auto;\n}\n\n.pfx-tray.-placement-end {\n  inset-inline: auto 0;\n}\n\n.pfx-tray.-placement-top {\n  inset: 0 0 auto 0;\n  inline-size: 100%;\n  block-size: auto;\n}\n\n.pfx-tray.-placement-bottom {\n  inset: auto 0 0 0;\n  inline-size: 100%;\n  block-size: auto;\n}\n\n.pfx-tray.-size-xs {\n  inline-size: var(--instui-component-tray-width-xs);\n}\n\n.pfx-tray.-size-sm {\n  inline-size: var(--instui-component-tray-width-sm);\n}\n\n.pfx-tray.-size-md {\n  inline-size: var(--instui-component-tray-width-md);\n}\n\n.pfx-tray.-size-lg {\n  inline-size: var(--instui-component-tray-width-lg);\n}\n\n.pfx-tray.-size-xl {\n  inline-size: var(--instui-component-tray-width-xl);\n}\n\n[popover].pfx-tray {\n  margin: 0;\n}\n\ndialog.pfx-tray {\n  margin: 0;\n  padding: var(--instui-component-tray-padding);\n  border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n\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].pfx-tray {\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].pfx-tray:not(:popover-open) {\n    transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n  }\n\n  @starting-style {\n    [popover].pfx-tray: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\"] .pfx-tray {\n    --tray-slide-x: 100%;\n  }\n\n  .pfx-tray.-placement-end {\n    --tray-slide-x: 100%;\n  }\n\n  [dir=\"rtl\"] .pfx-tray.-placement-end {\n    --tray-slide-x: -100%;\n  }\n\n  .pfx-tray.-placement-top {\n    --tray-slide-x: 0%;\n    --tray-slide-y: -100%;\n  }\n\n  .pfx-tray.-placement-bottom {\n    --tray-slide-x: 0%;\n    --tray-slide-y: 100%;\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-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.pfx-tray {\n  position: fixed;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: var(--instui-component-tray-width-md);\n  max-inline-size: 100%;\n  /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n     height:fit-content; so the edge shadows fall outside the viewport. */\n  block-size: auto;\n  max-block-size: none;\n  background: var(--instui-component-tray-background-color);\n  border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n  padding: var(--instui-component-tray-padding);\n  z-index: var(--instui-component-tray-z-index);\n  box-shadow: var(--instui-elevation-topmost);\n}\n\n.pfx-tray.-placement-start {\n  inset-inline: 0 auto;\n}\n\n.pfx-tray.-placement-end {\n  inset-inline: auto 0;\n}\n\n.pfx-tray.-placement-top {\n  inset: 0 0 auto 0;\n  inline-size: 100%;\n  block-size: auto;\n}\n\n.pfx-tray.-placement-bottom {\n  inset: auto 0 0 0;\n  inline-size: 100%;\n  block-size: auto;\n}\n\n.pfx-tray.-size-xs {\n  inline-size: var(--instui-component-tray-width-xs);\n}\n\n.pfx-tray.-size-sm {\n  inline-size: var(--instui-component-tray-width-sm);\n}\n\n.pfx-tray.-size-md {\n  inline-size: var(--instui-component-tray-width-md);\n}\n\n.pfx-tray.-size-lg {\n  inline-size: var(--instui-component-tray-width-lg);\n}\n\n.pfx-tray.-size-xl {\n  inline-size: var(--instui-component-tray-width-xl);\n}\n\n[popover].pfx-tray {\n  margin: 0;\n}\n\ndialog.pfx-tray {\n  margin: 0;\n  padding: var(--instui-component-tray-padding);\n  border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n\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].pfx-tray {\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].pfx-tray:not(:popover-open) {\n    transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n  }\n\n  @starting-style {\n    [popover].pfx-tray: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\"] .pfx-tray {\n    --tray-slide-x: 100%;\n  }\n\n  .pfx-tray.-placement-end {\n    --tray-slide-x: 100%;\n  }\n\n  [dir=\"rtl\"] .pfx-tray.-placement-end {\n    --tray-slide-x: -100%;\n  }\n\n  .pfx-tray.-placement-top {\n    --tray-slide-x: 0%;\n    --tray-slide-y: -100%;\n  }\n\n  .pfx-tray.-placement-bottom {\n    --tray-slide-x: 0%;\n    --tray-slide-y: 100%;\n  }\n}\n"
 }.rebrand;
 const treeBrowser$1 = {
 	"rebrand": "/**\n * @component tree-browser\n * @summary A disclosure tree of nested collections and leaf items, with rotating chevrons.\n * @remarks Each collection is a native `<details>`; nesting them inside one another builds the tree, and the browser handles opening and closing every branch.\n * @modifier -icon-* — Render folder/file glyph icons in summaries and leaf items.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .item — A leaf entry in the tree.\n * @pseudo ::before — Draws each collection's disclosure chevron, a masked glyph that rotates to point down when the branch is open.\n * @cssstate open\n * @a11y Mark the root with role=\"tree\" and each nested list with role=\"group\".\n * @example\n * <div class=\"pfx-tree-browser\" role=\"tree\">\n *   <details open>\n *     <summary><span class=\"pfx-icon -icon-folder\"></span> Course files</summary>\n *     <ul role=\"group\">\n *       <li>\n *         <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Syllabus.pdf</a>\n *       </li>\n *       <li>\n *         <details>\n *           <summary><span class=\"pfx-icon -icon-folder\"></span> Week 1</summary>\n *           <ul role=\"group\">\n *             <li>\n *               <a class=\"item -selected\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Reading.pdf</a>\n *             </li>\n *             <li>\n *               <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Slides.pptx</a>\n *             </li>\n *           </ul>\n *         </details>\n *       </li>\n *       <li>\n *         <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Rubric.docx</a>\n *       </li>\n *     </ul>\n *   </details>\n * </div>\n * @structure\n * .pfx-tree-browser {\n *   details {\n *     summary {\n *       [class*=\"-icon-\"]:optional {}\n *     }\n *     ul {\n *       li {\n *         .item {\n *           [class*=\"-icon-\"]:optional {}\n *         }\n *       }\n *     }\n *   }\n * }\n * @related menu — Both present nested, selectable entries.\n */\n.pfx-tree-browser {\n  border-radius: var(--instui-component-tree-browser-border-radius);\n  font-family: var(--instui-component-tree-browser-tree-collection-font-family);\n  color: var(--instui-component-tree-browser-tree-button-name-text-color);\n}\n\n/* A collection node (a <details><summary>) and a leaf (.item) share the button chrome. */\n.pfx-tree-browser details > summary,\n.pfx-tree-browser .item {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);\n  padding: var(--instui-component-tree-browser-tree-button-base-spacing-medium);\n  font-size: var(--instui-component-tree-browser-tree-button-name-font-size-medium);\n  line-height: var(--instui-component-tree-browser-tree-button-text-line-height);\n  color: var(--instui-component-tree-browser-tree-button-name-text-color);\n  border-radius: var(--instui-component-tree-browser-tree-button-border-radius);\n  cursor: pointer;\n  list-style: none;\n}\n\n.pfx-tree-browser details > summary [class*=\"-icon-\"],\n.pfx-tree-browser .item [class*=\"-icon-\"] {\n  line-height: 1;\n}\n\n.pfx-tree-browser details > summary::-webkit-details-marker {\n  display: none;\n}\n\n/* The disclosure chevron rotates open (same technique as toggle-details). */\n.pfx-tree-browser details > summary::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n  -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n  mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n  transition: transform 0.2s ease;\n}\n\n.pfx-tree-browser details[open] > summary::before {\n  transform: rotate(90deg);\n}\n\n.pfx-tree-browser details > summary:hover,\n.pfx-tree-browser .item:hover {\n  background: var(--instui-component-tree-browser-tree-button-hover-background-color);\n  color: var(--instui-component-tree-browser-tree-button-hover-text-color);\n}\n\n.pfx-tree-browser details > summary.-selected,\n.pfx-tree-browser .item.-selected {\n  background: var(--instui-component-tree-browser-tree-button-selected-background-color);\n  color: var(--instui-component-tree-browser-tree-button-selected-text-color);\n}\n\n/* Nested lists indent; the leaf list carries no bullets. */\n.pfx-tree-browser ul {\n  margin: 0;\n  padding-inline-start: var(--instui-component-tree-browser-tree-collection-base-spacing-medium);\n  list-style: none;\n}\n\n.pfx-tree-browser.-size-sm details > summary,\n.pfx-tree-browser.-size-sm .item {\n  padding: var(--instui-component-tree-browser-tree-button-base-spacing-small);\n  font-size: var(--instui-component-tree-browser-tree-button-name-font-size-small);\n}\n\n.pfx-tree-browser.-size-lg details > summary,\n.pfx-tree-browser.-size-lg .item {\n  padding: var(--instui-component-tree-browser-tree-button-base-spacing-large);\n  font-size: var(--instui-component-tree-browser-tree-button-name-font-size-large);\n}\n",
@@ -1064,6 +1066,33 @@ const contextView = defineComponent({
 /** Standalone `contextView` stylesheet — the prefixed CSS for the caret callout, ready to ship as a `.css` file. */
 const contextViewCss = contextView.css;
 //#endregion
+//#region src/components/drawer-layout/index.ts
+/** The `drawer-layout` component record: a side tray plus main content in a resizable row. */
+const drawerLayout = defineComponent({
+	name: "drawer-layout",
+	css: (p) => drawerLayout$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `drawer-layout` stylesheet — the prefixed CSS for a resizable side tray layout. */
+const drawerLayoutCss = drawerLayout.css;
+//#endregion
+//#region src/components/drawer-layout/members/content/index.ts
+/** The `drawer-layout.content` member record: the primary scrollable content pane. */
+const drawerLayoutContent = defineComponent({
+	name: "drawer-layout.content",
+	css: (p) => drawerLayoutContent$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `drawer-layout.content` stylesheet. */
+const drawerLayoutContentCss = drawerLayoutContent.css;
+//#endregion
+//#region src/components/drawer-layout/members/tray/index.ts
+/** The `drawer-layout.tray` member record: the resizable side panel. */
+const drawerLayoutTray = defineComponent({
+	name: "drawer-layout.tray",
+	css: (p) => drawerLayoutTray$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `drawer-layout.tray` stylesheet. */
+const drawerLayoutTrayCss = drawerLayoutTray.css;
+//#endregion
 //#region src/components/file-drop/index.ts
 /** The `fileDrop` component record: a file dropzone with hover, accepted, and rejected states. */
 const fileDrop = defineComponent({
@@ -2184,6 +2213,9 @@ const COMPONENTS = [
 	rating,
 	toggleGroup,
 	contextView,
+	drawerLayout,
+	drawerLayoutTray,
+	drawerLayoutContent,
 	progressCircle,
 	pagination,
 	paginationPage,
@@ -2358,6 +2390,8 @@ ${s} blockquote {
   color: var(--instui-component-text-base-color);
   font-size: var(--instui-component-text-content-quote-font-size);
   line-height: var(--instui-component-text-content-quote-line-height);
+  font-weight: var(--instui-component-text-content-quote-font-weight);
+  font-style: var(--instui-component-text-content-quote-font-style);
 }
 
 ${s} code {
@@ -2521,6 +2555,12 @@ function selectCss(options = {}) {
 * The spacing utilities — margin/padding classes on the pantoken spacing scale, with logical sides,
 * each in a short spelling (`-mb-sm`) and a fully long, word-spelled one (`-margin-bottom-small`).
 *
+* Each rule matches via `globalModifierSelector` (`@pantoken/utils`) — the modifier class repeated 3x
+* for a deterministic specificity win, applying to any registered component (core or plugin-authored)
+* or standalone, with a single fixed-size selector per rule, no per-component fan-out. This replaced an
+* earlier bare-only fallback that avoided a real ~3s/940KB generation-time regression from enumerating
+* ~70 components per rule under the old mechanism.
+*
 * @module
 */
 /** The steps a boxed property takes — margin also gets `auto`. */
@@ -2536,12 +2576,11 @@ const legacyStepEntries = (steps) => steps.flatMap((step) => step.short === "0"
 */
 function shortAndLegacyRules(p) {
 	const rules = [];
-	const baseClass = `.${p}spacing`;
 	for (const property of SPACING_PROPERTIES) {
 		const stepEntries = legacyStepEntries(stepsFor(property));
 		for (const letter of [property.short, property.long]) for (const side of SPACING_SIDES) for (const [step, value] of stepEntries) {
-			const bareModifier = `-${letter}${side.short}-${step}`;
-			rules.push(utilityVariantRule(baseClass, "spacing", bareModifier, `${property.css}${side.suffix}: ${value}`));
+			const name = `${letter}${side.short}-${step}`;
+			rules.push(`${globalModifierSelector(p, name)} { ${property.css}${side.suffix}: ${value}; }`);
 		}
 	}
 	return rules;
@@ -2553,11 +2592,10 @@ function shortAndLegacyRules(p) {
 */
 function fullyLongRules(p) {
 	const rules = [];
-	const baseClass = `.${p}spacing`;
 	for (const property of SPACING_PROPERTIES) for (const side of SPACING_SIDES) for (const step of stepsFor(property)) {
 		const sidePart = side.long ? `${side.long}-` : "";
-		const bareModifier = `-${`${property.long}-${sidePart}${step.long}`}`;
-		rules.push(utilityVariantRule(baseClass, "spacing", bareModifier, `${property.css}${side.suffix}: ${step.value}`));
+		const name = `${property.long}-${sidePart}${step.long}`;
+		rules.push(`${globalModifierSelector(p, name)} { ${property.css}${side.suffix}: ${step.value}; }`);
 	}
 	return rules;
 }
@@ -2568,12 +2606,15 @@ const spacingUtilitiesCss = defineUtility({
 		const rules = [...shortAndLegacyRules(p), ...fullyLongRules(p)];
 		return css`/**
  * @utility spacing
- * @selector .instui-p-md
+ * @selector .--p-md
  * @global
- * @summary Margin and padding utilities — \`.instui-m<side>-<step>\` / \`.instui-margin-<side>-<step>\` and \`.instui-p<side>-<step>\` / \`.instui-padding-<side>-<step>\` on the spacing scale (sides \`t\`/\`b\`/\`s\`/\`e\`/\`x\`/\`y\` or none, spelled short or fully long — for example \`-mb-sm\` and \`-margin-bottom-small\` are the same rule; margin also takes \`auto\`). Every utility also has a component-attached alias modifier (for example \`-mb-sm\` on any \`.instui-<component>\` or \`.instui-view\`).
+ * @summary Margin and padding utilities — \`.--m<side>-<step>\` / \`.--margin-<side>-<step>\` and \`.--p<side>-<step>\` / \`.--padding-<side>-<step>\` on the spacing scale (sides \`t\`/\`b\`/\`s\`/\`e\`/\`x\`/\`y\` or none, spelled short or fully long — for example \`--mb-sm\` and \`--margin-bottom-small\` are the same rule; margin also takes \`auto\`). Usable bare or chained onto any component (for example \`class="instui-view --mb-sm"\`).
+ * @modifier --p-md — Applies medium padding on all sides.
+ * @modifier --m* — Margin utilities across short, legacy-long, and fully long spellings.
+ * @modifier --p* — Padding utilities across short, legacy-long, and fully long spellings.
  * @demo self:spacing
  * @example
- * <div class="instui-p-md instui-mt-lg">Padded box with a large top margin.</div>
+ * <div class="--p-md --mt-lg">Padded box with a large top margin.</div>
  */
 ${rules.join("\n")}`;
 	}
@@ -2600,19 +2641,20 @@ const gapCss = defineUtility({
 	name: "gap",
 	css: (p) => {
 		const rules = [];
-		const baseClass = `.${p}gap`;
 		for (const [step, value] of STEP_ENTRIES) {
-			const bareModifier = `-${step}`;
-			rules.push(utilityVariantRule(baseClass, "gap", bareModifier, `gap: ${value}`, `-gap${bareModifier}`));
+			const name = `gap-${step}`;
+			rules.push(`${globalModifierSelector(p, name)} { gap: ${value}; }`);
 		}
 		return css`/**
  * @utility gap
- * @selector .instui-gap-md
+ * @selector .--gap-md
  * @global
- * @summary Flex/grid \`gap\` utilities on the spacing scale, short (\`-gap-sm\`) or long (\`-gap-small\`) spelling. Every utility also has a component-attached alias modifier (for example \`-gap-sm\` on any \`.instui-<component>\` or \`.instui-view\`) — components that already set their own \`gap\` from a component-specific token may have it overridden by this alias.
+ * @summary Flex/grid \`gap\` utilities on the spacing scale, short (\`--gap-sm\`) or long (\`--gap-small\`) spelling. Usable bare or chained onto any component (\`.instui-view.--gap-sm\`) — components that already set their own \`gap\` from a component-specific token may have it overridden.
+ * @modifier --gap-md — Applies the medium spacing token as the gap.
+ * @modifier --gap-* — Gap utilities across short and long spacing-step spellings.
  * @demo self:gap
  * @example
- * <div class="instui-display-flex instui-gap-sm">
+ * <div class="--display-flex --gap-sm">
  *   <span>One</span>
  *   <span>Two</span>
  * </div>
@@ -2625,11 +2667,14 @@ const layoutUtilitiesCss = defineUtility({
 	name: "layout",
 	css: (p) => css`/**
  * @utility layout
- * @selector .instui-display-flex
+ * @selector .--display-flex
  * @global
- * @summary Display and text-align utilities — \`.instui-display-<value>\` and \`.instui-text-align-<value>\` — as composable, global classes, usable bare or chained onto any component.
+ * @summary Display and text-align utilities — \`.--display-<value>\` and \`.--text-align-<value>\` — as composable, global classes, usable bare or chained onto any component.
+ * @modifier --display-flex — Sets \`display: flex\`.
+ * @modifier --display-* — Display utilities: \`block\`, \`inline-block\`, \`inline\`, \`flex\`, \`inline-flex\`, and \`none\`.
+ * @modifier --text-align-* — Text-alignment utilities: \`start\`, \`center\`, \`end\`, and \`justify\`.
  * @example
- * <div class="instui-display-flex instui-text-align-center">
+ * <div class="--display-flex --text-align-center">
  *   <span>One</span>
  *   <span>Two</span>
  * </div>
@@ -2642,16 +2687,16 @@ ${[...[
 		"inline-flex",
 		"none"
 	].map((v) => {
-		const bareModifier = `-display-${v}`;
-		return utilityVariantRule(`.${p}layout`, "layout", bareModifier, `display: ${v}`);
+		const name = `display-${v}`;
+		return `${globalModifierSelector(p, name)} { display: ${v}; }`;
 	}), ...[
 		["start", "start"],
 		["center", "center"],
 		["end", "end"],
 		["justify", "justify"]
-	].map(([name, value]) => {
-		const bareModifier = `-text-align-${name}`;
-		return utilityVariantRule(`.${p}layout`, "layout", bareModifier, `text-align: ${value}`);
+	].map(([label, value]) => {
+		const name = `text-align-${label}`;
+		return `${globalModifierSelector(p, name)} { text-align: ${value}; }`;
 	})].join("\n")}`
 }).css;
 //#endregion
@@ -2817,26 +2862,6 @@ ${showContainer}
 	}
 }).css;
 //#endregion
-//#region src/lib/global-alias.ts
-/**
-* Shared "dual selector" helper: every global utility modifier emits a bare, standalone class PLUS a
-* component-attached alias (`.instui-button.-mod`) for every real component, so a modifier like
-* `-bg-danger` or `-mb-sm` works both bare and chained onto anything. First proven by the spacing/gap
-* utilities; extracted here so every other global utility can reuse the same mechanism instead of
-* re-deriving its own component list.
-*
-* Lives in its own module (not `helpers.ts`) on purpose: `helpers.ts` is imported by every component
-* record, and importing `COMPONENTS` from here would create a cycle (`helpers.ts` → `components/index.ts`
-* → `<component>/index.ts` → `helpers.ts`). This module is only ever imported by utility builders and
-* `generate.ts`, which components themselves never import back.
-*
-* @module
-*/
-/** Every real component's base class name — the chainable bases a global modifier can attach to. */
-const GLOBAL_ALIAS_TARGETS = COMPONENTS.filter((entry) => entry.kind === "component").map((entry) => entry.name);
-/** A selector-list builder: bare selector + every `.<prefix><target>.<modifier>` compound. */
-const globalSelectors = (p, bareSelector, modifier) => [bareSelector, ...GLOBAL_ALIAS_TARGETS.map((name) => `.${p}${name}${modifier}`)];
-//#endregion
 //#region src/utilities/position/index.ts
 /**
 * The position utility — CSS `position` as composable, globally-available classes (bare, or chained
@@ -2852,9 +2877,7 @@ const POSITIONS = [
 	"sticky"
 ];
 /** Build CSS rules for a property/value map. Helper for cursor/position utilities. */
-const buildPropertyRules$1 = (p, prefix, property, values) => values.map((value) => {
-	return `${globalSelectors(p, `.${p}${prefix}-${value}`, `.-${prefix}-${value}`).join(", ")} { ${property}: ${value}; }`;
-});
+const buildPropertyRules$1 = (p, prefix, property, values) => values.map((value) => `${globalModifierSelector(p, `${prefix}-${value}`)} { ${property}: ${value}; }`);
 /** The position utility as a standalone, header-wrapped stylesheet. */
 const positionUtilitiesCss = defineUtility({
 	name: "position",
@@ -2862,16 +2885,16 @@ const positionUtilitiesCss = defineUtility({
 		const rules = buildPropertyRules$1(p, "position", "position", Array.from(POSITIONS));
 		return css`/**
  * @utility position
- * @selector .instui-position-relative
+ * @selector .--position-relative
  * @global
- * @summary \`position\` as a composable, global class — \`.instui-position-<value>\` — usable bare or chained onto any component (\`.instui-button.-position-relative\`).
- * @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.
+ * @summary \`position\` as a composable, global class — \`.--position-<value>\` — usable bare or chained onto any component (\`.instui-button.--position-relative\`).
+ * @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.
  * @example
- * <div class="instui-position-relative">…</div>
+ * <div class="--position-relative">…</div>
  */
 ${rules.join("\n")}`;
 	}
@@ -2897,27 +2920,26 @@ const overflowUtilitiesCss = defineUtility({
 	name: "overflow",
 	css: (p) => {
 		const rules = AXES.flatMap((axis) => OVERFLOWS.map((value) => {
-			const bareModifier = `-${axis}-${value}`;
-			const baseClass = `.${p}overflow`;
-			return utilityVariantRule(baseClass, "overflow", bareModifier, `overflow-${axis}: ${value}`);
+			const name = `overflow-${axis}-${value}`;
+			return `${globalModifierSelector(p, name)} { overflow-${axis}: ${value}; }`;
 		}));
 		return css`/**
  * @utility overflow
- * @selector .instui-overflow-x-hidden
+ * @selector .--overflow-x-hidden
  * @global
- * @summary \`overflow-x\`/\`overflow-y\` as composable, global classes — \`.instui-overflow-x-<value>\` / \`.instui-overflow-y-<value>\` — usable bare or chained onto any component.
- * @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.
+ * @summary \`overflow-x\`/\`overflow-y\` as composable, global classes — \`.--overflow-x-<value>\` / \`.--overflow-y-<value>\` — usable bare or chained onto any component.
+ * @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.
  * @example
- * <div class="instui-overflow-y-auto">…</div>
+ * <div class="--overflow-y-auto">…</div>
  */
 ${rules.join("\n")}`;
 	}
@@ -2941,9 +2963,7 @@ const CURSORS = [
 	"wait"
 ];
 /** Build CSS rules for a property/value map. Helper for cursor/position utilities. */
-const buildPropertyRules = (p, prefix, property, values) => values.map((value) => {
-	return `${globalSelectors(p, `.${p}${prefix}-${value}`, `.-${prefix}-${value}`).join(", ")} { ${property}: ${value}; }`;
-});
+const buildPropertyRules = (p, prefix, property, values) => values.map((value) => `${globalModifierSelector(p, `${prefix}-${value}`)} { ${property}: ${value}; }`);
 /** The cursor utility as a standalone, header-wrapped stylesheet. */
 const cursorUtilitiesCss = defineUtility({
 	name: "cursor",
@@ -2951,19 +2971,19 @@ const cursorUtilitiesCss = defineUtility({
 		const rules = buildPropertyRules(p, "cursor", "cursor", Array.from(CURSORS));
 		return css`/**
  * @utility cursor
- * @selector .instui-cursor-pointer
+ * @selector .--cursor-pointer
  * @global
- * @summary \`cursor\` as a composable, global class — \`.instui-cursor-<value>\` — usable bare or chained onto any component (\`.instui-button.-cursor-pointer\`).
- * @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.
+ * @summary \`cursor\` as a composable, global class — \`.--cursor-<value>\` — usable bare or chained onto any component (\`.instui-button.--cursor-pointer\`).
+ * @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-cursor-pointer">…</div>
+ * <div class="--cursor-pointer">…</div>
  */
 ${rules.join("\n")}`;
 	}
@@ -2988,19 +3008,19 @@ const stackingUtilityCss = defineUtility({
 	name: "stacking",
 	css: (p) => {
 		const rules = STACKING_LEVELS.map((level) => {
-			return `${globalSelectors(p, `.${p}stack-${level}`, `.-stack-${level}`).join(", ")} { z-index: var(--instui-component-view-stacking-${level}); }`;
+			return `${globalModifierSelector(p, `stack-${level}`)} { z-index: var(--instui-component-view-stacking-${level}); }`;
 		});
 		return css`/**
  * @utility stacking
- * @selector .instui-stack-topmost
+ * @selector .--stack-topmost
  * @global
- * @summary z-index depth utilities — \`.instui-stack-<level>\` (\`deepest\`, \`below\`, \`above\`, \`topmost\`) — usable bare or chained onto any component, so layers stack predictably instead of by hand-tuned numbers.
- * @modifier -stack-deepest — The lowest stacking depth.
- * @modifier -stack-below — Below the default flow.
- * @modifier -stack-above — Above the default flow.
- * @modifier -stack-topmost — The highest stacking depth (overlays, menus).
+ * @summary z-index depth utilities — \`.--stack-<level>\` (\`deepest\`, \`below\`, \`above\`, \`topmost\`) — usable bare or chained onto any component, so layers stack predictably instead of by hand-tuned numbers.
+ * @modifier --stack-deepest — The lowest stacking depth.
+ * @modifier --stack-below — Below the default flow.
+ * @modifier --stack-above — Above the default flow.
+ * @modifier --stack-topmost — The highest stacking depth (overlays, menus).
  * @example
- * <div class="instui-stack-topmost">Always on top.</div>
+ * <div class="--stack-topmost">Always on top.</div>
  */
 ${rules.join("\n")}`;
 	}
@@ -3009,20 +3029,20 @@ ${rules.join("\n")}`;
 const maskUtilityCss = defineUtility({
 	name: "maskglobal",
 	css: (p) => {
-		const selectors = (name) => globalSelectors(p, `.${p}mask-${name}`, `.-mask-${name}`).join(", ");
+		const selectors = (name) => globalModifierSelector(p, `mask-${name}`);
 		const base = selectors("overlay");
 		const fullscreen = selectors("fullscreen");
 		const blur = selectors("blur");
 		return css`/**
  * @utility maskglobal
- * @selector .instui-mask-overlay
+ * @selector .--mask-overlay
  * @global
- * @summary A global, dual copy of the \`mask\` component's overlay modifiers — \`-mask-overlay\`, \`-mask-fullscreen\`, \`-mask-blur\` — usable bare or chained onto any component, without wrapping in a \`.instui-mask\` element.
- * @modifier -mask-overlay — The full mask overlay (position, centring, background).
- * @modifier -mask-fullscreen — Fixed to the viewport, covering it at a high z-index.
- * @modifier -mask-blur — Blur what's behind the mask with a backdrop-filter.
+ * @summary A global, dual copy of the \`mask\` component's overlay modifiers — \`--mask-overlay\`, \`--mask-fullscreen\`, \`--mask-blur\` — usable bare or chained onto any component, without wrapping in a \`.instui-mask\` element.
+ * @modifier --mask-overlay — The full mask overlay (position, centring, background).
+ * @modifier --mask-fullscreen — Fixed to the viewport, covering it at a high z-index.
+ * @modifier --mask-blur — Blur what's behind the mask with a backdrop-filter.
  * @example
- * <button class="instui-button -mask-overlay">…</button>
+ * <button class="instui-button --mask-overlay">…</button>
  */
 ${base} { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--instui-component-mask-background-color); }
 ${fullscreen} { position: fixed; z-index: 999; }
@@ -3050,42 +3070,48 @@ const MAX_LINES = [
 	4,
 	5
 ];
-/** Selector list for the base `-truncate` class (or one of its sub-modifiers), bare + chained onto every real component. */
-const truncateSelectors = (p, extraModifier = "") => globalSelectors(p, `.${p}truncate${extraModifier}`, `.-truncate${extraModifier}`);
+/**
+* Selector for a sub-modifier that only takes effect alongside the base `--truncate` class (e.g.
+* `--truncate-character`, `--max-lines-3`) — a compound of both classes, matching any registered
+* component or standalone. Unlike the base class itself, this doesn't need the 3x specificity boost:
+* it's composing with truncate's own base rule, not overriding an unrelated component modifier.
+*/
+const attachedSelector = (name) => `:where(*).--truncate.--${name}`;
 /** The truncate utility as a standalone, header-wrapped stylesheet. */
 const truncateCss = defineUtility({
 	name: "truncate",
 	css: (p) => {
-		const base = truncateSelectors(p).join(", ");
-		const character = truncateSelectors(p, ".-truncate-character").join(", ");
-		const word = truncateSelectors(p, ".-truncate-word").join(", ");
+		const base = globalModifierSelector(p, "truncate");
+		const character = attachedSelector("truncate-character");
+		const word = attachedSelector("truncate-word");
 		const maxLinesRules = MAX_LINES.map((n) => {
-			return `${[...truncateSelectors(p, `.-max-lines-${n}`), ...truncateSelectors(p, `.-lines-${n}`)].join(", ")} { --lines: ${n}; }`;
+			return `${[attachedSelector(`max-lines-${n}`), attachedSelector(`lines-${n}`)].join(", ")} { --lines: ${n}; }`;
 		});
 		return css`/**
  * @utility truncate
- * @selector .instui-truncate
+ * @selector .--truncate
  * @global
- * @summary Ellipsis truncation with line clamping controlled by \`--lines\` — usable bare or chained onto any component (\`.instui-button.-truncate\`).
+ * @summary Ellipsis truncation with line clamping controlled by \`--lines\` — usable bare or chained onto any component (\`.instui-button.--truncate\`).
  * @remarks The base class uses \`display: -webkit-box\` and reads the \`--lines\` custom property to clamp text to a fixed number of lines before it ends in an ellipsis.
- * @modifier -truncate-character — (default) Truncate at the character level.
- * @modifier -truncate-word — Truncate at the word level.
- * @modifier -max-lines-1 — Clamp to one line (default).
- * @modifier -max-lines-2 — Clamp to two lines.
- * @modifier -max-lines-3 — Clamp to three lines.
- * @modifier -max-lines-4 — Clamp to four lines.
- * @modifier -max-lines-5 — Clamp to five lines.
- * @modifier -max-lines-auto - @interaction — Clamp to the number of lines that fit in the container, based on its height and the line height of the text.
- * @modifier -lines-1 — Alias of \`-max-lines-1\`.
- * @modifier -lines-2 — Alias of \`-max-lines-2\`.
- * @modifier -lines-3 — Alias of \`-max-lines-3\`.
- * @modifier -lines-4 — Alias of \`-max-lines-4\`.
- * @modifier -lines-5 — Alias of \`-max-lines-5\`.
+ * @modifier --truncate — Enables truncation and line clamping on the target element.
+ * @modifier --truncate-character — (default) Truncate at the character level.
+ * @modifier --truncate-word — Truncate at the word level.
+ * @modifier --max-lines-1 — Clamp to one line (default).
+ * @modifier --max-lines-2 — Clamp to two lines.
+ * @modifier --max-lines-3 — Clamp to three lines.
+ * @modifier --max-lines-4 — Clamp to four lines.
+ * @modifier --max-lines-5 — Clamp to five lines.
+ * @modifier --max-lines-auto - @interaction — Clamp to the number of lines that fit in the container, based on its height and the line height of the text.
+ * @modifier --lines-1 — Alias of \`--max-lines-1\`.
+ * @modifier --lines-2 — Alias of \`--max-lines-2\`.
+ * @modifier --lines-3 — Alias of \`--max-lines-3\`.
+ * @modifier --lines-4 — Alias of \`--max-lines-4\`.
+ * @modifier --lines-5 — Alias of \`--max-lines-5\`.
  * @compat Clamping relies on \`-webkit-line-clamp\` with \`display: -webkit-box\`, paired with the standard \`line-clamp\`.
  * @example
- * <div class="instui-truncate">This text is clamped to one line by default and ends in an ellipsis.</div>
- * <div class="instui-truncate" style="--lines: 3">This text is clamped to three lines and ends in an ellipsis.</div>
- * <button class="instui-button -truncate">…</button>
+ * <div class="--truncate">This text is clamped to one line by default and ends in an ellipsis.</div>
+ * <div class="--truncate" style="--lines: 3">This text is clamped to three lines and ends in an ellipsis.</div>
+ * <button class="instui-button --truncate">…</button>
  * @related text — Body typography that this truncates.
  */
 
@@ -3240,4 +3266,4 @@ function componentsCss(options = {}) {
 	return `/* InstUI component styles (@pantoken/components) — prefix: ${prefix} */\n${COMPONENTS.map((d) => d.rules(ns(prefix), options).trim()).join("\n\n")}\n`;
 }
 //#endregion
-export { DEFAULT_PREFIX, ELEVATION_NAMES, FOCUSABLE_SELECTOR, alertCss, avatarCss, badgeCss, baseCss, billboardCss, breadcrumbCss, breadcrumbLinkCss, buttonCss, bylineCss, calendarCss, calendarDayCss, checkboxCss, closeButtonCss, componentsCss, contextViewCss, cursorUtilitiesCss, elevationCss, elevationDeclarations, fileDropCss, focusOutlineCss, focusOutlineDeclarations, focusOutlineRules, formFieldCss, formFieldGroupCss, formFieldMessagesCss, gapCss, headingCss, iconCss, iconGlyphsCss, imgCss, inPlaceEditCss, inputGroupCss, layoutUtilitiesCss, linkCss, listCss, listItemCss, maskCss, maskUtilityCss, menuCss, menuGroupCss, menuItemCss, menuSeparatorCss, metricCss, modalBodyCss, modalCss, modalFooterCss, modalHeaderCss, numberInputCss, overflowUtilitiesCss, paginationCss, paginationPageCss, pillCss, popoverCss, positionUtilitiesCss, progressCircleCss, progressCss, proseCss, radioCss, radioInputGroupCss, rangeInputCss, ratingCss, responsiveUtilitiesCss, screenReaderContentCss, selectCss, sideNavBarCss, sideNavBarItemCss, simpleSelectCss, spacingUtilitiesCss, spinnerCss, stackingUtilityCss, tableBodyCss, tableCellCss, tableColHeaderCss, tableCss, tableHeadCss, tableRowCss, tableRowHeaderCss, tabsCss, tabsPanelCss, tabsTabCss, tagCss, textAreaCss, textCss, textInputCss, toggleDetailsCss, toggleGroupCss, tooltipCss, transitionCss, trayCss, treeBrowserCss, truncateCss, viewCss, visualDebugCss };
+export { DEFAULT_PREFIX, ELEVATION_NAMES, FOCUSABLE_SELECTOR, alertCss, avatarCss, badgeCss, baseCss, billboardCss, breadcrumbCss, breadcrumbLinkCss, buttonCss, bylineCss, calendarCss, calendarDayCss, checkboxCss, closeButtonCss, componentsCss, contextViewCss, cursorUtilitiesCss, drawerLayoutContentCss, drawerLayoutCss, drawerLayoutTrayCss, elevationCss, elevationDeclarations, fileDropCss, focusOutlineCss, focusOutlineDeclarations, focusOutlineRules, formFieldCss, formFieldGroupCss, formFieldMessagesCss, gapCss, headingCss, iconCss, iconGlyphsCss, imgCss, inPlaceEditCss, inputGroupCss, layoutUtilitiesCss, linkCss, listCss, listItemCss, maskCss, maskUtilityCss, menuCss, menuGroupCss, menuItemCss, menuSeparatorCss, metricCss, modalBodyCss, modalCss, modalFooterCss, modalHeaderCss, numberInputCss, overflowUtilitiesCss, paginationCss, paginationPageCss, pillCss, popoverCss, positionUtilitiesCss, progressCircleCss, progressCss, proseCss, radioCss, radioInputGroupCss, rangeInputCss, ratingCss, responsiveUtilitiesCss, screenReaderContentCss, selectCss, sideNavBarCss, sideNavBarItemCss, simpleSelectCss, spacingUtilitiesCss, spinnerCss, stackingUtilityCss, tableBodyCss, tableCellCss, tableColHeaderCss, tableCss, tableHeadCss, tableRowCss, tableRowHeaderCss, tabsCss, tabsPanelCss, tabsTabCss, tagCss, textAreaCss, textCss, textInputCss, toggleDetailsCss, toggleGroupCss, tooltipCss, transitionCss, trayCss, treeBrowserCss, truncateCss, viewCss, visualDebugCss };