@pantoken/components 0.6.0 → 0.7.0

package/dist/index.mjs

@@ -1,13 +1,13 @@
 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 { alpha, darken } from "@pantoken/plugin-colors";
-import { progressTransitionRules } from "@pantoken/plugin-transition/progress";
-import { progressCircleTransitionRules } from "@pantoken/plugin-transition/progress-circle";
+import { tokens } from "@pantoken/tokens";
 //#region src/lib/aliases.ts
-/** `@modifier -alias — @deprecated {@link -canonical}` (em-dash or hyphen separator; optional leading dot). */
-const DEPRECATED_ALIAS = /@modifier\s+(-[\w-]+)\s+[—-]\s+@deprecated\s+\{@link\s+\.?(-[\w-]+)\s*\}/gu;
+/** `@modifier -alias — @alias|@deprecated {@link -canonical}` (em-dash/hyphen separator; optional leading dot). */
+const DEPRECATED_ALIAS = /@modifier\s+(-[\w-]+)\s+[—-]\s+@(?:alias|deprecated)\s+\{@link\s+\.?(-[\w-]+)\s*\}/gu;
 /**
-* The deprecated-alias pairs in a record, read from its own doc comment (in authored order): every
-* `@modifier` whose note is `@deprecated {@link -canonical}`. Returns `[]` for records with none.
+* The alias pairs in a record, read from its own doc comment (in authored order): every `@modifier`
+* whose note is `@alias {@link -canonical}` or `@deprecated {@link -canonical}`. Returns `[]` for
+* records with none.
 */
 function deprecatedAliasPairs(rawRecord) {
 	return [...rawRecord.matchAll(DEPRECATED_ALIAS)].map((m) => ({
@@ -60,9 +60,9 @@ function withSizeAliasDocs(comment, body) {
 	return comment.replace(/\n([ \t]*)\*\/\s*$/u, `\n${lines.join("\n")}\n$1*/`);
 }
 /**
-* Append deprecated-alias twins for a record, given its {@link AliasPair}s (from
-* {@link deprecatedAliasPairs}): every deprecated modifier that `{@link}`s a canonical one is a legacy
-* alias, so we clone each rule using the canonical modifier token under the alias name. Matching by
+* Append alias twins for a record, given its {@link AliasPair}s (from
+* {@link deprecatedAliasPairs}): every `@alias`/`@deprecated` modifier that `{@link}`s a canonical one
+* is a legacy alias, so we clone each rule using the canonical modifier token under the alias name. Matching by
 * modifier token (not the full component selector) keeps it base-class-agnostic — e.g.
 * Form-Field-Messages' record name is plural but its class is singular.
 */
@@ -98,6 +98,19 @@ 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`
@@ -292,14 +305,14 @@ 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 — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @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 — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @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 — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @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 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;
 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 — @deprecated {@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 — @deprecated {@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 — @deprecated {@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 * @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;
 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",
@@ -313,9 +326,14 @@ const billboardByTheme = {
 };
 billboardByTheme.rebrand;
 const breadcrumb$1 = {
-	"rebrand": "/**\n * @component breadcrumb\n * @summary A breadcrumb trail with `/` separators; the last crumb is the current page.\n * @remarks Sets its own responsive `gap` between crumbs (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -icon-* — Render a glyph icon in a crumb link (for example, home in the first crumb).\n * @part .item — A crumb; the last one is the current page.\n * @pseudo ::after — Renders the `/` separator after every crumb except the last.\n * @a11y Wrap the trail in `<nav aria-label>` and mark the current page's crumb with `aria-current=\"page\"`.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n *   <span class=\"item\">\n *     <a href=\"#\"><span class=\"pfx-icon -icon-house\"></span> Home</a>\n *   </span>\n *   <span class=\"item\"><a href=\"#\">Guides</a></span>\n *   <span class=\"item\"><a href=\"#\">Components</a></span>\n *   <span class=\"item\" aria-current=\"page\">Breadcrumb</span>\n * </nav>\n * @structure\n * .pfx-breadcrumb {\n *   .item {\n *     a {\n *       [class*=\"-icon-\"]:optional {}\n *     }\n *   }\n * }\n * @related link — Styles each crumb as a link.\n */\n.pfx-breadcrumb {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-breadcrumb-gap-md);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm {\n  gap: var(--instui-component-breadcrumb-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-lg {\n  gap: var(--instui-component-breadcrumb-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n}\n\n.pfx-breadcrumb.-size-sm .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n}\n\n.pfx-breadcrumb.-size-lg .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n}\n\n@scope (.pfx-breadcrumb) {\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope > .item:not(:last-child)::after {\n    content: \"/\";\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n    color: var(--instui-color-text-muted);\n  }\n}\n",
-	"canvas": "/**\n * @component breadcrumb\n * @summary A breadcrumb trail with `/` separators; the last crumb is the current page.\n * @remarks Sets its own responsive `gap` between crumbs (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -icon-* — Render a glyph icon in a crumb link (for example, home in the first crumb).\n * @part .item — A crumb; the last one is the current page.\n * @pseudo ::after — Renders the `/` separator after every crumb except the last.\n * @a11y Wrap the trail in `<nav aria-label>` and mark the current page's crumb with `aria-current=\"page\"`.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n *   <span class=\"item\">\n *     <a href=\"#\"><span class=\"pfx-icon -icon-house\"></span> Home</a>\n *   </span>\n *   <span class=\"item\"><a href=\"#\">Guides</a></span>\n *   <span class=\"item\"><a href=\"#\">Components</a></span>\n *   <span class=\"item\" aria-current=\"page\">Breadcrumb</span>\n * </nav>\n * @structure\n * .pfx-breadcrumb {\n *   .item {\n *     a {\n *       [class*=\"-icon-\"]:optional {}\n *     }\n *   }\n * }\n * @related link — Styles each crumb as a link.\n */\n.pfx-breadcrumb {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-breadcrumb-gap-md);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm {\n  gap: var(--instui-component-breadcrumb-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-lg {\n  gap: var(--instui-component-breadcrumb-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n}\n\n.pfx-breadcrumb.-size-sm .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n}\n\n.pfx-breadcrumb.-size-lg .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n}\n\n@scope (.pfx-breadcrumb) {\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope > .item:not(:last-child)::after {\n    content: \"/\";\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n    color: var(--instui-color-text-muted);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component breadcrumb\n * @summary A breadcrumb trail with `/` separators; the last crumb is the current page.\n * @remarks Sets its own responsive `gap` between crumbs (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -icon-* — Render a glyph icon in a crumb link (for example, home in the first crumb).\n * @part .item — A crumb; the last one is the current page.\n * @pseudo ::after — Renders the `/` separator after every crumb except the last.\n * @a11y Wrap the trail in `<nav aria-label>` and mark the current page's crumb with `aria-current=\"page\"`.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n *   <span class=\"item\">\n *     <a href=\"#\"><span class=\"pfx-icon -icon-house\"></span> Home</a>\n *   </span>\n *   <span class=\"item\"><a href=\"#\">Guides</a></span>\n *   <span class=\"item\"><a href=\"#\">Components</a></span>\n *   <span class=\"item\" aria-current=\"page\">Breadcrumb</span>\n * </nav>\n * @structure\n * .pfx-breadcrumb {\n *   .item {\n *     a {\n *       [class*=\"-icon-\"]:optional {}\n *     }\n *   }\n * }\n * @related link — Styles each crumb as a link.\n */\n.pfx-breadcrumb {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-breadcrumb-gap-md);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm {\n  gap: var(--instui-component-breadcrumb-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-lg {\n  gap: var(--instui-component-breadcrumb-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n}\n\n.pfx-breadcrumb.-size-sm .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n}\n\n.pfx-breadcrumb.-size-lg .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n}\n\n@scope (.pfx-breadcrumb) {\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope > .item:not(:last-child)::after {\n    content: \"/\";\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n    color: var(--instui-color-text-muted);\n  }\n}\n"
+	"rebrand": "/**\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",
+	"canvas": "/**\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",
+	"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;
 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",
@@ -323,14 +341,19 @@ const byline$1 = {
 	"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;
 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 * @part .day — A day cell; `-today`, `-selected`, and `-outside-month` mark its state.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n *   <div class=\"nav\">\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n *     <strong>March 2026</strong>\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n *   </div>\n *   <div class=\"grid\">\n *     <span class=\"weekday\">Su</span>\n *     <span class=\"weekday\">Mo</span>\n *     <span class=\"weekday\">Tu</span>\n *     <span class=\"weekday\">We</span>\n *     <span class=\"weekday\">Th</span>\n *     <span class=\"weekday\">Fr</span>\n *     <span class=\"weekday\">Sa</span>\n *     <span class=\"day -outside-month\">23</span>\n *     <span class=\"day -outside-month\">24</span>\n *     <span class=\"day -outside-month\">25</span>\n *     <span class=\"day -outside-month\">26</span>\n *     <span class=\"day -outside-month\">27</span>\n *     <span class=\"day -outside-month\">28</span>\n *     <span class=\"day\">1</span>\n *     <span class=\"day\">2</span>\n *     <span class=\"day\">3</span>\n *     <span class=\"day\">4</span>\n *     <span class=\"day\">5</span>\n *     <span class=\"day\">6</span>\n *     <span class=\"day -today\">7</span>\n *     <span class=\"day\">8</span>\n *     <span class=\"day\">9</span>\n *     <span class=\"day\">10</span>\n *     <span class=\"day\">11</span>\n *     <span class=\"day -selected\">12</span>\n *     <span class=\"day\">13</span>\n *     <span class=\"day\">14</span>\n *     <span class=\"day\">15</span>\n *   </div>\n * </div>\n * @structure\n * .pfx-calendar {\n *   .nav {\n *     .pfx-button {}\n *     strong {}\n *   }\n *   .grid {\n *     .weekday {}\n *     .day {}\n *   }\n * }\n */\n.pfx-calendar {\n  display: inline-block;\n  text-align: center;\n  background: var(--instui-component-calendar-background);\n  color: var(--instui-component-calendar-color);\n  font-family: var(--instui-component-calendar-font-family);\n  font-size: var(--instui-component-calendar-font-size);\n  font-weight: var(--instui-component-calendar-font-weight);\n  line-height: var(--instui-component-calendar-line-height);\n}\n@scope (.pfx-calendar) {\n  /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n   only spaces the row below itself, so margin is block-end only — no inline inset). */\n  :scope > .nav {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-block-end: var(--instui-component-calendar-nav-margin);\n  }\n  /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n   off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n   whose day table spaces cells with the browser-default border-spacing in both directions. */\n  :scope > .grid {\n    display: grid;\n    grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n    justify-content: center;\n    gap: var(--instui-spacing-space2xs);\n  }\n  .weekday,\n  .day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n  }\n  .weekday {\n    font-weight: var(--instui-font-weight-interactive);\n  }\n  .day {\n    font-size: var(--instui-component-calendar-day-font-size);\n    color: var(--instui-component-calendar-day-color);\n    background: var(--instui-component-calendar-day-background);\n    cursor: pointer;\n  }\n  .day.-outside-month {\n    color: var(--instui-component-calendar-day-outside-month-color);\n  }\n  .day.-today {\n    background: var(--instui-component-calendar-day-today-background);\n    color: var(--instui-component-calendar-day-today-color);\n    border-radius: var(--instui-component-calendar-day-today-border-radius);\n  }\n  .day.-selected {\n    background: var(--instui-component-calendar-day-selected-background);\n    color: var(--instui-component-calendar-day-selected-color);\n    border-radius: var(--instui-component-calendar-day-selected-border-radius);\n  }\n}\n",
-	"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 * @part .day — A day cell; `-today`, `-selected`, and `-outside-month` mark its state.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n *   <div class=\"nav\">\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n *     <strong>March 2026</strong>\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n *   </div>\n *   <div class=\"grid\">\n *     <span class=\"weekday\">Su</span>\n *     <span class=\"weekday\">Mo</span>\n *     <span class=\"weekday\">Tu</span>\n *     <span class=\"weekday\">We</span>\n *     <span class=\"weekday\">Th</span>\n *     <span class=\"weekday\">Fr</span>\n *     <span class=\"weekday\">Sa</span>\n *     <span class=\"day -outside-month\">23</span>\n *     <span class=\"day -outside-month\">24</span>\n *     <span class=\"day -outside-month\">25</span>\n *     <span class=\"day -outside-month\">26</span>\n *     <span class=\"day -outside-month\">27</span>\n *     <span class=\"day -outside-month\">28</span>\n *     <span class=\"day\">1</span>\n *     <span class=\"day\">2</span>\n *     <span class=\"day\">3</span>\n *     <span class=\"day\">4</span>\n *     <span class=\"day\">5</span>\n *     <span class=\"day\">6</span>\n *     <span class=\"day -today\">7</span>\n *     <span class=\"day\">8</span>\n *     <span class=\"day\">9</span>\n *     <span class=\"day\">10</span>\n *     <span class=\"day\">11</span>\n *     <span class=\"day -selected\">12</span>\n *     <span class=\"day\">13</span>\n *     <span class=\"day\">14</span>\n *     <span class=\"day\">15</span>\n *   </div>\n * </div>\n * @structure\n * .pfx-calendar {\n *   .nav {\n *     .pfx-button {}\n *     strong {}\n *   }\n *   .grid {\n *     .weekday {}\n *     .day {}\n *   }\n * }\n */\n.pfx-calendar {\n  display: inline-block;\n  text-align: center;\n  background: var(--instui-component-calendar-background);\n  color: var(--instui-component-calendar-color);\n  font-family: var(--instui-component-calendar-font-family);\n  font-size: var(--instui-component-calendar-font-size);\n  font-weight: var(--instui-component-calendar-font-weight);\n  line-height: var(--instui-component-calendar-line-height);\n}\n@scope (.pfx-calendar) {\n  /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n   only spaces the row below itself, so margin is block-end only — no inline inset). */\n  :scope > .nav {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-block-end: var(--instui-component-calendar-nav-margin);\n  }\n  /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n   off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n   whose day table spaces cells with the browser-default border-spacing in both directions. */\n  :scope > .grid {\n    display: grid;\n    grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n    justify-content: center;\n    gap: var(--instui-spacing-space2xs);\n  }\n  .weekday,\n  .day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n  }\n  .weekday {\n    font-weight: var(--instui-font-weight-interactive);\n  }\n  .day {\n    font-size: var(--instui-component-calendar-day-font-size);\n    color: var(--instui-component-calendar-day-color);\n    background: var(--instui-component-calendar-day-background);\n    cursor: pointer;\n  }\n  .day.-outside-month {\n    color: var(--instui-component-calendar-day-outside-month-color);\n  }\n  .day.-today {\n    background: var(--instui-component-calendar-day-today-background);\n    color: var(--instui-component-calendar-day-today-color);\n    border-radius: var(--instui-component-calendar-day-today-border-radius);\n  }\n  .day.-selected {\n    background: var(--instui-component-calendar-day-selected-background);\n    color: var(--instui-component-calendar-day-selected-color);\n    border-radius: var(--instui-component-calendar-day-selected-border-radius);\n  }\n}\n",
-	"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 * @part .day — A day cell; `-today`, `-selected`, and `-outside-month` mark its state.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n *   <div class=\"nav\">\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n *     <strong>March 2026</strong>\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n *   </div>\n *   <div class=\"grid\">\n *     <span class=\"weekday\">Su</span>\n *     <span class=\"weekday\">Mo</span>\n *     <span class=\"weekday\">Tu</span>\n *     <span class=\"weekday\">We</span>\n *     <span class=\"weekday\">Th</span>\n *     <span class=\"weekday\">Fr</span>\n *     <span class=\"weekday\">Sa</span>\n *     <span class=\"day -outside-month\">23</span>\n *     <span class=\"day -outside-month\">24</span>\n *     <span class=\"day -outside-month\">25</span>\n *     <span class=\"day -outside-month\">26</span>\n *     <span class=\"day -outside-month\">27</span>\n *     <span class=\"day -outside-month\">28</span>\n *     <span class=\"day\">1</span>\n *     <span class=\"day\">2</span>\n *     <span class=\"day\">3</span>\n *     <span class=\"day\">4</span>\n *     <span class=\"day\">5</span>\n *     <span class=\"day\">6</span>\n *     <span class=\"day -today\">7</span>\n *     <span class=\"day\">8</span>\n *     <span class=\"day\">9</span>\n *     <span class=\"day\">10</span>\n *     <span class=\"day\">11</span>\n *     <span class=\"day -selected\">12</span>\n *     <span class=\"day\">13</span>\n *     <span class=\"day\">14</span>\n *     <span class=\"day\">15</span>\n *   </div>\n * </div>\n * @structure\n * .pfx-calendar {\n *   .nav {\n *     .pfx-button {}\n *     strong {}\n *   }\n *   .grid {\n *     .weekday {}\n *     .day {}\n *   }\n * }\n */\n.pfx-calendar {\n  display: inline-block;\n  text-align: center;\n  background: var(--instui-component-calendar-background);\n  color: var(--instui-component-calendar-color);\n  font-family: var(--instui-component-calendar-font-family);\n  font-size: var(--instui-component-calendar-font-size);\n  font-weight: var(--instui-component-calendar-font-weight);\n  line-height: var(--instui-component-calendar-line-height);\n}\n@scope (.pfx-calendar) {\n  /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n   only spaces the row below itself, so margin is block-end only — no inline inset). */\n  :scope > .nav {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-block-end: var(--instui-component-calendar-nav-margin);\n  }\n  /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n   off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n   whose day table spaces cells with the browser-default border-spacing in both directions. */\n  :scope > .grid {\n    display: grid;\n    grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n    justify-content: center;\n    gap: var(--instui-spacing-space2xs);\n  }\n  .weekday,\n  .day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n  }\n  .weekday {\n    font-weight: var(--instui-font-weight-interactive);\n  }\n  .day {\n    font-size: var(--instui-component-calendar-day-font-size);\n    color: var(--instui-component-calendar-day-color);\n    background: var(--instui-component-calendar-day-background);\n    cursor: pointer;\n  }\n  .day.-outside-month {\n    color: var(--instui-component-calendar-day-outside-month-color);\n  }\n  .day.-today {\n    background: var(--instui-component-calendar-day-today-background);\n    color: var(--instui-component-calendar-day-today-color);\n    border-radius: var(--instui-component-calendar-day-today-border-radius);\n  }\n  .day.-selected {\n    background: var(--instui-component-calendar-day-selected-background);\n    color: var(--instui-component-calendar-day-selected-color);\n    border-radius: var(--instui-component-calendar-day-selected-border-radius);\n  }\n}\n"
+	"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;
+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;
 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  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n}\n\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  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n}\n\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  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n}\n\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 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;
 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",
@@ -338,29 +361,29 @@ const closeButton$1 = {
 	"canvasHighContrast": "/**\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"
 }.rebrand;
 const contextView$1 = {
-	"rebrand": "/**\n * @component context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n.pfx-context-view {\n  position: relative;\n  display: inline-block;\n  padding: var(--instui-spacing-space-md);\n  background: var(--instui-color-background-elevated-surface-base);\n  color: var(--instui-color-text-base);\n  border: var(--instui-component-context-view-arrow-border-width) solid\n    var(--instui-component-context-view-arrow-border-color);\n  border-radius: var(--instui-component-context-view-border-radius);\n  /* ContextView floats over content — InstUI gives it a shadow. */\n  box-shadow: var(--instui-elevation-above);\n}\n/* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n   ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n   without it, a surface-coloured caret is invisible against a matching surface. */\n.pfx-context-view::before,\n.pfx-context-view::after {\n  content: \"\";\n  position: absolute;\n  border-style: solid;\n  border-color: transparent;\n}\n.pfx-context-view::before {\n  border-width: calc(\n    var(--instui-component-context-view-arrow-size) +\n      var(--instui-component-context-view-arrow-border-width)\n  );\n}\n.pfx-context-view::after {\n  border-width: var(--instui-component-context-view-arrow-size);\n}\n/* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n   pointing down. */\n.pfx-context-view::before {\n  top: 100%;\n  inset-inline-start: calc(\n    var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n  );\n  border-top-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view::after {\n  top: 100%;\n  inset-inline-start: var(--instui-spacing-space-lg);\n  border-top-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"bottom\": caret on the top edge, pointing up. */\n.pfx-context-view.-placement-bottom::before {\n  top: auto;\n  bottom: 100%;\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-bottom::after {\n  top: auto;\n  bottom: 100%;\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n.pfx-context-view.-placement-start::before,\n.pfx-context-view.-placement-start::after {\n  top: 50%;\n  inset-inline-start: 100%;\n  transform: translateY(-50%);\n  border-top-color: transparent;\n}\n.pfx-context-view.-placement-start::before {\n  border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-start::after {\n  border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n.pfx-context-view.-placement-end::before,\n.pfx-context-view.-placement-end::after {\n  top: 50%;\n  inset-inline-start: auto;\n  inset-inline-end: 100%;\n  transform: translateY(-50%);\n  border-top-color: transparent;\n}\n.pfx-context-view.-placement-end::before {\n  border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-end::after {\n  border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n.pfx-context-view.-color-inverse {\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::before {\n  border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::after {\n  border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::before {\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::after {\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::before {\n  border-top-color: transparent;\n  border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::after {\n  border-top-color: transparent;\n  border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::before {\n  border-top-color: transparent;\n  border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::after {\n  border-top-color: transparent;\n  border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n/* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n   above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n   and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n   supported; elsewhere the UA centres it. */\n[popover].pfx-context-view {\n  position: fixed;\n  overflow: visible;\n  margin: 0;\n}\n[popover].pfx-context-view:not(:popover-open) {\n  display: none;\n}\n/* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n   popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n   trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n@supports (position-area: block-end) {\n  [popover].pfx-context-view {\n    position-anchor: --pantoken-anchor;\n    position-try-fallbacks: flip-block, flip-inline;\n  }\n  [popover].pfx-context-view.-placement-top {\n    position-area: block-start;\n  }\n  [popover].pfx-context-view.-placement-bottom {\n    position-area: block-end;\n  }\n  [popover].pfx-context-view.-placement-start {\n    position-area: inline-start center;\n  }\n  [popover].pfx-context-view.-placement-end {\n    position-area: inline-end center;\n  }\n}\n",
-	"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/* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n   ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n   without it, a surface-coloured caret is invisible against a matching surface. */\n.pfx-context-view::before,\n.pfx-context-view::after {\n  content: \"\";\n  position: absolute;\n  border-style: solid;\n  border-color: transparent;\n}\n.pfx-context-view::before {\n  border-width: calc(\n    var(--instui-component-context-view-arrow-size) +\n      var(--instui-component-context-view-arrow-border-width)\n  );\n}\n.pfx-context-view::after {\n  border-width: var(--instui-component-context-view-arrow-size);\n}\n/* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n   pointing down. */\n.pfx-context-view::before {\n  top: 100%;\n  inset-inline-start: calc(\n    var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n  );\n  border-top-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view::after {\n  top: 100%;\n  inset-inline-start: var(--instui-spacing-space-lg);\n  border-top-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"bottom\": caret on the top edge, pointing up. */\n.pfx-context-view.-placement-bottom::before {\n  top: auto;\n  bottom: 100%;\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-bottom::after {\n  top: auto;\n  bottom: 100%;\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n.pfx-context-view.-placement-start::before,\n.pfx-context-view.-placement-start::after {\n  top: 50%;\n  inset-inline-start: 100%;\n  transform: translateY(-50%);\n  border-top-color: transparent;\n}\n.pfx-context-view.-placement-start::before {\n  border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-start::after {\n  border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n.pfx-context-view.-placement-end::before,\n.pfx-context-view.-placement-end::after {\n  top: 50%;\n  inset-inline-start: auto;\n  inset-inline-end: 100%;\n  transform: translateY(-50%);\n  border-top-color: transparent;\n}\n.pfx-context-view.-placement-end::before {\n  border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-end::after {\n  border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n.pfx-context-view.-color-inverse {\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::before {\n  border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::after {\n  border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::before {\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::after {\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::before {\n  border-top-color: transparent;\n  border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::after {\n  border-top-color: transparent;\n  border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::before {\n  border-top-color: transparent;\n  border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::after {\n  border-top-color: transparent;\n  border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n/* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n   above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n   and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n   supported; elsewhere the UA centres it. */\n[popover].pfx-context-view {\n  position: fixed;\n  overflow: visible;\n  margin: 0;\n}\n[popover].pfx-context-view:not(:popover-open) {\n  display: none;\n}\n/* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n   popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n   trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n@supports (position-area: block-end) {\n  [popover].pfx-context-view {\n    position-anchor: --pantoken-anchor;\n    position-try-fallbacks: flip-block, flip-inline;\n  }\n  [popover].pfx-context-view.-placement-top {\n    position-area: block-start;\n  }\n  [popover].pfx-context-view.-placement-bottom {\n    position-area: block-end;\n  }\n  [popover].pfx-context-view.-placement-start {\n    position-area: inline-start center;\n  }\n  [popover].pfx-context-view.-placement-end {\n    position-area: inline-end center;\n  }\n}\n",
-	"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/* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n   ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n   without it, a surface-coloured caret is invisible against a matching surface. */\n.pfx-context-view::before,\n.pfx-context-view::after {\n  content: \"\";\n  position: absolute;\n  border-style: solid;\n  border-color: transparent;\n}\n.pfx-context-view::before {\n  border-width: calc(\n    var(--instui-component-context-view-arrow-size) +\n      var(--instui-component-context-view-arrow-border-width)\n  );\n}\n.pfx-context-view::after {\n  border-width: var(--instui-component-context-view-arrow-size);\n}\n/* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n   pointing down. */\n.pfx-context-view::before {\n  top: 100%;\n  inset-inline-start: calc(\n    var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n  );\n  border-top-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view::after {\n  top: 100%;\n  inset-inline-start: var(--instui-spacing-space-lg);\n  border-top-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"bottom\": caret on the top edge, pointing up. */\n.pfx-context-view.-placement-bottom::before {\n  top: auto;\n  bottom: 100%;\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-bottom::after {\n  top: auto;\n  bottom: 100%;\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n.pfx-context-view.-placement-start::before,\n.pfx-context-view.-placement-start::after {\n  top: 50%;\n  inset-inline-start: 100%;\n  transform: translateY(-50%);\n  border-top-color: transparent;\n}\n.pfx-context-view.-placement-start::before {\n  border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-start::after {\n  border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n.pfx-context-view.-placement-end::before,\n.pfx-context-view.-placement-end::after {\n  top: 50%;\n  inset-inline-start: auto;\n  inset-inline-end: 100%;\n  transform: translateY(-50%);\n  border-top-color: transparent;\n}\n.pfx-context-view.-placement-end::before {\n  border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-end::after {\n  border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n.pfx-context-view.-color-inverse {\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::before {\n  border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::after {\n  border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::before {\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::after {\n  border-top-color: transparent;\n  border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::before {\n  border-top-color: transparent;\n  border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::after {\n  border-top-color: transparent;\n  border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::before {\n  border-top-color: transparent;\n  border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::after {\n  border-top-color: transparent;\n  border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n/* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n   above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n   and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n   supported; elsewhere the UA centres it. */\n[popover].pfx-context-view {\n  position: fixed;\n  overflow: visible;\n  margin: 0;\n}\n[popover].pfx-context-view:not(:popover-open) {\n  display: none;\n}\n/* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n   popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n   trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n@supports (position-area: block-end) {\n  [popover].pfx-context-view {\n    position-anchor: --pantoken-anchor;\n    position-try-fallbacks: flip-block, flip-inline;\n  }\n  [popover].pfx-context-view.-placement-top {\n    position-area: block-start;\n  }\n  [popover].pfx-context-view.-placement-bottom {\n    position-area: block-end;\n  }\n  [popover].pfx-context-view.-placement-start {\n    position-area: inline-start center;\n  }\n  [popover].pfx-context-view.-placement-end {\n    position-area: inline-end center;\n  }\n}\n"
+	"rebrand": "/**\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",
+	"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 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",
 	"canvasHighContrast": "/**\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"
 }.rebrand;
+const formField$1 = {
+	"rebrand": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n *   <span class=\"label\">Email address</span>\n *   <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *     <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n *   </div>\n * </label>\n * @structure\n * .pfx-form-field {\n *   .label {}\n *   .controls {\n *     .pfx-text-input {}\n *   }\n *   .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n  :scope > .label {\n    grid-area: label;\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n\n  :scope > .controls {\n    grid-area: controls;\n  }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n  grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n   (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n   control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n  display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n  display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"label controls\" \". messages\";\n  align-items: center;\n  column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n",
+	"canvas": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n *   <span class=\"label\">Email address</span>\n *   <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *     <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n *   </div>\n * </label>\n * @structure\n * .pfx-form-field {\n *   .label {}\n *   .controls {\n *     .pfx-text-input {}\n *   }\n *   .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n  :scope > .label {\n    grid-area: label;\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n\n  :scope > .controls {\n    grid-area: controls;\n  }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n  grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n   (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n   control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n  display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n  display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"label controls\" \". messages\";\n  align-items: center;\n  column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n",
+	"canvasHighContrast": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n *   <span class=\"label\">Email address</span>\n *   <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *     <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n *   </div>\n * </label>\n * @structure\n * .pfx-form-field {\n *   .label {}\n *   .controls {\n *     .pfx-text-input {}\n *   }\n *   .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n  :scope > .label {\n    grid-area: label;\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n\n  :scope > .controls {\n    grid-area: controls;\n  }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n  grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n   (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n   control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n  display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n  display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"label controls\" \". messages\";\n  align-items: center;\n  column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n"
+}.rebrand;
 const formFieldGroup$1 = {
 	"rebrand": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @remarks Sets its own `gap` between fields, tunable with the `-col-spacing-*`/`-row-spacing-*` modifiers below — prefer those over chaining a generic `-gap-*` spacing utility modifier, which overrides the built-in value outright.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n *   <legend>Shipping address</legend>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">First name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">Last name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">City</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">State</span>\n *     <span class=\"controls\">\n *       <select class=\"pfx-simple-select\">\n *         <option>CA</option>\n *         <option>NY</option>\n *         <option>TX</option>\n *       </select>\n *     </span>\n *   </label>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n *   </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n *   legend {}\n *   .pfx-form-field {}\n *   .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.pfx-form-field-group > legend {\n  grid-column: 1 / -1;\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-form-field-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n\n.pfx-form-field-group.-row-spacing-none {\n  row-gap: 0;\n}\n\n.pfx-form-field-group.-row-spacing-small {\n  row-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-row-spacing-medium {\n  row-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-row-spacing-large {\n  row-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-col-spacing-none {\n  column-gap: 0;\n}\n\n.pfx-form-field-group.-col-spacing-small {\n  column-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-col-spacing-medium {\n  column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-col-spacing-large {\n  column-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field-group.-v-align-middle {\n  align-items: center;\n}\n\n.pfx-form-field-group.-v-align-bottom {\n  align-items: end;\n}\n\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n   label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n   just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n  .pfx-form-field-group.-layout-aligned {\n    grid-template-columns: auto 1fr;\n    align-items: center;\n  }\n\n  .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n    display: grid;\n    grid-column: 1 / -1;\n    grid-template-columns: subgrid;\n    grid-template-areas: \"label controls\" \". messages\";\n    align-items: center;\n  }\n}\n",
 	"canvas": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @remarks Sets its own `gap` between fields, tunable with the `-col-spacing-*`/`-row-spacing-*` modifiers below — prefer those over chaining a generic `-gap-*` spacing utility modifier, which overrides the built-in value outright.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n *   <legend>Shipping address</legend>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">First name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">Last name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">City</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">State</span>\n *     <span class=\"controls\">\n *       <select class=\"pfx-simple-select\">\n *         <option>CA</option>\n *         <option>NY</option>\n *         <option>TX</option>\n *       </select>\n *     </span>\n *   </label>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n *   </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n *   legend {}\n *   .pfx-form-field {}\n *   .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.pfx-form-field-group > legend {\n  grid-column: 1 / -1;\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-form-field-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n\n.pfx-form-field-group.-row-spacing-none {\n  row-gap: 0;\n}\n\n.pfx-form-field-group.-row-spacing-small {\n  row-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-row-spacing-medium {\n  row-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-row-spacing-large {\n  row-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-col-spacing-none {\n  column-gap: 0;\n}\n\n.pfx-form-field-group.-col-spacing-small {\n  column-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-col-spacing-medium {\n  column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-col-spacing-large {\n  column-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field-group.-v-align-middle {\n  align-items: center;\n}\n\n.pfx-form-field-group.-v-align-bottom {\n  align-items: end;\n}\n\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n   label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n   just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n  .pfx-form-field-group.-layout-aligned {\n    grid-template-columns: auto 1fr;\n    align-items: center;\n  }\n\n  .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n    display: grid;\n    grid-column: 1 / -1;\n    grid-template-columns: subgrid;\n    grid-template-areas: \"label controls\" \". messages\";\n    align-items: center;\n  }\n}\n",
 	"canvasHighContrast": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @remarks Sets its own `gap` between fields, tunable with the `-col-spacing-*`/`-row-spacing-*` modifiers below — prefer those over chaining a generic `-gap-*` spacing utility modifier, which overrides the built-in value outright.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n *   <legend>Shipping address</legend>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">First name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">Last name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">City</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">State</span>\n *     <span class=\"controls\">\n *       <select class=\"pfx-simple-select\">\n *         <option>CA</option>\n *         <option>NY</option>\n *         <option>TX</option>\n *       </select>\n *     </span>\n *   </label>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n *   </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n *   legend {}\n *   .pfx-form-field {}\n *   .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.pfx-form-field-group > legend {\n  grid-column: 1 / -1;\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-form-field-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n\n.pfx-form-field-group.-row-spacing-none {\n  row-gap: 0;\n}\n\n.pfx-form-field-group.-row-spacing-small {\n  row-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-row-spacing-medium {\n  row-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-row-spacing-large {\n  row-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-col-spacing-none {\n  column-gap: 0;\n}\n\n.pfx-form-field-group.-col-spacing-small {\n  column-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-col-spacing-medium {\n  column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-col-spacing-large {\n  column-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field-group.-v-align-middle {\n  align-items: center;\n}\n\n.pfx-form-field-group.-v-align-bottom {\n  align-items: end;\n}\n\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n   label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n   just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n  .pfx-form-field-group.-layout-aligned {\n    grid-template-columns: auto 1fr;\n    align-items: center;\n  }\n\n  .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n    display: grid;\n    grid-column: 1 / -1;\n    grid-template-columns: subgrid;\n    grid-template-areas: \"label controls\" \". messages\";\n    align-items: center;\n  }\n}\n"
 }.rebrand;
 const formFieldMessages$1 = {
-	"rebrand": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
-	"canvas": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
-	"canvasHighContrast": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"
-}.rebrand;
-const formField$1 = {
-	"rebrand": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n *   <span class=\"label\">Email address</span>\n *   <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *     <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n *   </div>\n * </label>\n * @structure\n * .pfx-form-field {\n *   .label {}\n *   .controls {\n *     .pfx-text-input {}\n *   }\n *   .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n  :scope > .label {\n    grid-area: label;\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n\n  :scope > .controls {\n    grid-area: controls;\n  }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n  grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n   (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n   control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n  display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n  display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"label controls\" \". messages\";\n  align-items: center;\n  column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n",
-	"canvas": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n *   <span class=\"label\">Email address</span>\n *   <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *     <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n *   </div>\n * </label>\n * @structure\n * .pfx-form-field {\n *   .label {}\n *   .controls {\n *     .pfx-text-input {}\n *   }\n *   .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n  :scope > .label {\n    grid-area: label;\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n\n  :scope > .controls {\n    grid-area: controls;\n  }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n  grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n   (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n   control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n  display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n  display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"label controls\" \". messages\";\n  align-items: center;\n  column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n",
-	"canvasHighContrast": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n *   <span class=\"label\">Email address</span>\n *   <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *     <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n *   </div>\n * </label>\n * @structure\n * .pfx-form-field {\n *   .label {}\n *   .controls {\n *     .pfx-text-input {}\n *   }\n *   .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n  :scope > .label {\n    grid-area: label;\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n\n  :scope > .controls {\n    grid-area: controls;\n  }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n  grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n   (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n   control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n  display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n  display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"label controls\" \". messages\";\n  align-items: center;\n  column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n"
+	"rebrand": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @alias {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
+	"canvas": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @alias {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
+	"canvasHighContrast": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @alias {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"
 }.rebrand;
 const img$1 = {
 	"rebrand": "/**\n * @component img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n.pfx-img {\n  display: inline-block;\n  max-inline-size: 100%;\n  block-size: auto;\n  --pantoken-img-filter: none;\n  filter: var(--pantoken-img-filter);\n  transition: filter var(--instui-component-img-effect-transition-duration) ease;\n}\n.pfx-img.-display-block {\n  display: block;\n}\n/* constrain: fill a sized box (the consumer sets width/height). */\n.pfx-img.-constrain-cover {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n}\n.pfx-img.-constrain-contain {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: contain;\n}\n/* Effects compose through the custom property, so grayscale + blur can apply together. */\n.pfx-img.-with-grayscale {\n  --pantoken-img-filter: grayscale(1);\n}\n.pfx-img.-with-blur {\n  --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n}\n.pfx-img.-with-grayscale.-with-blur {\n  --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n}\n",
@@ -373,19 +396,44 @@ const inPlaceEdit$1 = {
 	"canvasHighContrast": "/**\n * @component in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n.pfx-in-place-edit {\n  display: inline-block;\n  min-inline-size: 2rem;\n  padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n  border: var(--instui-component-text-input-border-width) solid transparent;\n  border-radius: var(--instui-component-text-input-border-radius);\n  color: var(--instui-color-text-base);\n  font: inherit;\n  cursor: text;\n}\n/* Hover affordance: it's editable. */\n.pfx-in-place-edit:hover {\n  background: var(--instui-color-background-muted);\n}\n/* Focus = edit mode: input chrome + the focus ring. */\n.pfx-in-place-edit:focus {\n  background: var(--instui-component-text-input-background-color);\n  border-color: var(--instui-component-text-input-border-color);\n  outline: none;\n}\n.pfx-in-place-edit:focus-visible {\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n.pfx-in-place-edit.-readonly {\n  cursor: default;\n}\n.pfx-in-place-edit.-readonly:hover {\n  background: transparent;\n}\n"
 }.rebrand;
 const link$1 = {
-	"rebrand": "/**\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.\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",
-	"canvas": "/**\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.\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",
-	"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.\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": "/**\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",
+	"canvas": "/**\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",
+	"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.\n * @modifier -ordered — Ordered-list numbering.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -delimiter-solid — Separate items with a solid rule.\n * @modifier -delimiter-dashed — Separate items with a dashed rule.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n * @structure\n * .pfx-list {\n *   li {}\n * }\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n\n.pfx-list > li {\n  margin: var(--instui-component-list-item-spacing-medium) 0;\n}\n\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n\n.pfx-list.-size-sm > li {\n  margin: var(--instui-component-list-item-spacing-small) 0;\n}\n\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n\n.pfx-list.-size-lg > li {\n  margin: var(--instui-component-list-item-spacing-large) 0;\n}\n\n.pfx-list.-ordered > li::marker {\n  font-weight: var(--instui-component-list-ordered-number-font-weight);\n}\n\n.pfx-list.-ordered > li {\n  padding-inline-start: var(--instui-component-list-ordered-number-margin);\n}\n\n.pfx-list.-delimiter-solid > li + li {\n  border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n    var(--instui-component-list-item-delimiter-solid-border-style)\n    var(--instui-component-list-item-delimiter-solid-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n\n.pfx-list.-delimiter-dashed > li + li {\n  border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n    var(--instui-component-list-item-delimiter-dashed-border-style)\n    var(--instui-component-list-item-delimiter-dashed-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n\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.\n * @modifier -ordered — Ordered-list numbering.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -delimiter-solid — Separate items with a solid rule.\n * @modifier -delimiter-dashed — Separate items with a dashed rule.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n * @structure\n * .pfx-list {\n *   li {}\n * }\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n\n.pfx-list > li {\n  margin: var(--instui-component-list-item-spacing-medium) 0;\n}\n\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n\n.pfx-list.-size-sm > li {\n  margin: var(--instui-component-list-item-spacing-small) 0;\n}\n\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n\n.pfx-list.-size-lg > li {\n  margin: var(--instui-component-list-item-spacing-large) 0;\n}\n\n.pfx-list.-ordered > li::marker {\n  font-weight: var(--instui-component-list-ordered-number-font-weight);\n}\n\n.pfx-list.-ordered > li {\n  padding-inline-start: var(--instui-component-list-ordered-number-margin);\n}\n\n.pfx-list.-delimiter-solid > li + li {\n  border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n    var(--instui-component-list-item-delimiter-solid-border-style)\n    var(--instui-component-list-item-delimiter-solid-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n\n.pfx-list.-delimiter-dashed > li + li {\n  border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n    var(--instui-component-list-item-delimiter-dashed-border-style)\n    var(--instui-component-list-item-delimiter-dashed-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n\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.\n * @modifier -ordered — Ordered-list numbering.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -delimiter-solid — Separate items with a solid rule.\n * @modifier -delimiter-dashed — Separate items with a dashed rule.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n * @structure\n * .pfx-list {\n *   li {}\n * }\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n\n.pfx-list > li {\n  margin: var(--instui-component-list-item-spacing-medium) 0;\n}\n\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n\n.pfx-list.-size-sm > li {\n  margin: var(--instui-component-list-item-spacing-small) 0;\n}\n\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n\n.pfx-list.-size-lg > li {\n  margin: var(--instui-component-list-item-spacing-large) 0;\n}\n\n.pfx-list.-ordered > li::marker {\n  font-weight: var(--instui-component-list-ordered-number-font-weight);\n}\n\n.pfx-list.-ordered > li {\n  padding-inline-start: var(--instui-component-list-ordered-number-margin);\n}\n\n.pfx-list.-delimiter-solid > li + li {\n  border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n    var(--instui-component-list-item-delimiter-solid-border-style)\n    var(--instui-component-list-item-delimiter-solid-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n\n.pfx-list.-delimiter-dashed > li + li {\n  border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n    var(--instui-component-list-item-delimiter-dashed-border-style)\n    var(--instui-component-list-item-delimiter-dashed-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n\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 * @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;
+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;
+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",
+	"canvas": "/**\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",
+	"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`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example -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 * @structure\n * .pfx-menu {\n *   .group {}\n *   .item {}\n *   .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\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\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  /* A labelled group of items. */\n  :scope > .group {\n    padding: var(--instui-component-menu-group-padding-vertical)\n      var(--instui-component-menu-group-padding-horizontal);\n    background: var(--instui-component-menu-group-background);\n    color: var(--instui-component-menu-group-color);\n    font-family: var(--instui-component-menu-group-font-family);\n    font-size: var(--instui-component-menu-group-font-size);\n    font-weight: var(--instui-component-menu-group-font-weight);\n  }\n\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\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example -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 * @structure\n * .pfx-menu {\n *   .group {}\n *   .item {}\n *   .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\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\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  /* A labelled group of items. */\n  :scope > .group {\n    padding: var(--instui-component-menu-group-padding-vertical)\n      var(--instui-component-menu-group-padding-horizontal);\n    background: var(--instui-component-menu-group-background);\n    color: var(--instui-component-menu-group-color);\n    font-family: var(--instui-component-menu-group-font-family);\n    font-size: var(--instui-component-menu-group-font-size);\n    font-weight: var(--instui-component-menu-group-font-weight);\n  }\n\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\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example -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 * @structure\n * .pfx-menu {\n *   .group {}\n *   .item {}\n *   .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\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\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  /* A labelled group of items. */\n  :scope > .group {\n    padding: var(--instui-component-menu-group-padding-vertical)\n      var(--instui-component-menu-group-padding-horizontal);\n    background: var(--instui-component-menu-group-background);\n    color: var(--instui-component-menu-group-color);\n    font-family: var(--instui-component-menu-group-font-family);\n    font-size: var(--instui-component-menu-group-font-size);\n    font-weight: var(--instui-component-menu-group-font-weight);\n  }\n\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\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;
+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;
+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;
+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;
 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",
@@ -393,14 +441,34 @@ const metric$1 = {
 	"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;
 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 * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body).\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body.\n * @part .header — The title row.\n * @part .body — The content region (a lone <img> goes full-bleed).\n * @part .footer — The actions row.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n *   <div class=\"header\"><strong>Small</strong></div>\n *   <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n *   <div class=\"footer\">\n *     <button class=\"pfx-button\">Close</button>\n *   </div>\n * </dialog>\n * @structure\n * .pfx-modal.-size-sm {\n *   .header {\n *     strong {}\n *   }\n *   .body {\n *     code {}\n *   }\n *   .footer {\n *     .pfx-button {}\n *   }\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n.pfx-modal {\n  max-width: var(--instui-component-modal-medium-max-width);\n  background: var(--instui-component-modal-background-color);\n  color: var(--instui-component-modal-text-color);\n  border: var(--instui-component-modal-border-width) solid\n    var(--instui-component-modal-border-color);\n  border-radius: var(--instui-component-modal-border-radius);\n  font-family: var(--instui-component-modal-font-family);\n  overflow: hidden;\n  /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n  box-shadow: var(--instui-elevation-topmost);\n}\n/* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n   no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n   optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\ndialog.pfx-modal {\n  margin: auto;\n  padding: 0;\n}\ndialog.pfx-modal::backdrop {\n  background: var(--instui-component-mask-background-color);\n}\ndialog.pfx-modal.-blur::backdrop {\n  backdrop-filter: blur(0.5rem);\n}\n.pfx-modal.-size-sm {\n  max-width: var(--instui-component-modal-small-max-width);\n}\n.pfx-modal.-size-lg {\n  max-width: var(--instui-component-modal-large-max-width);\n}\n.pfx-modal.-size-auto {\n  max-width: none;\n  min-width: var(--instui-component-modal-auto-min-width);\n}\n/* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n   inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n   `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n   at the viewport edge. */\n.pfx-modal.-size-fullscreen {\n  position: fixed;\n  inset: 0;\n  width: auto;\n  height: auto;\n  max-width: none;\n  max-height: none;\n  margin: 0;\n  border-radius: 0;\n}\n/* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n   stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n.pfx-modal.-overflow-fit {\n  display: flex;\n  flex-direction: column;\n  max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n}\n.pfx-modal.-color-inverse {\n  background: var(--instui-component-modal-inverse-background-color);\n  color: var(--instui-component-modal-inverse-text-color);\n  border-color: var(--instui-component-modal-inverse-border-color);\n}\n@scope (.pfx-modal) {\n  :scope.-overflow-fit > .body {\n    overflow-y: auto;\n  }\n  :scope > .header {\n    padding: var(--instui-component-modal-header-padding);\n    background: var(--instui-component-modal-header-background-color);\n    border-bottom: var(--instui-component-modal-header-border-width) solid\n      var(--instui-component-modal-header-border-color);\n  }\n  :scope > .body {\n    padding: var(--instui-component-modal-body-padding);\n  }\n  /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n   modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n  :scope > .body:has(> img) {\n    padding: 0;\n  }\n  :scope > .body:has(> img) img {\n    display: block;\n    width: 100%;\n  }\n  :scope > .footer {\n    padding: var(--instui-component-modal-footer-padding);\n    background: var(--instui-component-modal-footer-background-color);\n    border-top: var(--instui-component-modal-footer-border-width) solid\n      var(--instui-component-modal-footer-border-color);\n    border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n      var(--instui-component-modal-footer-border-radius);\n  }\n  :scope.-density-compact > .header {\n    padding: var(--instui-component-modal-header-padding-compact);\n  }\n  :scope.-density-compact > .body {\n    padding: var(--instui-component-modal-body-padding-compact);\n  }\n  :scope.-density-compact > .footer {\n    padding: var(--instui-component-modal-footer-padding-compact);\n  }\n  :scope.-color-inverse > .header {\n    background: var(--instui-component-modal-header-inverse-background-color);\n    border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n  }\n  :scope.-color-inverse > .body {\n    background: var(--instui-component-modal-body-inverse-background-color);\n  }\n  :scope.-color-inverse > .footer {\n    background: var(--instui-component-modal-footer-inverse-background-color);\n    border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n  }\n}\n",
-	"canvas": "/**\n * @component modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body).\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body.\n * @part .header — The title row.\n * @part .body — The content region (a lone <img> goes full-bleed).\n * @part .footer — The actions row.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n *   <div class=\"header\"><strong>Small</strong></div>\n *   <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n *   <div class=\"footer\">\n *     <button class=\"pfx-button\">Close</button>\n *   </div>\n * </dialog>\n * @structure\n * .pfx-modal.-size-sm {\n *   .header {\n *     strong {}\n *   }\n *   .body {\n *     code {}\n *   }\n *   .footer {\n *     .pfx-button {}\n *   }\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n.pfx-modal {\n  max-width: var(--instui-component-modal-medium-max-width);\n  background: var(--instui-component-modal-background-color);\n  color: var(--instui-component-modal-text-color);\n  border: var(--instui-component-modal-border-width) solid\n    var(--instui-component-modal-border-color);\n  border-radius: var(--instui-component-modal-border-radius);\n  font-family: var(--instui-component-modal-font-family);\n  overflow: hidden;\n  /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n  box-shadow: var(--instui-elevation-topmost);\n}\n/* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n   no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n   optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\ndialog.pfx-modal {\n  margin: auto;\n  padding: 0;\n}\ndialog.pfx-modal::backdrop {\n  background: var(--instui-component-mask-background-color);\n}\ndialog.pfx-modal.-blur::backdrop {\n  backdrop-filter: blur(0.5rem);\n}\n.pfx-modal.-size-sm {\n  max-width: var(--instui-component-modal-small-max-width);\n}\n.pfx-modal.-size-lg {\n  max-width: var(--instui-component-modal-large-max-width);\n}\n.pfx-modal.-size-auto {\n  max-width: none;\n  min-width: var(--instui-component-modal-auto-min-width);\n}\n/* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n   inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n   `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n   at the viewport edge. */\n.pfx-modal.-size-fullscreen {\n  position: fixed;\n  inset: 0;\n  width: auto;\n  height: auto;\n  max-width: none;\n  max-height: none;\n  margin: 0;\n  border-radius: 0;\n}\n/* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n   stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n.pfx-modal.-overflow-fit {\n  display: flex;\n  flex-direction: column;\n  max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n}\n.pfx-modal.-color-inverse {\n  background: var(--instui-component-modal-inverse-background-color);\n  color: var(--instui-component-modal-inverse-text-color);\n  border-color: var(--instui-component-modal-inverse-border-color);\n}\n@scope (.pfx-modal) {\n  :scope.-overflow-fit > .body {\n    overflow-y: auto;\n  }\n  :scope > .header {\n    padding: var(--instui-component-modal-header-padding);\n    background: var(--instui-component-modal-header-background-color);\n    border-bottom: var(--instui-component-modal-header-border-width) solid\n      var(--instui-component-modal-header-border-color);\n  }\n  :scope > .body {\n    padding: var(--instui-component-modal-body-padding);\n  }\n  /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n   modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n  :scope > .body:has(> img) {\n    padding: 0;\n  }\n  :scope > .body:has(> img) img {\n    display: block;\n    width: 100%;\n  }\n  :scope > .footer {\n    padding: var(--instui-component-modal-footer-padding);\n    background: var(--instui-component-modal-footer-background-color);\n    border-top: var(--instui-component-modal-footer-border-width) solid\n      var(--instui-component-modal-footer-border-color);\n    border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n      var(--instui-component-modal-footer-border-radius);\n  }\n  :scope.-density-compact > .header {\n    padding: var(--instui-component-modal-header-padding-compact);\n  }\n  :scope.-density-compact > .body {\n    padding: var(--instui-component-modal-body-padding-compact);\n  }\n  :scope.-density-compact > .footer {\n    padding: var(--instui-component-modal-footer-padding-compact);\n  }\n  :scope.-color-inverse > .header {\n    background: var(--instui-component-modal-header-inverse-background-color);\n    border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n  }\n  :scope.-color-inverse > .body {\n    background: var(--instui-component-modal-body-inverse-background-color);\n  }\n  :scope.-color-inverse > .footer {\n    background: var(--instui-component-modal-footer-inverse-background-color);\n    border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n  }\n}\n",
-	"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 * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body).\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body.\n * @part .header — The title row.\n * @part .body — The content region (a lone <img> goes full-bleed).\n * @part .footer — The actions row.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n *   <div class=\"header\"><strong>Small</strong></div>\n *   <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n *   <div class=\"footer\">\n *     <button class=\"pfx-button\">Close</button>\n *   </div>\n * </dialog>\n * @structure\n * .pfx-modal.-size-sm {\n *   .header {\n *     strong {}\n *   }\n *   .body {\n *     code {}\n *   }\n *   .footer {\n *     .pfx-button {}\n *   }\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n.pfx-modal {\n  max-width: var(--instui-component-modal-medium-max-width);\n  background: var(--instui-component-modal-background-color);\n  color: var(--instui-component-modal-text-color);\n  border: var(--instui-component-modal-border-width) solid\n    var(--instui-component-modal-border-color);\n  border-radius: var(--instui-component-modal-border-radius);\n  font-family: var(--instui-component-modal-font-family);\n  overflow: hidden;\n  /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n  box-shadow: var(--instui-elevation-topmost);\n}\n/* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n   no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n   optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\ndialog.pfx-modal {\n  margin: auto;\n  padding: 0;\n}\ndialog.pfx-modal::backdrop {\n  background: var(--instui-component-mask-background-color);\n}\ndialog.pfx-modal.-blur::backdrop {\n  backdrop-filter: blur(0.5rem);\n}\n.pfx-modal.-size-sm {\n  max-width: var(--instui-component-modal-small-max-width);\n}\n.pfx-modal.-size-lg {\n  max-width: var(--instui-component-modal-large-max-width);\n}\n.pfx-modal.-size-auto {\n  max-width: none;\n  min-width: var(--instui-component-modal-auto-min-width);\n}\n/* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n   inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n   `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n   at the viewport edge. */\n.pfx-modal.-size-fullscreen {\n  position: fixed;\n  inset: 0;\n  width: auto;\n  height: auto;\n  max-width: none;\n  max-height: none;\n  margin: 0;\n  border-radius: 0;\n}\n/* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n   stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n.pfx-modal.-overflow-fit {\n  display: flex;\n  flex-direction: column;\n  max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n}\n.pfx-modal.-color-inverse {\n  background: var(--instui-component-modal-inverse-background-color);\n  color: var(--instui-component-modal-inverse-text-color);\n  border-color: var(--instui-component-modal-inverse-border-color);\n}\n@scope (.pfx-modal) {\n  :scope.-overflow-fit > .body {\n    overflow-y: auto;\n  }\n  :scope > .header {\n    padding: var(--instui-component-modal-header-padding);\n    background: var(--instui-component-modal-header-background-color);\n    border-bottom: var(--instui-component-modal-header-border-width) solid\n      var(--instui-component-modal-header-border-color);\n  }\n  :scope > .body {\n    padding: var(--instui-component-modal-body-padding);\n  }\n  /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n   modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n  :scope > .body:has(> img) {\n    padding: 0;\n  }\n  :scope > .body:has(> img) img {\n    display: block;\n    width: 100%;\n  }\n  :scope > .footer {\n    padding: var(--instui-component-modal-footer-padding);\n    background: var(--instui-component-modal-footer-background-color);\n    border-top: var(--instui-component-modal-footer-border-width) solid\n      var(--instui-component-modal-footer-border-color);\n    border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n      var(--instui-component-modal-footer-border-radius);\n  }\n  :scope.-density-compact > .header {\n    padding: var(--instui-component-modal-header-padding-compact);\n  }\n  :scope.-density-compact > .body {\n    padding: var(--instui-component-modal-body-padding-compact);\n  }\n  :scope.-density-compact > .footer {\n    padding: var(--instui-component-modal-footer-padding-compact);\n  }\n  :scope.-color-inverse > .header {\n    background: var(--instui-component-modal-header-inverse-background-color);\n    border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n  }\n  :scope.-color-inverse > .body {\n    background: var(--instui-component-modal-body-inverse-background-color);\n  }\n  :scope.-color-inverse > .footer {\n    background: var(--instui-component-modal-footer-inverse-background-color);\n    border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n  }\n}\n"
+	"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",
+	"canvas": "/**\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",
+	"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;
+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;
+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;
 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 * @part .page — A page link or button; the current page carries `[aria-current]`.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate current\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n *   <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n *   <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n *   <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n *   <a class=\"page\" href=\"#\">2</a>\n *   <a class=\"page\" href=\"#\">3</a>\n *   <span class=\"ellipsis\">…</span>\n *   <a class=\"page\" href=\"#\">12</a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n *   .arrow {\n *     [class*=\"-icon-\"]:optional {}\n *   }\n *   .page {}\n *   .ellipsis {}\n * }\n */\n.pfx-pagination {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-pagination-page-indicator-gap);\n  font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n  /* A page number or a nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .page,\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .page:hover,\n  :scope > .arrow:hover {\n    background: var(--instui-color-background-muted);\n    color: var(--instui-color-text-interactive-navigation-primary-hover);\n  }\n\n  /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n\n  /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n",
-	"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 * @part .page — A page link or button; the current page carries `[aria-current]`.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate current\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n *   <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n *   <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n *   <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n *   <a class=\"page\" href=\"#\">2</a>\n *   <a class=\"page\" href=\"#\">3</a>\n *   <span class=\"ellipsis\">…</span>\n *   <a class=\"page\" href=\"#\">12</a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n *   .arrow {\n *     [class*=\"-icon-\"]:optional {}\n *   }\n *   .page {}\n *   .ellipsis {}\n * }\n */\n.pfx-pagination {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-pagination-page-indicator-gap);\n  font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n  /* A page number or a nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .page,\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .page:hover,\n  :scope > .arrow:hover {\n    background: var(--instui-color-background-muted);\n    color: var(--instui-color-text-interactive-navigation-primary-hover);\n  }\n\n  /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n\n  /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n",
-	"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 * @part .page — A page link or button; the current page carries `[aria-current]`.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate current\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n *   <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n *   <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n *   <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n *   <a class=\"page\" href=\"#\">2</a>\n *   <a class=\"page\" href=\"#\">3</a>\n *   <span class=\"ellipsis\">…</span>\n *   <a class=\"page\" href=\"#\">12</a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n *   .arrow {\n *     [class*=\"-icon-\"]:optional {}\n *   }\n *   .page {}\n *   .ellipsis {}\n * }\n */\n.pfx-pagination {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-pagination-page-indicator-gap);\n  font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n  /* A page number or a nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .page,\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .page:hover,\n  :scope > .arrow:hover {\n    background: var(--instui-color-background-muted);\n    color: var(--instui-color-text-interactive-navigation-primary-hover);\n  }\n\n  /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n\n  /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n"
+	"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;
+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;
 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",
@@ -412,26 +480,26 @@ const popover$1 = {
 	"canvas": "/**\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",
 	"canvasHighContrast": "/**\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"
 }.rebrand;
+const progress$1 = {
+	"rebrand": "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks `.value` is a sibling of `.bar`, both children of the root — mirroring how progress-circle nests its own `.value` part. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), animating `.bar` as a sliding segment and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate meter changes over half a second.\n * @modifier -render-value-inside — Renders `.value` inside the track, aligned to its start, instead of beside it; style it for legibility over the meter colour.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @part .value — The value text beside the bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; animates `.bar` as a sliding segment and hides `.value`.\n * @cssproperty --value <number> — The current progress value.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @accessibility Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * ### Nested label\n * ```html\n * <label>\n *   Uploading Document: <progress class=\"pfx-progress -color-brand\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"storage-used\">Storage used</label>\n * <meter id=\"storage-used\" class=\"pfx-progress -color-warning\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n *   label {\n *     .pfx-progress {\n *       .bar {}\n *       .value {}\n *     }\n *   }\n * }\n * @variant external-label {\n *   label {}\n *   .pfx-progress {\n *     .bar {}\n *     .value {}\n *   }\n * }\n * @related progress-circle — The circular form of the same determinate progress.\n * @stable\n * @sealed\n */\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n   --value) reads as loading rather than rendering a broken 0%-width bar. */\n@keyframes pantoken-progress-indeterminate {\n  0% {\n    left: -40%;\n  }\n\n  100% {\n    left: 100%;\n  }\n}\n\n.pfx-progress {\n  --value: var(--value-now);\n  --min: 0;\n  --max: var(--value-max);\n  position: relative;\n  display: block;\n  width: 100%;\n  height: var(--instui-component-progress-bar-medium-height);\n  background: var(--instui-component-progress-bar-track-color);\n  /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n  border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n    var(--instui-component-progress-bar-border-color);\n  border-radius: var(--instui-component-progress-bar-border-radius);\n  overflow: hidden;\n}\n\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n   border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n   the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n  content: \"\";\n  position: absolute;\n  inset-inline: 0;\n  bottom: 0;\n  height: var(--instui-component-progress-bar-track-bottom-border-width);\n  background: var(--instui-component-progress-bar-track-bottom-border-color);\n  pointer-events: none;\n}\n\n.pfx-progress.-size-xs {\n  height: var(--instui-component-progress-bar-x-small-height);\n}\n\n.pfx-progress.-size-sm {\n  height: var(--instui-component-progress-bar-small-height);\n}\n\n.pfx-progress.-size-md {\n  height: var(--instui-component-progress-bar-medium-height);\n}\n\n.pfx-progress.-size-lg {\n  height: var(--instui-component-progress-bar-large-height);\n}\n\n@scope (.pfx-progress) {\n  :scope > .bar {\n    height: 100%;\n    width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);\n    background: var(--instui-color-background-brand);\n    border-radius: var(--instui-component-progress-bar-border-radius);\n  }\n\n  :scope > .value {\n    padding: 0 var(--instui-component-progress-bar-value-padding);\n    color: var(--instui-component-progress-bar-text-color);\n    font-family: var(--instui-component-progress-bar-font-family);\n    font-size: var(--instui-component-progress-bar-medium-value-font-size);\n    font-weight: var(--instui-component-progress-bar-font-weight);\n    line-height: var(--instui-component-progress-bar-line-height);\n  }\n\n  :scope.-color-inverse > .value,\n  :scope > .value.-color-inverse {\n    color: var(--instui-component-progress-bar-text-color-inverse);\n  }\n\n  /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n  :scope:indeterminate > .bar {\n    position: absolute;\n    width: 40%;\n    animation: pantoken-progress-indeterminate 1.4s ease-in-out infinite;\n  }\n\n  :scope:indeterminate > .value {\n    visibility: hidden;\n  }\n}\n\n.pfx-progress.-color-brand .bar {\n  background: var(--instui-color-background-brand);\n}\n\n.pfx-progress.-color-info .bar {\n  background: var(--instui-color-background-info);\n}\n\n.pfx-progress.-color-success .bar {\n  background: var(--instui-color-background-success);\n}\n\n.pfx-progress.-color-warning .bar {\n  background: var(--instui-color-background-warning);\n}\n\n.pfx-progress.-color-danger .bar {\n  background: var(--instui-color-background-error);\n}\n\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n   InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n   wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n  background: var(--instui-component-progress-bar-track-color-inverse);\n  border-color: var(--instui-component-progress-bar-border-color-inverse);\n  color: var(--instui-component-progress-bar-text-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse::after {\n  background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse .bar {\n  background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n\n.pfx-progress.-render-value-inside .value {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n/* Mount/value transition — the interactions layer toggles `-should-animate` on value changes. */\n.pfx-progress.-should-animate > .bar {\n  transition: all 0.5s;\n}\n",
+	"canvas": "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks `.value` is a sibling of `.bar`, both children of the root — mirroring how progress-circle nests its own `.value` part. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), animating `.bar` as a sliding segment and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate meter changes over half a second.\n * @modifier -render-value-inside — Renders `.value` inside the track, aligned to its start, instead of beside it; style it for legibility over the meter colour.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @part .value — The value text beside the bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; animates `.bar` as a sliding segment and hides `.value`.\n * @cssproperty --value <number> — The current progress value.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @accessibility Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * ### Nested label\n * ```html\n * <label>\n *   Uploading Document: <progress class=\"pfx-progress -color-brand\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"storage-used\">Storage used</label>\n * <meter id=\"storage-used\" class=\"pfx-progress -color-warning\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n *   label {\n *     .pfx-progress {\n *       .bar {}\n *       .value {}\n *     }\n *   }\n * }\n * @variant external-label {\n *   label {}\n *   .pfx-progress {\n *     .bar {}\n *     .value {}\n *   }\n * }\n * @related progress-circle — The circular form of the same determinate progress.\n * @stable\n * @sealed\n */\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n   --value) reads as loading rather than rendering a broken 0%-width bar. */\n@keyframes pantoken-progress-indeterminate {\n  0% {\n    left: -40%;\n  }\n\n  100% {\n    left: 100%;\n  }\n}\n\n.pfx-progress {\n  --value: var(--value-now);\n  --min: 0;\n  --max: var(--value-max);\n  position: relative;\n  display: block;\n  width: 100%;\n  height: var(--instui-component-progress-bar-medium-height);\n  background: var(--instui-component-progress-bar-track-color);\n  /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n  border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n    var(--instui-component-progress-bar-border-color);\n  border-radius: var(--instui-component-progress-bar-border-radius);\n  overflow: hidden;\n}\n\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n   border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n   the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n  content: \"\";\n  position: absolute;\n  inset-inline: 0;\n  bottom: 0;\n  height: var(--instui-component-progress-bar-track-bottom-border-width);\n  background: var(--instui-component-progress-bar-track-bottom-border-color);\n  pointer-events: none;\n}\n\n.pfx-progress.-size-xs {\n  height: var(--instui-component-progress-bar-x-small-height);\n}\n\n.pfx-progress.-size-sm {\n  height: var(--instui-component-progress-bar-small-height);\n}\n\n.pfx-progress.-size-md {\n  height: var(--instui-component-progress-bar-medium-height);\n}\n\n.pfx-progress.-size-lg {\n  height: var(--instui-component-progress-bar-large-height);\n}\n\n@scope (.pfx-progress) {\n  :scope > .bar {\n    height: 100%;\n    width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);\n    background: var(--instui-color-background-brand);\n    border-radius: var(--instui-component-progress-bar-border-radius);\n  }\n\n  :scope > .value {\n    padding: 0 var(--instui-component-progress-bar-value-padding);\n    color: var(--instui-component-progress-bar-text-color);\n    font-family: var(--instui-component-progress-bar-font-family);\n    font-size: var(--instui-component-progress-bar-medium-value-font-size);\n    font-weight: var(--instui-component-progress-bar-font-weight);\n    line-height: var(--instui-component-progress-bar-line-height);\n  }\n\n  :scope.-color-inverse > .value,\n  :scope > .value.-color-inverse {\n    color: var(--instui-component-progress-bar-text-color-inverse);\n  }\n\n  /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n  :scope:indeterminate > .bar {\n    position: absolute;\n    width: 40%;\n    animation: pantoken-progress-indeterminate 1.4s ease-in-out infinite;\n  }\n\n  :scope:indeterminate > .value {\n    visibility: hidden;\n  }\n}\n\n.pfx-progress.-color-brand .bar {\n  background: var(--instui-color-background-brand);\n}\n\n.pfx-progress.-color-info .bar {\n  background: var(--instui-color-background-info);\n}\n\n.pfx-progress.-color-success .bar {\n  background: var(--instui-color-background-success);\n}\n\n.pfx-progress.-color-warning .bar {\n  background: var(--instui-color-background-warning);\n}\n\n.pfx-progress.-color-danger .bar {\n  background: var(--instui-color-background-error);\n}\n\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n   InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n   wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n  background: var(--instui-component-progress-bar-track-color-inverse);\n  border-color: var(--instui-component-progress-bar-border-color-inverse);\n  color: var(--instui-component-progress-bar-text-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse::after {\n  background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse .bar {\n  background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n\n.pfx-progress.-render-value-inside .value {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n/* Mount/value transition — the interactions layer toggles `-should-animate` on value changes. */\n.pfx-progress.-should-animate > .bar {\n  transition: all 0.5s;\n}\n",
+	"canvasHighContrast": "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks `.value` is a sibling of `.bar`, both children of the root — mirroring how progress-circle nests its own `.value` part. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), animating `.bar` as a sliding segment and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate meter changes over half a second.\n * @modifier -render-value-inside — Renders `.value` inside the track, aligned to its start, instead of beside it; style it for legibility over the meter colour.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @part .value — The value text beside the bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; animates `.bar` as a sliding segment and hides `.value`.\n * @cssproperty --value <number> — The current progress value.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @accessibility Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * ### Nested label\n * ```html\n * <label>\n *   Uploading Document: <progress class=\"pfx-progress -color-brand\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"storage-used\">Storage used</label>\n * <meter id=\"storage-used\" class=\"pfx-progress -color-warning\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n *   label {\n *     .pfx-progress {\n *       .bar {}\n *       .value {}\n *     }\n *   }\n * }\n * @variant external-label {\n *   label {}\n *   .pfx-progress {\n *     .bar {}\n *     .value {}\n *   }\n * }\n * @related progress-circle — The circular form of the same determinate progress.\n * @stable\n * @sealed\n */\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n   --value) reads as loading rather than rendering a broken 0%-width bar. */\n@keyframes pantoken-progress-indeterminate {\n  0% {\n    left: -40%;\n  }\n\n  100% {\n    left: 100%;\n  }\n}\n\n.pfx-progress {\n  --value: var(--value-now);\n  --min: 0;\n  --max: var(--value-max);\n  position: relative;\n  display: block;\n  width: 100%;\n  height: var(--instui-component-progress-bar-medium-height);\n  background: var(--instui-component-progress-bar-track-color);\n  /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n  border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n    var(--instui-component-progress-bar-border-color);\n  border-radius: var(--instui-component-progress-bar-border-radius);\n  overflow: hidden;\n}\n\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n   border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n   the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n  content: \"\";\n  position: absolute;\n  inset-inline: 0;\n  bottom: 0;\n  height: var(--instui-component-progress-bar-track-bottom-border-width);\n  background: var(--instui-component-progress-bar-track-bottom-border-color);\n  pointer-events: none;\n}\n\n.pfx-progress.-size-xs {\n  height: var(--instui-component-progress-bar-x-small-height);\n}\n\n.pfx-progress.-size-sm {\n  height: var(--instui-component-progress-bar-small-height);\n}\n\n.pfx-progress.-size-md {\n  height: var(--instui-component-progress-bar-medium-height);\n}\n\n.pfx-progress.-size-lg {\n  height: var(--instui-component-progress-bar-large-height);\n}\n\n@scope (.pfx-progress) {\n  :scope > .bar {\n    height: 100%;\n    width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);\n    background: var(--instui-color-background-brand);\n    border-radius: var(--instui-component-progress-bar-border-radius);\n  }\n\n  :scope > .value {\n    padding: 0 var(--instui-component-progress-bar-value-padding);\n    color: var(--instui-component-progress-bar-text-color);\n    font-family: var(--instui-component-progress-bar-font-family);\n    font-size: var(--instui-component-progress-bar-medium-value-font-size);\n    font-weight: var(--instui-component-progress-bar-font-weight);\n    line-height: var(--instui-component-progress-bar-line-height);\n  }\n\n  :scope.-color-inverse > .value,\n  :scope > .value.-color-inverse {\n    color: var(--instui-component-progress-bar-text-color-inverse);\n  }\n\n  /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n  :scope:indeterminate > .bar {\n    position: absolute;\n    width: 40%;\n    animation: pantoken-progress-indeterminate 1.4s ease-in-out infinite;\n  }\n\n  :scope:indeterminate > .value {\n    visibility: hidden;\n  }\n}\n\n.pfx-progress.-color-brand .bar {\n  background: var(--instui-color-background-brand);\n}\n\n.pfx-progress.-color-info .bar {\n  background: var(--instui-color-background-info);\n}\n\n.pfx-progress.-color-success .bar {\n  background: var(--instui-color-background-success);\n}\n\n.pfx-progress.-color-warning .bar {\n  background: var(--instui-color-background-warning);\n}\n\n.pfx-progress.-color-danger .bar {\n  background: var(--instui-color-background-error);\n}\n\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n   InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n   wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n  background: var(--instui-component-progress-bar-track-color-inverse);\n  border-color: var(--instui-component-progress-bar-border-color-inverse);\n  color: var(--instui-component-progress-bar-text-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse::after {\n  background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse .bar {\n  background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n\n.pfx-progress.-render-value-inside .value {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n/* Mount/value transition — the interactions layer toggles `-should-animate` on value changes. */\n.pfx-progress.-should-animate > .bar {\n  transition: all 0.5s;\n}\n"
+}.rebrand;
 const progressCircle$1 = {
-	"rebrand": "/**\n * @component progress-circle\n * @summary A circular progress ring driven by `--value` and `--value-max` custom properties.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; `--value` divided by `--value-max` drives the arc. Add `-should-animate` and load the interactions entry point to animate it from zero on mount. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), spinning the ring at a fixed arc and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate the meter, ring, and centered value into place on mount.\n * @modifier -should-animate-on-mount — @deprecated {@link -should-animate}\n * @modifier -shold-animate-on-mount — @deprecated {@link -should-animate}\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; spins `::before` at a fixed arc and hides `.value`.\n * @cssproperty --value <number> — The current progress value; registered with @property so it can transition.\n * @cssproperty --value-now <number> — @deprecated Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @deprecated {@link --max} The maximum progress value (default `100`).\n * @cssproperty --animation-delay <number> — Milliseconds to wait before starting the mount animation (default `0`).\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Registers the numeric progress properties with `@property` and paints with CSS `mask` and `conic-gradient`; where custom-property transitions are unsupported the ring still renders but won't animate.\n * @example\n * ### Nested label\n * ```html\n * <label>\n *   Uploading Document: <progress class=\"pfx-progress-circle -size-sm\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"score\">Score</label>\n * <meter id=\"score\" class=\"pfx-progress-circle -color-success\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n *   label {\n *     .pfx-progress-circle {\n *       .value {}\n *     }\n *   }\n * }\n * @variant external-label {\n *   label {}\n *   .pfx-progress-circle {\n *     .value {}\n *   }\n * }\n * @related progress — The linear bar form of the same determinate progress.\n * @stable\n * @sealed\n */\n@property --animation-delay {\n  syntax: \"<number>\";\n  inherits: true;\n  initial-value: 0;\n}\n\n.pfx-progress-circle {\n  --value: var(--value-now);\n  --min: 0;\n  --max: var(--value-max);\n  --animation-delay: 0;\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  color: var(--instui-component-progress-circle-color);\n  font-family: var(--instui-component-progress-circle-font-family);\n  font-weight: var(--instui-component-progress-circle-font-weight);\n  line-height: var(--instui-component-progress-circle-line-height);\n}\n\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: conic-gradient(\n    var(--pantoken-pc-fill)\n      clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%),\n    var(--pantoken-pc-track) 0\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    #0000 calc(100% - var(--pantoken-pc-stroke)),\n    #000 0\n  );\n  mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n}\n\n.pfx-progress-circle .value {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.pfx-progress-circle.-size-xs {\n  width: var(--instui-component-progress-circle-x-small-size);\n  height: var(--instui-component-progress-circle-x-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-sm {\n  width: var(--instui-component-progress-circle-small-size);\n  height: var(--instui-component-progress-circle-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-md {\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n}\n\n.pfx-progress-circle.-size-lg {\n  width: var(--instui-component-progress-circle-large-size);\n  height: var(--instui-component-progress-circle-large-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n\n.pfx-progress-circle.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n\n.pfx-progress-circle.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n\n.pfx-progress-circle.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n\n.pfx-progress-circle.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n\n.pfx-progress-circle.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n\n.pfx-progress-circle.-color-primary-inverse {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n  color: var(--instui-component-progress-circle-color-inverse);\n}\n\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n   --value) reads as loading rather than rendering a static, potentially-empty ring. */\n@keyframes pantoken-progress-circle-indeterminate {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n/* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n.pfx-progress-circle:indeterminate {\n  --value: 25;\n  --min: 0;\n  --max: 100;\n}\n\n.pfx-progress-circle:indeterminate::before {\n  animation: pantoken-progress-circle-indeterminate 1s linear infinite;\n}\n\n.pfx-progress-circle:indeterminate .value {\n  visibility: hidden;\n}\n",
-	"canvas": "/**\n * @component progress-circle\n * @summary A circular progress ring driven by `--value` and `--value-max` custom properties.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; `--value` divided by `--value-max` drives the arc. Add `-should-animate` and load the interactions entry point to animate it from zero on mount. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), spinning the ring at a fixed arc and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate the meter, ring, and centered value into place on mount.\n * @modifier -should-animate-on-mount — @deprecated {@link -should-animate}\n * @modifier -shold-animate-on-mount — @deprecated {@link -should-animate}\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; spins `::before` at a fixed arc and hides `.value`.\n * @cssproperty --value <number> — The current progress value; registered with @property so it can transition.\n * @cssproperty --value-now <number> — @deprecated Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @deprecated {@link --max} The maximum progress value (default `100`).\n * @cssproperty --animation-delay <number> — Milliseconds to wait before starting the mount animation (default `0`).\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Registers the numeric progress properties with `@property` and paints with CSS `mask` and `conic-gradient`; where custom-property transitions are unsupported the ring still renders but won't animate.\n * @example\n * ### Nested label\n * ```html\n * <label>\n *   Uploading Document: <progress class=\"pfx-progress-circle -size-sm\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"score\">Score</label>\n * <meter id=\"score\" class=\"pfx-progress-circle -color-success\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n *   label {\n *     .pfx-progress-circle {\n *       .value {}\n *     }\n *   }\n * }\n * @variant external-label {\n *   label {}\n *   .pfx-progress-circle {\n *     .value {}\n *   }\n * }\n * @related progress — The linear bar form of the same determinate progress.\n * @stable\n * @sealed\n */\n@property --animation-delay {\n  syntax: \"<number>\";\n  inherits: true;\n  initial-value: 0;\n}\n\n.pfx-progress-circle {\n  --value: var(--value-now);\n  --min: 0;\n  --max: var(--value-max);\n  --animation-delay: 0;\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  color: var(--instui-component-progress-circle-color);\n  font-family: var(--instui-component-progress-circle-font-family);\n  font-weight: var(--instui-component-progress-circle-font-weight);\n  line-height: var(--instui-component-progress-circle-line-height);\n}\n\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: conic-gradient(\n    var(--pantoken-pc-fill)\n      clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%),\n    var(--pantoken-pc-track) 0\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    #0000 calc(100% - var(--pantoken-pc-stroke)),\n    #000 0\n  );\n  mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n}\n\n.pfx-progress-circle .value {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.pfx-progress-circle.-size-xs {\n  width: var(--instui-component-progress-circle-x-small-size);\n  height: var(--instui-component-progress-circle-x-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-sm {\n  width: var(--instui-component-progress-circle-small-size);\n  height: var(--instui-component-progress-circle-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-md {\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n}\n\n.pfx-progress-circle.-size-lg {\n  width: var(--instui-component-progress-circle-large-size);\n  height: var(--instui-component-progress-circle-large-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n\n.pfx-progress-circle.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n\n.pfx-progress-circle.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n\n.pfx-progress-circle.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n\n.pfx-progress-circle.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n\n.pfx-progress-circle.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n\n.pfx-progress-circle.-color-primary-inverse {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n  color: var(--instui-component-progress-circle-color-inverse);\n}\n\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n   --value) reads as loading rather than rendering a static, potentially-empty ring. */\n@keyframes pantoken-progress-circle-indeterminate {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n/* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n.pfx-progress-circle:indeterminate {\n  --value: 25;\n  --min: 0;\n  --max: 100;\n}\n\n.pfx-progress-circle:indeterminate::before {\n  animation: pantoken-progress-circle-indeterminate 1s linear infinite;\n}\n\n.pfx-progress-circle:indeterminate .value {\n  visibility: hidden;\n}\n",
-	"canvasHighContrast": "/**\n * @component progress-circle\n * @summary A circular progress ring driven by `--value` and `--value-max` custom properties.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; `--value` divided by `--value-max` drives the arc. Add `-should-animate` and load the interactions entry point to animate it from zero on mount. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), spinning the ring at a fixed arc and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate the meter, ring, and centered value into place on mount.\n * @modifier -should-animate-on-mount — @deprecated {@link -should-animate}\n * @modifier -shold-animate-on-mount — @deprecated {@link -should-animate}\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; spins `::before` at a fixed arc and hides `.value`.\n * @cssproperty --value <number> — The current progress value; registered with @property so it can transition.\n * @cssproperty --value-now <number> — @deprecated Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @deprecated {@link --max} The maximum progress value (default `100`).\n * @cssproperty --animation-delay <number> — Milliseconds to wait before starting the mount animation (default `0`).\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Registers the numeric progress properties with `@property` and paints with CSS `mask` and `conic-gradient`; where custom-property transitions are unsupported the ring still renders but won't animate.\n * @example\n * ### Nested label\n * ```html\n * <label>\n *   Uploading Document: <progress class=\"pfx-progress-circle -size-sm\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"score\">Score</label>\n * <meter id=\"score\" class=\"pfx-progress-circle -color-success\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n *   label {\n *     .pfx-progress-circle {\n *       .value {}\n *     }\n *   }\n * }\n * @variant external-label {\n *   label {}\n *   .pfx-progress-circle {\n *     .value {}\n *   }\n * }\n * @related progress — The linear bar form of the same determinate progress.\n * @stable\n * @sealed\n */\n@property --animation-delay {\n  syntax: \"<number>\";\n  inherits: true;\n  initial-value: 0;\n}\n\n.pfx-progress-circle {\n  --value: var(--value-now);\n  --min: 0;\n  --max: var(--value-max);\n  --animation-delay: 0;\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  color: var(--instui-component-progress-circle-color);\n  font-family: var(--instui-component-progress-circle-font-family);\n  font-weight: var(--instui-component-progress-circle-font-weight);\n  line-height: var(--instui-component-progress-circle-line-height);\n}\n\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: conic-gradient(\n    var(--pantoken-pc-fill)\n      clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%),\n    var(--pantoken-pc-track) 0\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    #0000 calc(100% - var(--pantoken-pc-stroke)),\n    #000 0\n  );\n  mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n}\n\n.pfx-progress-circle .value {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.pfx-progress-circle.-size-xs {\n  width: var(--instui-component-progress-circle-x-small-size);\n  height: var(--instui-component-progress-circle-x-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-sm {\n  width: var(--instui-component-progress-circle-small-size);\n  height: var(--instui-component-progress-circle-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-md {\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n}\n\n.pfx-progress-circle.-size-lg {\n  width: var(--instui-component-progress-circle-large-size);\n  height: var(--instui-component-progress-circle-large-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n\n.pfx-progress-circle.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n\n.pfx-progress-circle.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n\n.pfx-progress-circle.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n\n.pfx-progress-circle.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n\n.pfx-progress-circle.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n\n.pfx-progress-circle.-color-primary-inverse {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n  color: var(--instui-component-progress-circle-color-inverse);\n}\n\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n   --value) reads as loading rather than rendering a static, potentially-empty ring. */\n@keyframes pantoken-progress-circle-indeterminate {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n/* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n.pfx-progress-circle:indeterminate {\n  --value: 25;\n  --min: 0;\n  --max: 100;\n}\n\n.pfx-progress-circle:indeterminate::before {\n  animation: pantoken-progress-circle-indeterminate 1s linear infinite;\n}\n\n.pfx-progress-circle:indeterminate .value {\n  visibility: hidden;\n}\n"
+	"rebrand": "/**\n * @component progress-circle\n * @summary A circular progress ring driven by `--value` and `--value-max` custom properties.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; `--value` divided by `--value-max` drives the arc. Add `-should-animate` and load the interactions entry point to animate it from zero on mount. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), spinning the ring at a fixed arc and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate the meter, ring, and centered value into place on mount.\n * @modifier -should-animate-on-mount — @alias {@link -should-animate}\n * @modifier -shold-animate-on-mount — @alias {@link -should-animate}\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; spins `::before` at a fixed arc and hides `.value`.\n * @cssproperty --value <number> — The current progress value; registered with @property so it can transition.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @cssproperty --animation-delay <number> — Milliseconds to wait before starting the mount animation (default `0`).\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Registers the numeric progress properties with `@property` and paints with CSS `mask` and `conic-gradient`; where custom-property transitions are unsupported the ring still renders but won't animate.\n * @example\n * ### Nested label\n * ```html\n * <label>\n *   Uploading Document: <progress class=\"pfx-progress-circle -size-sm\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"score\">Score</label>\n * <meter id=\"score\" class=\"pfx-progress-circle -color-success\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n *   label {\n *     .pfx-progress-circle {\n *       .value {}\n *     }\n *   }\n * }\n * @variant external-label {\n *   label {}\n *   .pfx-progress-circle {\n *     .value {}\n *   }\n * }\n * @related progress — The linear bar form of the same determinate progress.\n * @stable\n * @sealed\n */\n@property --animation-delay {\n  syntax: \"<number>\";\n  inherits: true;\n  initial-value: 0;\n}\n\n.pfx-progress-circle {\n  --value: var(--value-now);\n  --min: 0;\n  --max: var(--value-max);\n  --animation-delay: 0;\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  color: var(--instui-component-progress-circle-color);\n  font-family: var(--instui-component-progress-circle-font-family);\n  font-weight: var(--instui-component-progress-circle-font-weight);\n  line-height: var(--instui-component-progress-circle-line-height);\n  transition: --value 1s;\n}\n\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: conic-gradient(\n    var(--pantoken-pc-fill)\n      clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%),\n    var(--pantoken-pc-track) 0\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    #0000 calc(100% - var(--pantoken-pc-stroke)),\n    #000 0\n  );\n  mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n\n  transition:\n    opacity 0.5s 0.2s,\n    transform 0.5s;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n\n.pfx-progress-circle .value {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.pfx-progress-circle.-size-xs {\n  width: var(--instui-component-progress-circle-x-small-size);\n  height: var(--instui-component-progress-circle-x-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-sm {\n  width: var(--instui-component-progress-circle-small-size);\n  height: var(--instui-component-progress-circle-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-md {\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n}\n\n.pfx-progress-circle.-size-lg {\n  width: var(--instui-component-progress-circle-large-size);\n  height: var(--instui-component-progress-circle-large-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n\n.pfx-progress-circle.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n\n.pfx-progress-circle.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n\n.pfx-progress-circle.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n\n.pfx-progress-circle.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n\n.pfx-progress-circle.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n\n.pfx-progress-circle.-color-primary-inverse {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n  color: var(--instui-component-progress-circle-color-inverse);\n}\n\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n   --value) reads as loading rather than rendering a static, potentially-empty ring. */\n@keyframes pantoken-progress-circle-indeterminate {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n/* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n.pfx-progress-circle:indeterminate {\n  --value: 25;\n  --min: 0;\n  --max: 100;\n}\n\n.pfx-progress-circle:indeterminate::before {\n  animation: pantoken-progress-circle-indeterminate 1s linear infinite;\n}\n\n.pfx-progress-circle:indeterminate .value {\n  visibility: hidden;\n}\n\n.pfx-progress-circle > .value {\n  transition:\n    opacity 0.5s 1s,\n    transform 0.5s 1s;\n  transform: translate3d(0, 0, 0);\n}\n\n.pfx-progress-circle.-should-animate {\n  --value: 0 !important;\n}\n\n.pfx-progress-circle.-should-animate::before {\n  opacity: 0;\n  transform: translate3d(0, 0, 0) scale(0.75);\n}\n\n.pfx-progress-circle.-should-animate > .value {\n  opacity: 0;\n  transform: translate3d(0, 10%, 0);\n}\n",
+	"canvas": "/**\n * @component progress-circle\n * @summary A circular progress ring driven by `--value` and `--value-max` custom properties.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; `--value` divided by `--value-max` drives the arc. Add `-should-animate` and load the interactions entry point to animate it from zero on mount. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), spinning the ring at a fixed arc and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate the meter, ring, and centered value into place on mount.\n * @modifier -should-animate-on-mount — @alias {@link -should-animate}\n * @modifier -shold-animate-on-mount — @alias {@link -should-animate}\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; spins `::before` at a fixed arc and hides `.value`.\n * @cssproperty --value <number> — The current progress value; registered with @property so it can transition.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @cssproperty --animation-delay <number> — Milliseconds to wait before starting the mount animation (default `0`).\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Registers the numeric progress properties with `@property` and paints with CSS `mask` and `conic-gradient`; where custom-property transitions are unsupported the ring still renders but won't animate.\n * @example\n * ### Nested label\n * ```html\n * <label>\n *   Uploading Document: <progress class=\"pfx-progress-circle -size-sm\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"score\">Score</label>\n * <meter id=\"score\" class=\"pfx-progress-circle -color-success\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n *   label {\n *     .pfx-progress-circle {\n *       .value {}\n *     }\n *   }\n * }\n * @variant external-label {\n *   label {}\n *   .pfx-progress-circle {\n *     .value {}\n *   }\n * }\n * @related progress — The linear bar form of the same determinate progress.\n * @stable\n * @sealed\n */\n@property --animation-delay {\n  syntax: \"<number>\";\n  inherits: true;\n  initial-value: 0;\n}\n\n.pfx-progress-circle {\n  --value: var(--value-now);\n  --min: 0;\n  --max: var(--value-max);\n  --animation-delay: 0;\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  color: var(--instui-component-progress-circle-color);\n  font-family: var(--instui-component-progress-circle-font-family);\n  font-weight: var(--instui-component-progress-circle-font-weight);\n  line-height: var(--instui-component-progress-circle-line-height);\n  transition: --value 1s;\n}\n\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: conic-gradient(\n    var(--pantoken-pc-fill)\n      clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%),\n    var(--pantoken-pc-track) 0\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    #0000 calc(100% - var(--pantoken-pc-stroke)),\n    #000 0\n  );\n  mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n\n  transition:\n    opacity 0.5s 0.2s,\n    transform 0.5s;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n\n.pfx-progress-circle .value {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.pfx-progress-circle.-size-xs {\n  width: var(--instui-component-progress-circle-x-small-size);\n  height: var(--instui-component-progress-circle-x-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-sm {\n  width: var(--instui-component-progress-circle-small-size);\n  height: var(--instui-component-progress-circle-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-md {\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n}\n\n.pfx-progress-circle.-size-lg {\n  width: var(--instui-component-progress-circle-large-size);\n  height: var(--instui-component-progress-circle-large-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n\n.pfx-progress-circle.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n\n.pfx-progress-circle.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n\n.pfx-progress-circle.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n\n.pfx-progress-circle.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n\n.pfx-progress-circle.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n\n.pfx-progress-circle.-color-primary-inverse {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n  color: var(--instui-component-progress-circle-color-inverse);\n}\n\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n   --value) reads as loading rather than rendering a static, potentially-empty ring. */\n@keyframes pantoken-progress-circle-indeterminate {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n/* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n.pfx-progress-circle:indeterminate {\n  --value: 25;\n  --min: 0;\n  --max: 100;\n}\n\n.pfx-progress-circle:indeterminate::before {\n  animation: pantoken-progress-circle-indeterminate 1s linear infinite;\n}\n\n.pfx-progress-circle:indeterminate .value {\n  visibility: hidden;\n}\n\n.pfx-progress-circle > .value {\n  transition:\n    opacity 0.5s 1s,\n    transform 0.5s 1s;\n  transform: translate3d(0, 0, 0);\n}\n\n.pfx-progress-circle.-should-animate {\n  --value: 0 !important;\n}\n\n.pfx-progress-circle.-should-animate::before {\n  opacity: 0;\n  transform: translate3d(0, 0, 0) scale(0.75);\n}\n\n.pfx-progress-circle.-should-animate > .value {\n  opacity: 0;\n  transform: translate3d(0, 10%, 0);\n}\n",
+	"canvasHighContrast": "/**\n * @component progress-circle\n * @summary A circular progress ring driven by `--value` and `--value-max` custom properties.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; `--value` divided by `--value-max` drives the arc. Add `-should-animate` and load the interactions entry point to animate it from zero on mount. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), spinning the ring at a fixed arc and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate the meter, ring, and centered value into place on mount.\n * @modifier -should-animate-on-mount — @alias {@link -should-animate}\n * @modifier -shold-animate-on-mount — @alias {@link -should-animate}\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; spins `::before` at a fixed arc and hides `.value`.\n * @cssproperty --value <number> — The current progress value; registered with @property so it can transition.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @cssproperty --animation-delay <number> — Milliseconds to wait before starting the mount animation (default `0`).\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Registers the numeric progress properties with `@property` and paints with CSS `mask` and `conic-gradient`; where custom-property transitions are unsupported the ring still renders but won't animate.\n * @example\n * ### Nested label\n * ```html\n * <label>\n *   Uploading Document: <progress class=\"pfx-progress-circle -size-sm\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"score\">Score</label>\n * <meter id=\"score\" class=\"pfx-progress-circle -color-success\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n *   label {\n *     .pfx-progress-circle {\n *       .value {}\n *     }\n *   }\n * }\n * @variant external-label {\n *   label {}\n *   .pfx-progress-circle {\n *     .value {}\n *   }\n * }\n * @related progress — The linear bar form of the same determinate progress.\n * @stable\n * @sealed\n */\n@property --animation-delay {\n  syntax: \"<number>\";\n  inherits: true;\n  initial-value: 0;\n}\n\n.pfx-progress-circle {\n  --value: var(--value-now);\n  --min: 0;\n  --max: var(--value-max);\n  --animation-delay: 0;\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  color: var(--instui-component-progress-circle-color);\n  font-family: var(--instui-component-progress-circle-font-family);\n  font-weight: var(--instui-component-progress-circle-font-weight);\n  line-height: var(--instui-component-progress-circle-line-height);\n  transition: --value 1s;\n}\n\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: conic-gradient(\n    var(--pantoken-pc-fill)\n      clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%),\n    var(--pantoken-pc-track) 0\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    #0000 calc(100% - var(--pantoken-pc-stroke)),\n    #000 0\n  );\n  mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n\n  transition:\n    opacity 0.5s 0.2s,\n    transform 0.5s;\n  transform: translate3d(0, 0, 0) scale(1);\n}\n\n.pfx-progress-circle .value {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.pfx-progress-circle.-size-xs {\n  width: var(--instui-component-progress-circle-x-small-size);\n  height: var(--instui-component-progress-circle-x-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-sm {\n  width: var(--instui-component-progress-circle-small-size);\n  height: var(--instui-component-progress-circle-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n\n.pfx-progress-circle.-size-md {\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n}\n\n.pfx-progress-circle.-size-lg {\n  width: var(--instui-component-progress-circle-large-size);\n  height: var(--instui-component-progress-circle-large-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n\n.pfx-progress-circle.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n\n.pfx-progress-circle.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n\n.pfx-progress-circle.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n\n.pfx-progress-circle.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n\n.pfx-progress-circle.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n\n.pfx-progress-circle.-color-primary-inverse {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n  color: var(--instui-component-progress-circle-color-inverse);\n}\n\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n   --value) reads as loading rather than rendering a static, potentially-empty ring. */\n@keyframes pantoken-progress-circle-indeterminate {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n/* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n.pfx-progress-circle:indeterminate {\n  --value: 25;\n  --min: 0;\n  --max: 100;\n}\n\n.pfx-progress-circle:indeterminate::before {\n  animation: pantoken-progress-circle-indeterminate 1s linear infinite;\n}\n\n.pfx-progress-circle:indeterminate .value {\n  visibility: hidden;\n}\n\n.pfx-progress-circle > .value {\n  transition:\n    opacity 0.5s 1s,\n    transform 0.5s 1s;\n  transform: translate3d(0, 0, 0);\n}\n\n.pfx-progress-circle.-should-animate {\n  --value: 0 !important;\n}\n\n.pfx-progress-circle.-should-animate::before {\n  opacity: 0;\n  transform: translate3d(0, 0, 0) scale(0.75);\n}\n\n.pfx-progress-circle.-should-animate > .value {\n  opacity: 0;\n  transform: translate3d(0, 10%, 0);\n}\n"
 }.rebrand;
-const progress$1 = {
-	"rebrand": "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks `.value` is a sibling of `.bar`, both children of the root — mirroring how progress-circle nests its own `.value` part. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), animating `.bar` as a sliding segment and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate meter changes over half a second.\n * @modifier -render-value-inside — Renders `.value` inside the track, aligned to its start, instead of beside it; style it for legibility over the meter colour.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @part .value — The value text beside the bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; animates `.bar` as a sliding segment and hides `.value`.\n * @cssproperty --value <number> — The current progress value.\n * @cssproperty --value-now <number> — @deprecated Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @deprecated {@link --max} The maximum progress value (default `100`).\n * @accessibility Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * ### Nested label\n * ```html\n * <label>\n *   Uploading Document: <progress class=\"pfx-progress -color-brand\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"storage-used\">Storage used</label>\n * <meter id=\"storage-used\" class=\"pfx-progress -color-warning\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n *   label {\n *     .pfx-progress {\n *       .bar {}\n *       .value {}\n *     }\n *   }\n * }\n * @variant external-label {\n *   label {}\n *   .pfx-progress {\n *     .bar {}\n *     .value {}\n *   }\n * }\n * @related progress-circle — The circular form of the same determinate progress.\n * @stable\n * @sealed\n */\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n   --value) reads as loading rather than rendering a broken 0%-width bar. */\n@keyframes pantoken-progress-indeterminate {\n  0% {\n    left: -40%;\n  }\n\n  100% {\n    left: 100%;\n  }\n}\n\n.pfx-progress {\n  --value: var(--value-now);\n  --min: 0;\n  --max: var(--value-max);\n  position: relative;\n  display: block;\n  width: 100%;\n  height: var(--instui-component-progress-bar-medium-height);\n  background: var(--instui-component-progress-bar-track-color);\n  /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n  border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n    var(--instui-component-progress-bar-border-color);\n  border-radius: var(--instui-component-progress-bar-border-radius);\n  overflow: hidden;\n}\n\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n   border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n   the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n  content: \"\";\n  position: absolute;\n  inset-inline: 0;\n  bottom: 0;\n  height: var(--instui-component-progress-bar-track-bottom-border-width);\n  background: var(--instui-component-progress-bar-track-bottom-border-color);\n  pointer-events: none;\n}\n\n.pfx-progress.-size-xs {\n  height: var(--instui-component-progress-bar-x-small-height);\n}\n\n.pfx-progress.-size-sm {\n  height: var(--instui-component-progress-bar-small-height);\n}\n\n.pfx-progress.-size-md {\n  height: var(--instui-component-progress-bar-medium-height);\n}\n\n.pfx-progress.-size-lg {\n  height: var(--instui-component-progress-bar-large-height);\n}\n\n@scope (.pfx-progress) {\n  :scope > .bar {\n    height: 100%;\n    width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);\n    background: var(--instui-color-background-brand);\n    border-radius: var(--instui-component-progress-bar-border-radius);\n  }\n\n  :scope > .value {\n    padding: 0 var(--instui-component-progress-bar-value-padding);\n    color: var(--instui-component-progress-bar-text-color);\n    font-family: var(--instui-component-progress-bar-font-family);\n    font-size: var(--instui-component-progress-bar-medium-value-font-size);\n    font-weight: var(--instui-component-progress-bar-font-weight);\n    line-height: var(--instui-component-progress-bar-line-height);\n  }\n\n  :scope.-color-inverse > .value,\n  :scope > .value.-color-inverse {\n    color: var(--instui-component-progress-bar-text-color-inverse);\n  }\n\n  /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n  :scope:indeterminate > .bar {\n    position: absolute;\n    width: 40%;\n    animation: pantoken-progress-indeterminate 1.4s ease-in-out infinite;\n  }\n\n  :scope:indeterminate > .value {\n    visibility: hidden;\n  }\n}\n\n.pfx-progress.-color-brand .bar {\n  background: var(--instui-color-background-brand);\n}\n\n.pfx-progress.-color-info .bar {\n  background: var(--instui-color-background-info);\n}\n\n.pfx-progress.-color-success .bar {\n  background: var(--instui-color-background-success);\n}\n\n.pfx-progress.-color-warning .bar {\n  background: var(--instui-color-background-warning);\n}\n\n.pfx-progress.-color-danger .bar {\n  background: var(--instui-color-background-error);\n}\n\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n   InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n   wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n  background: var(--instui-component-progress-bar-track-color-inverse);\n  border-color: var(--instui-component-progress-bar-border-color-inverse);\n  color: var(--instui-component-progress-bar-text-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse::after {\n  background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse .bar {\n  background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n\n.pfx-progress.-render-value-inside .value {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n",
-	"canvas": "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks `.value` is a sibling of `.bar`, both children of the root — mirroring how progress-circle nests its own `.value` part. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), animating `.bar` as a sliding segment and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate meter changes over half a second.\n * @modifier -render-value-inside — Renders `.value` inside the track, aligned to its start, instead of beside it; style it for legibility over the meter colour.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @part .value — The value text beside the bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; animates `.bar` as a sliding segment and hides `.value`.\n * @cssproperty --value <number> — The current progress value.\n * @cssproperty --value-now <number> — @deprecated Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @deprecated {@link --max} The maximum progress value (default `100`).\n * @accessibility Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * ### Nested label\n * ```html\n * <label>\n *   Uploading Document: <progress class=\"pfx-progress -color-brand\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"storage-used\">Storage used</label>\n * <meter id=\"storage-used\" class=\"pfx-progress -color-warning\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n *   label {\n *     .pfx-progress {\n *       .bar {}\n *       .value {}\n *     }\n *   }\n * }\n * @variant external-label {\n *   label {}\n *   .pfx-progress {\n *     .bar {}\n *     .value {}\n *   }\n * }\n * @related progress-circle — The circular form of the same determinate progress.\n * @stable\n * @sealed\n */\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n   --value) reads as loading rather than rendering a broken 0%-width bar. */\n@keyframes pantoken-progress-indeterminate {\n  0% {\n    left: -40%;\n  }\n\n  100% {\n    left: 100%;\n  }\n}\n\n.pfx-progress {\n  --value: var(--value-now);\n  --min: 0;\n  --max: var(--value-max);\n  position: relative;\n  display: block;\n  width: 100%;\n  height: var(--instui-component-progress-bar-medium-height);\n  background: var(--instui-component-progress-bar-track-color);\n  /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n  border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n    var(--instui-component-progress-bar-border-color);\n  border-radius: var(--instui-component-progress-bar-border-radius);\n  overflow: hidden;\n}\n\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n   border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n   the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n  content: \"\";\n  position: absolute;\n  inset-inline: 0;\n  bottom: 0;\n  height: var(--instui-component-progress-bar-track-bottom-border-width);\n  background: var(--instui-component-progress-bar-track-bottom-border-color);\n  pointer-events: none;\n}\n\n.pfx-progress.-size-xs {\n  height: var(--instui-component-progress-bar-x-small-height);\n}\n\n.pfx-progress.-size-sm {\n  height: var(--instui-component-progress-bar-small-height);\n}\n\n.pfx-progress.-size-md {\n  height: var(--instui-component-progress-bar-medium-height);\n}\n\n.pfx-progress.-size-lg {\n  height: var(--instui-component-progress-bar-large-height);\n}\n\n@scope (.pfx-progress) {\n  :scope > .bar {\n    height: 100%;\n    width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);\n    background: var(--instui-color-background-brand);\n    border-radius: var(--instui-component-progress-bar-border-radius);\n  }\n\n  :scope > .value {\n    padding: 0 var(--instui-component-progress-bar-value-padding);\n    color: var(--instui-component-progress-bar-text-color);\n    font-family: var(--instui-component-progress-bar-font-family);\n    font-size: var(--instui-component-progress-bar-medium-value-font-size);\n    font-weight: var(--instui-component-progress-bar-font-weight);\n    line-height: var(--instui-component-progress-bar-line-height);\n  }\n\n  :scope.-color-inverse > .value,\n  :scope > .value.-color-inverse {\n    color: var(--instui-component-progress-bar-text-color-inverse);\n  }\n\n  /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n  :scope:indeterminate > .bar {\n    position: absolute;\n    width: 40%;\n    animation: pantoken-progress-indeterminate 1.4s ease-in-out infinite;\n  }\n\n  :scope:indeterminate > .value {\n    visibility: hidden;\n  }\n}\n\n.pfx-progress.-color-brand .bar {\n  background: var(--instui-color-background-brand);\n}\n\n.pfx-progress.-color-info .bar {\n  background: var(--instui-color-background-info);\n}\n\n.pfx-progress.-color-success .bar {\n  background: var(--instui-color-background-success);\n}\n\n.pfx-progress.-color-warning .bar {\n  background: var(--instui-color-background-warning);\n}\n\n.pfx-progress.-color-danger .bar {\n  background: var(--instui-color-background-error);\n}\n\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n   InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n   wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n  background: var(--instui-component-progress-bar-track-color-inverse);\n  border-color: var(--instui-component-progress-bar-border-color-inverse);\n  color: var(--instui-component-progress-bar-text-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse::after {\n  background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse .bar {\n  background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n\n.pfx-progress.-render-value-inside .value {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n",
-	"canvasHighContrast": "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks `.value` is a sibling of `.bar`, both children of the root — mirroring how progress-circle nests its own `.value` part. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), animating `.bar` as a sliding segment and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate meter changes over half a second.\n * @modifier -render-value-inside — Renders `.value` inside the track, aligned to its start, instead of beside it; style it for legibility over the meter colour.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @part .value — The value text beside the bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; animates `.bar` as a sliding segment and hides `.value`.\n * @cssproperty --value <number> — The current progress value.\n * @cssproperty --value-now <number> — @deprecated Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @deprecated {@link --max} The maximum progress value (default `100`).\n * @accessibility Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * ### Nested label\n * ```html\n * <label>\n *   Uploading Document: <progress class=\"pfx-progress -color-brand\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"storage-used\">Storage used</label>\n * <meter id=\"storage-used\" class=\"pfx-progress -color-warning\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n *   label {\n *     .pfx-progress {\n *       .bar {}\n *       .value {}\n *     }\n *   }\n * }\n * @variant external-label {\n *   label {}\n *   .pfx-progress {\n *     .bar {}\n *     .value {}\n *   }\n * }\n * @related progress-circle — The circular form of the same determinate progress.\n * @stable\n * @sealed\n */\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n   --value) reads as loading rather than rendering a broken 0%-width bar. */\n@keyframes pantoken-progress-indeterminate {\n  0% {\n    left: -40%;\n  }\n\n  100% {\n    left: 100%;\n  }\n}\n\n.pfx-progress {\n  --value: var(--value-now);\n  --min: 0;\n  --max: var(--value-max);\n  position: relative;\n  display: block;\n  width: 100%;\n  height: var(--instui-component-progress-bar-medium-height);\n  background: var(--instui-component-progress-bar-track-color);\n  /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n  border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n    var(--instui-component-progress-bar-border-color);\n  border-radius: var(--instui-component-progress-bar-border-radius);\n  overflow: hidden;\n}\n\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n   border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n   the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n  content: \"\";\n  position: absolute;\n  inset-inline: 0;\n  bottom: 0;\n  height: var(--instui-component-progress-bar-track-bottom-border-width);\n  background: var(--instui-component-progress-bar-track-bottom-border-color);\n  pointer-events: none;\n}\n\n.pfx-progress.-size-xs {\n  height: var(--instui-component-progress-bar-x-small-height);\n}\n\n.pfx-progress.-size-sm {\n  height: var(--instui-component-progress-bar-small-height);\n}\n\n.pfx-progress.-size-md {\n  height: var(--instui-component-progress-bar-medium-height);\n}\n\n.pfx-progress.-size-lg {\n  height: var(--instui-component-progress-bar-large-height);\n}\n\n@scope (.pfx-progress) {\n  :scope > .bar {\n    height: 100%;\n    width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);\n    background: var(--instui-color-background-brand);\n    border-radius: var(--instui-component-progress-bar-border-radius);\n  }\n\n  :scope > .value {\n    padding: 0 var(--instui-component-progress-bar-value-padding);\n    color: var(--instui-component-progress-bar-text-color);\n    font-family: var(--instui-component-progress-bar-font-family);\n    font-size: var(--instui-component-progress-bar-medium-value-font-size);\n    font-weight: var(--instui-component-progress-bar-font-weight);\n    line-height: var(--instui-component-progress-bar-line-height);\n  }\n\n  :scope.-color-inverse > .value,\n  :scope > .value.-color-inverse {\n    color: var(--instui-component-progress-bar-text-color-inverse);\n  }\n\n  /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n  :scope:indeterminate > .bar {\n    position: absolute;\n    width: 40%;\n    animation: pantoken-progress-indeterminate 1.4s ease-in-out infinite;\n  }\n\n  :scope:indeterminate > .value {\n    visibility: hidden;\n  }\n}\n\n.pfx-progress.-color-brand .bar {\n  background: var(--instui-color-background-brand);\n}\n\n.pfx-progress.-color-info .bar {\n  background: var(--instui-color-background-info);\n}\n\n.pfx-progress.-color-success .bar {\n  background: var(--instui-color-background-success);\n}\n\n.pfx-progress.-color-warning .bar {\n  background: var(--instui-color-background-warning);\n}\n\n.pfx-progress.-color-danger .bar {\n  background: var(--instui-color-background-error);\n}\n\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n   InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n   wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n  background: var(--instui-component-progress-bar-track-color-inverse);\n  border-color: var(--instui-component-progress-bar-border-color-inverse);\n  color: var(--instui-component-progress-bar-text-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse::after {\n  background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n\n.pfx-progress.-color-primary-inverse .bar {\n  background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n\n.pfx-progress.-render-value-inside .value {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n"
+const radio$1 = {
+	"rebrand": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @remarks Sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @alias {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-radio-input-gap);\n  color: var(--instui-component-radio-input-label-base-color);\n  font-family: var(--instui-component-radio-input-font-family);\n  font-size: var(--instui-component-radio-input-font-size-md);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  line-height: var(--instui-component-radio-input-line-height-md);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-radio-input-control-size-md);\n  height: var(--instui-component-radio-input-control-size-md);\n  margin-block: var(--instui-component-radio-input-control-vertical-margin);\n  border: var(--instui-component-radio-input-border-width) solid\n    var(--instui-component-radio-input-border-color);\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-background-color);\n  cursor: pointer;\n  transition:\n    border-color 0.15s ease,\n    background-color 0.15s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n  content: \"\";\n  width: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-border-selected-color);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n  border-color: var(--instui-component-radio-input-border-hover-color);\n  background: var(--instui-component-radio-input-background-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n  border-color: var(--instui-component-radio-input-border-selected-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n  transform: scale(1);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n  border-color: var(--instui-component-radio-input-border-disabled-color);\n  background: var(--instui-component-radio-input-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n  color: var(--instui-component-radio-input-label-disabled-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n  color: var(--instui-component-radio-input-label-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n  font-size: var(--instui-component-radio-input-font-size-lg);\n  line-height: var(--instui-component-radio-input-line-height-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-lg);\n  height: var(--instui-component-radio-input-control-size-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n  color: var(--instui-component-radio-input-label-readonly-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n  border-color: var(--instui-component-radio-input-border-readonly-color);\n  background: var(--instui-component-radio-input-background-readonly-color);\n}\n\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n   uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n   NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n   rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n   one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n  position: relative;\n  justify-content: center;\n  gap: 0;\n  height: var(--instui-component-radio-input-toggle-medium-height);\n  padding-inline: 0.875rem;\n  border-radius: var(--instui-component-radio-input-toggle-border-radius);\n  background: transparent;\n  color: var(--instui-component-radio-input-label-base-color);\n  font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-radio.-variant-toggle.-context-off {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n\n.pfx-radio.-variant-toggle.-context-success {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-radio.-variant-toggle.-context-danger {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n\n.pfx-radio.-variant-toggle.-context-warning {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n  background: var(--pantoken-rt-fill);\n  color: var(--instui-component-radio-input-toggle-handle-text);\n  box-shadow: var(--instui-elevation-depth1);\n}\n\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n  text-decoration: underline;\n}\n\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n  content: \"\";\n  position: absolute;\n  inset: -0.25rem;\n  border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n  pointer-events: none;\n}\n\n.pfx-radio.-variant-toggle:has(input:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.pfx-radio.-variant-toggle.-size-sm {\n  height: var(--instui-component-radio-input-toggle-small-height);\n  font-size: var(--instui-component-radio-input-toggle-small-font-size);\n  padding-inline: 0.5rem;\n}\n\n.pfx-radio.-variant-toggle.-size-lg {\n  height: var(--instui-component-radio-input-toggle-large-height);\n  font-size: var(--instui-component-radio-input-toggle-large-font-size);\n  padding-inline: 1rem;\n}\n",
+	"canvas": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @remarks Sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @alias {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-radio-input-gap);\n  color: var(--instui-component-radio-input-label-base-color);\n  font-family: var(--instui-component-radio-input-font-family);\n  font-size: var(--instui-component-radio-input-font-size-md);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  line-height: var(--instui-component-radio-input-line-height-md);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-radio-input-control-size-md);\n  height: var(--instui-component-radio-input-control-size-md);\n  margin-block: var(--instui-component-radio-input-control-vertical-margin);\n  border: var(--instui-component-radio-input-border-width) solid\n    var(--instui-component-radio-input-border-color);\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-background-color);\n  cursor: pointer;\n  transition:\n    border-color 0.15s ease,\n    background-color 0.15s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n  content: \"\";\n  width: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-border-selected-color);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n  border-color: var(--instui-component-radio-input-border-hover-color);\n  background: var(--instui-component-radio-input-background-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n  border-color: var(--instui-component-radio-input-border-selected-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n  transform: scale(1);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n  border-color: var(--instui-component-radio-input-border-disabled-color);\n  background: var(--instui-component-radio-input-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n  color: var(--instui-component-radio-input-label-disabled-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n  color: var(--instui-component-radio-input-label-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n  font-size: var(--instui-component-radio-input-font-size-lg);\n  line-height: var(--instui-component-radio-input-line-height-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-lg);\n  height: var(--instui-component-radio-input-control-size-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n  color: var(--instui-component-radio-input-label-readonly-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n  border-color: var(--instui-component-radio-input-border-readonly-color);\n  background: var(--instui-component-radio-input-background-readonly-color);\n}\n\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n   uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n   NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n   rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n   one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n  position: relative;\n  justify-content: center;\n  gap: 0;\n  height: var(--instui-component-radio-input-toggle-medium-height);\n  padding-inline: 0.875rem;\n  border-radius: var(--instui-component-radio-input-toggle-border-radius);\n  background: transparent;\n  color: var(--instui-component-radio-input-label-base-color);\n  font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-radio.-variant-toggle.-context-off {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n\n.pfx-radio.-variant-toggle.-context-success {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-radio.-variant-toggle.-context-danger {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n\n.pfx-radio.-variant-toggle.-context-warning {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n  background: var(--pantoken-rt-fill);\n  color: var(--instui-component-radio-input-toggle-handle-text);\n  box-shadow: var(--instui-elevation-depth1);\n}\n\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n  text-decoration: underline;\n}\n\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n  content: \"\";\n  position: absolute;\n  inset: -0.25rem;\n  border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n  pointer-events: none;\n}\n\n.pfx-radio.-variant-toggle:has(input:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.pfx-radio.-variant-toggle.-size-sm {\n  height: var(--instui-component-radio-input-toggle-small-height);\n  font-size: var(--instui-component-radio-input-toggle-small-font-size);\n  padding-inline: 0.5rem;\n}\n\n.pfx-radio.-variant-toggle.-size-lg {\n  height: var(--instui-component-radio-input-toggle-large-height);\n  font-size: var(--instui-component-radio-input-toggle-large-font-size);\n  padding-inline: 1rem;\n}\n",
+	"canvasHighContrast": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @remarks Sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @alias {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-radio-input-gap);\n  color: var(--instui-component-radio-input-label-base-color);\n  font-family: var(--instui-component-radio-input-font-family);\n  font-size: var(--instui-component-radio-input-font-size-md);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  line-height: var(--instui-component-radio-input-line-height-md);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-radio-input-control-size-md);\n  height: var(--instui-component-radio-input-control-size-md);\n  margin-block: var(--instui-component-radio-input-control-vertical-margin);\n  border: var(--instui-component-radio-input-border-width) solid\n    var(--instui-component-radio-input-border-color);\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-background-color);\n  cursor: pointer;\n  transition:\n    border-color 0.15s ease,\n    background-color 0.15s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n  content: \"\";\n  width: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-border-selected-color);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n  border-color: var(--instui-component-radio-input-border-hover-color);\n  background: var(--instui-component-radio-input-background-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n  border-color: var(--instui-component-radio-input-border-selected-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n  transform: scale(1);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n  border-color: var(--instui-component-radio-input-border-disabled-color);\n  background: var(--instui-component-radio-input-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n  color: var(--instui-component-radio-input-label-disabled-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n  color: var(--instui-component-radio-input-label-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n  font-size: var(--instui-component-radio-input-font-size-lg);\n  line-height: var(--instui-component-radio-input-line-height-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-lg);\n  height: var(--instui-component-radio-input-control-size-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n  color: var(--instui-component-radio-input-label-readonly-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n  border-color: var(--instui-component-radio-input-border-readonly-color);\n  background: var(--instui-component-radio-input-background-readonly-color);\n}\n\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n   uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n   NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n   rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n   one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n  position: relative;\n  justify-content: center;\n  gap: 0;\n  height: var(--instui-component-radio-input-toggle-medium-height);\n  padding-inline: 0.875rem;\n  border-radius: var(--instui-component-radio-input-toggle-border-radius);\n  background: transparent;\n  color: var(--instui-component-radio-input-label-base-color);\n  font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-radio.-variant-toggle.-context-off {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n\n.pfx-radio.-variant-toggle.-context-success {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-radio.-variant-toggle.-context-danger {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n\n.pfx-radio.-variant-toggle.-context-warning {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n  background: var(--pantoken-rt-fill);\n  color: var(--instui-component-radio-input-toggle-handle-text);\n  box-shadow: var(--instui-elevation-depth1);\n}\n\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n  text-decoration: underline;\n}\n\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n  content: \"\";\n  position: absolute;\n  inset: -0.25rem;\n  border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n  pointer-events: none;\n}\n\n.pfx-radio.-variant-toggle:has(input:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.pfx-radio.-variant-toggle.-size-sm {\n  height: var(--instui-component-radio-input-toggle-small-height);\n  font-size: var(--instui-component-radio-input-toggle-small-font-size);\n  padding-inline: 0.5rem;\n}\n\n.pfx-radio.-variant-toggle.-size-lg {\n  height: var(--instui-component-radio-input-toggle-large-height);\n  font-size: var(--instui-component-radio-input-toggle-large-font-size);\n  padding-inline: 1rem;\n}\n"
 }.rebrand;
 const radioInputGroup$1 = {
 	"rebrand": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @remarks Sets its own `gap` between radios; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n  * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n *   legend {}\n *   .pfx-radio.-variant-toggle {\n *     input {}\n *   }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.pfx-radio-input-group > legend {\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-radio-input-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n  flex-flow: row wrap;\n  align-items: center;\n  column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n  flex-basis: 100%;\n}\n\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n   no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n   own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n   isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n  flex-flow: row wrap;\n  align-items: center;\n  gap: 0;\n}\n\n.pfx-radio-input-group.-variant-toggle > legend {\n  flex-basis: 100%;\n}\n\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n  z-index: 1;\n}\n",
 	"canvas": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @remarks Sets its own `gap` between radios; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n  * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n *   legend {}\n *   .pfx-radio.-variant-toggle {\n *     input {}\n *   }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.pfx-radio-input-group > legend {\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-radio-input-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n  flex-flow: row wrap;\n  align-items: center;\n  column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n  flex-basis: 100%;\n}\n\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n   no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n   own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n   isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n  flex-flow: row wrap;\n  align-items: center;\n  gap: 0;\n}\n\n.pfx-radio-input-group.-variant-toggle > legend {\n  flex-basis: 100%;\n}\n\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n  z-index: 1;\n}\n",
 	"canvasHighContrast": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @remarks Sets its own `gap` between radios; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n  * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n *   legend {}\n *   .pfx-radio.-variant-toggle {\n *     input {}\n *   }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.pfx-radio-input-group > legend {\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-radio-input-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n  flex-flow: row wrap;\n  align-items: center;\n  column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n  flex-basis: 100%;\n}\n\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n   no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n   own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n   isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n  flex-flow: row wrap;\n  align-items: center;\n  gap: 0;\n}\n\n.pfx-radio-input-group.-variant-toggle > legend {\n  flex-basis: 100%;\n}\n\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n  z-index: 1;\n}\n"
 }.rebrand;
-const radio$1 = {
-	"rebrand": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @remarks Sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-radio-input-gap);\n  color: var(--instui-component-radio-input-label-base-color);\n  font-family: var(--instui-component-radio-input-font-family);\n  font-size: var(--instui-component-radio-input-font-size-md);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  line-height: var(--instui-component-radio-input-line-height-md);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-radio-input-control-size-md);\n  height: var(--instui-component-radio-input-control-size-md);\n  margin-block: var(--instui-component-radio-input-control-vertical-margin);\n  border: var(--instui-component-radio-input-border-width) solid\n    var(--instui-component-radio-input-border-color);\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-background-color);\n  cursor: pointer;\n  transition:\n    border-color 0.15s ease,\n    background-color 0.15s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n  content: \"\";\n  width: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-border-selected-color);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n  border-color: var(--instui-component-radio-input-border-hover-color);\n  background: var(--instui-component-radio-input-background-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n  border-color: var(--instui-component-radio-input-border-selected-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n  transform: scale(1);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n  border-color: var(--instui-component-radio-input-border-disabled-color);\n  background: var(--instui-component-radio-input-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n  color: var(--instui-component-radio-input-label-disabled-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n  color: var(--instui-component-radio-input-label-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n  font-size: var(--instui-component-radio-input-font-size-lg);\n  line-height: var(--instui-component-radio-input-line-height-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-lg);\n  height: var(--instui-component-radio-input-control-size-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n  color: var(--instui-component-radio-input-label-readonly-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n  border-color: var(--instui-component-radio-input-border-readonly-color);\n  background: var(--instui-component-radio-input-background-readonly-color);\n}\n\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n   uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n   NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n   rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n   one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n  position: relative;\n  justify-content: center;\n  gap: 0;\n  height: var(--instui-component-radio-input-toggle-medium-height);\n  padding-inline: 0.875rem;\n  border-radius: var(--instui-component-radio-input-toggle-border-radius);\n  background: transparent;\n  color: var(--instui-component-radio-input-label-base-color);\n  font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-radio.-variant-toggle.-context-off {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n\n.pfx-radio.-variant-toggle.-context-success {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-radio.-variant-toggle.-context-danger {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n\n.pfx-radio.-variant-toggle.-context-warning {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n  background: var(--pantoken-rt-fill);\n  color: var(--instui-component-radio-input-toggle-handle-text);\n  box-shadow: var(--instui-elevation-depth1);\n}\n\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n  text-decoration: underline;\n}\n\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n  content: \"\";\n  position: absolute;\n  inset: -0.25rem;\n  border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n  pointer-events: none;\n}\n\n.pfx-radio.-variant-toggle:has(input:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.pfx-radio.-variant-toggle.-size-sm {\n  height: var(--instui-component-radio-input-toggle-small-height);\n  font-size: var(--instui-component-radio-input-toggle-small-font-size);\n  padding-inline: 0.5rem;\n}\n\n.pfx-radio.-variant-toggle.-size-lg {\n  height: var(--instui-component-radio-input-toggle-large-height);\n  font-size: var(--instui-component-radio-input-toggle-large-font-size);\n  padding-inline: 1rem;\n}\n",
-	"canvas": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @remarks Sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-radio-input-gap);\n  color: var(--instui-component-radio-input-label-base-color);\n  font-family: var(--instui-component-radio-input-font-family);\n  font-size: var(--instui-component-radio-input-font-size-md);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  line-height: var(--instui-component-radio-input-line-height-md);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-radio-input-control-size-md);\n  height: var(--instui-component-radio-input-control-size-md);\n  margin-block: var(--instui-component-radio-input-control-vertical-margin);\n  border: var(--instui-component-radio-input-border-width) solid\n    var(--instui-component-radio-input-border-color);\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-background-color);\n  cursor: pointer;\n  transition:\n    border-color 0.15s ease,\n    background-color 0.15s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n  content: \"\";\n  width: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-border-selected-color);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n  border-color: var(--instui-component-radio-input-border-hover-color);\n  background: var(--instui-component-radio-input-background-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n  border-color: var(--instui-component-radio-input-border-selected-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n  transform: scale(1);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n  border-color: var(--instui-component-radio-input-border-disabled-color);\n  background: var(--instui-component-radio-input-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n  color: var(--instui-component-radio-input-label-disabled-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n  color: var(--instui-component-radio-input-label-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n  font-size: var(--instui-component-radio-input-font-size-lg);\n  line-height: var(--instui-component-radio-input-line-height-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-lg);\n  height: var(--instui-component-radio-input-control-size-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n  color: var(--instui-component-radio-input-label-readonly-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n  border-color: var(--instui-component-radio-input-border-readonly-color);\n  background: var(--instui-component-radio-input-background-readonly-color);\n}\n\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n   uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n   NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n   rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n   one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n  position: relative;\n  justify-content: center;\n  gap: 0;\n  height: var(--instui-component-radio-input-toggle-medium-height);\n  padding-inline: 0.875rem;\n  border-radius: var(--instui-component-radio-input-toggle-border-radius);\n  background: transparent;\n  color: var(--instui-component-radio-input-label-base-color);\n  font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-radio.-variant-toggle.-context-off {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n\n.pfx-radio.-variant-toggle.-context-success {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-radio.-variant-toggle.-context-danger {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n\n.pfx-radio.-variant-toggle.-context-warning {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n  background: var(--pantoken-rt-fill);\n  color: var(--instui-component-radio-input-toggle-handle-text);\n  box-shadow: var(--instui-elevation-depth1);\n}\n\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n  text-decoration: underline;\n}\n\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n  content: \"\";\n  position: absolute;\n  inset: -0.25rem;\n  border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n  pointer-events: none;\n}\n\n.pfx-radio.-variant-toggle:has(input:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.pfx-radio.-variant-toggle.-size-sm {\n  height: var(--instui-component-radio-input-toggle-small-height);\n  font-size: var(--instui-component-radio-input-toggle-small-font-size);\n  padding-inline: 0.5rem;\n}\n\n.pfx-radio.-variant-toggle.-size-lg {\n  height: var(--instui-component-radio-input-toggle-large-height);\n  font-size: var(--instui-component-radio-input-toggle-large-font-size);\n  padding-inline: 1rem;\n}\n",
-	"canvasHighContrast": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @remarks Sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-radio-input-gap);\n  color: var(--instui-component-radio-input-label-base-color);\n  font-family: var(--instui-component-radio-input-font-family);\n  font-size: var(--instui-component-radio-input-font-size-md);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  line-height: var(--instui-component-radio-input-line-height-md);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-radio-input-control-size-md);\n  height: var(--instui-component-radio-input-control-size-md);\n  margin-block: var(--instui-component-radio-input-control-vertical-margin);\n  border: var(--instui-component-radio-input-border-width) solid\n    var(--instui-component-radio-input-border-color);\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-background-color);\n  cursor: pointer;\n  transition:\n    border-color 0.15s ease,\n    background-color 0.15s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n  content: \"\";\n  width: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-border-selected-color);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n  border-color: var(--instui-component-radio-input-border-hover-color);\n  background: var(--instui-component-radio-input-background-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n  border-color: var(--instui-component-radio-input-border-selected-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n  transform: scale(1);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n  border-color: var(--instui-component-radio-input-border-disabled-color);\n  background: var(--instui-component-radio-input-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n  color: var(--instui-component-radio-input-label-disabled-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n  color: var(--instui-component-radio-input-label-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n  font-size: var(--instui-component-radio-input-font-size-lg);\n  line-height: var(--instui-component-radio-input-line-height-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-lg);\n  height: var(--instui-component-radio-input-control-size-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n  color: var(--instui-component-radio-input-label-readonly-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n  border-color: var(--instui-component-radio-input-border-readonly-color);\n  background: var(--instui-component-radio-input-background-readonly-color);\n}\n\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n   uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n   NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n   rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n   one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n  position: relative;\n  justify-content: center;\n  gap: 0;\n  height: var(--instui-component-radio-input-toggle-medium-height);\n  padding-inline: 0.875rem;\n  border-radius: var(--instui-component-radio-input-toggle-border-radius);\n  background: transparent;\n  color: var(--instui-component-radio-input-label-base-color);\n  font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-radio.-variant-toggle.-context-off {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n\n.pfx-radio.-variant-toggle.-context-success {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-radio.-variant-toggle.-context-danger {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n\n.pfx-radio.-variant-toggle.-context-warning {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n  background: var(--pantoken-rt-fill);\n  color: var(--instui-component-radio-input-toggle-handle-text);\n  box-shadow: var(--instui-elevation-depth1);\n}\n\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n  text-decoration: underline;\n}\n\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n  content: \"\";\n  position: absolute;\n  inset: -0.25rem;\n  border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n  pointer-events: none;\n}\n\n.pfx-radio.-variant-toggle:has(input:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.pfx-radio.-variant-toggle.-size-sm {\n  height: var(--instui-component-radio-input-toggle-small-height);\n  font-size: var(--instui-component-radio-input-toggle-small-font-size);\n  padding-inline: 0.5rem;\n}\n\n.pfx-radio.-variant-toggle.-size-lg {\n  height: var(--instui-component-radio-input-toggle-large-height);\n  font-size: var(--instui-component-radio-input-toggle-large-font-size);\n  padding-inline: 1rem;\n}\n"
-}.rebrand;
 const rangeInput$1 = {
 	"rebrand": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n  -webkit-appearance: none;\n  appearance: none;\n  inline-size: 100%;\n  min-inline-size: var(--instui-component-range-input-min-width);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-webkit-slider-runnable-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-moz-range-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n  outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n     the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n  align-self: center;\n  margin-inline-start: 0.5rem;\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-component-range-input-value-medium-padding);\n  font-family: var(--instui-component-range-input-value-font-family);\n  font-size: var(--instui-component-range-input-value-medium-font-size);\n  font-weight: var(--instui-component-range-input-value-font-weight);\n  line-height: 1;\n}\n.pfx-range-input-value::before {\n  content: \"\";\n  position: absolute;\n  inset-inline-start: -0.375rem;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  border-block: 0.375rem solid transparent;\n  border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n  border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n  padding: var(--instui-component-range-input-value-small-padding);\n  font-size: var(--instui-component-range-input-value-small-font-size);\n  line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n  padding: var(--instui-component-range-input-value-large-padding);\n  font-size: var(--instui-component-range-input-value-large-font-size);\n  line-height: var(--instui-component-range-input-value-large-line-height);\n}\n",
 	"canvas": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n  -webkit-appearance: none;\n  appearance: none;\n  inline-size: 100%;\n  min-inline-size: var(--instui-component-range-input-min-width);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-webkit-slider-runnable-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-moz-range-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n  outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n     the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n  align-self: center;\n  margin-inline-start: 0.5rem;\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-component-range-input-value-medium-padding);\n  font-family: var(--instui-component-range-input-value-font-family);\n  font-size: var(--instui-component-range-input-value-medium-font-size);\n  font-weight: var(--instui-component-range-input-value-font-weight);\n  line-height: 1;\n}\n.pfx-range-input-value::before {\n  content: \"\";\n  position: absolute;\n  inset-inline-start: -0.375rem;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  border-block: 0.375rem solid transparent;\n  border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n  border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n  padding: var(--instui-component-range-input-value-small-padding);\n  font-size: var(--instui-component-range-input-value-small-font-size);\n  line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n  padding: var(--instui-component-range-input-value-large-padding);\n  font-size: var(--instui-component-range-input-value-large-font-size);\n  line-height: var(--instui-component-range-input-value-large-line-height);\n}\n",
@@ -448,9 +516,14 @@ 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.\n * @modifier -minimized — Collapse to icons only (labels hidden).\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .item — A navigation entry; `-selected` marks the active one.\n * @part .label — An item's text label; hidden when the rail is minimized.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n * @structure\n * .pfx-side-nav-bar {\n *   .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n@scope (.pfx-side-nav-bar) {\n  :scope > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n",
-	"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.\n * @modifier -minimized — Collapse to icons only (labels hidden).\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .item — A navigation entry; `-selected` marks the active one.\n * @part .label — An item's text label; hidden when the rail is minimized.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n * @structure\n * .pfx-side-nav-bar {\n *   .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n@scope (.pfx-side-nav-bar) {\n  :scope > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n",
-	"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.\n * @modifier -minimized — Collapse to icons only (labels hidden).\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .item — A navigation entry; `-selected` marks the active one.\n * @part .label — An item's text label; hidden when the rail is minimized.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n * @structure\n * .pfx-side-nav-bar {\n *   .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n@scope (.pfx-side-nav-bar) {\n  :scope > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n"
+	"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;
+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;
 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",
@@ -458,14 +531,54 @@ const spinner$1 = {
 	"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;
 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`.\n * @modifier -hover — Highlight rows on hover.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`.\n * @pseudo ::before — Renders each cell's `data-label` as its column heading in the stacked layout.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n *   <caption>Top-rated films</caption>\n *   <thead>\n *     <tr>\n *       <th scope=\"col\">Rank</th>\n *       <th scope=\"col\">Title</th>\n *       <th scope=\"col\">Year</th>\n *       <th scope=\"col\">Rating</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <th scope=\"row\">1</th>\n *       <td>The Shawshank Redemption</td>\n *       <td>1994</td>\n *       <td>9.3</td>\n *     </tr>\n *     <tr>\n *       <th scope=\"row\">2</th>\n *       <td>The Godfather</td>\n *       <td>1972</td>\n *       <td>9.2</td>\n *     </tr>\n *     <tr>\n *       <th scope=\"row\">3</th>\n *       <td>The Godfather: Part II</td>\n *       <td>1974</td>\n *       <td>9.0</td>\n *     </tr>\n *   </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n *   caption {}\n *   thead {\n *     tr {\n *       th {}\n *     }\n *   }\n *   tbody {\n *     tr {\n *       th {}\n *       td {}\n *     }\n *   }\n * }\n */\n.pfx-table {\n  border-collapse: collapse;\n  width: 100%;\n  background: var(--instui-component-table-background);\n  color: var(--instui-component-table-color);\n  font-family: var(--instui-component-table-font-family);\n  font-size: var(--instui-component-table-font-size);\n}\n.pfx-table caption {\n  text-align: start;\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n}\n/* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n.pfx-table.-layout-fixed {\n  table-layout: fixed;\n}\n.pfx-table thead {\n  background: var(--instui-component-table-head-background);\n}\n.pfx-table th {\n  text-align: start;\n  background: var(--instui-component-table-col-header-background);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n  line-height: var(--instui-component-table-col-header-line-height);\n  padding: var(--instui-component-table-col-header-padding-vertical)\n    var(--instui-component-table-col-header-padding-horizontal);\n}\n/* The column-header underline lives on the head only — a distinct 2px rule under the header row. */\n.pfx-table thead th {\n  border-bottom: var(--instui-border-width-md) solid var(--instui-component-table-row-border-color);\n}\n/* A row-header cell (th scope=row) — styled from the row-header tokens, not the column-header ones. */\n.pfx-table tbody th,\n.pfx-table th[scope=\"row\"] {\n  background: var(--instui-component-table-row-header-background);\n  color: var(--instui-component-table-row-header-color);\n  font-weight: var(--instui-component-table-row-header-font-weight);\n  line-height: var(--instui-component-table-row-header-line-height);\n  padding: var(--instui-component-table-row-header-padding-vertical)\n    var(--instui-component-table-row-header-padding-horizontal);\n}\n.pfx-table td {\n  color: var(--instui-component-table-cell-color);\n  line-height: var(--instui-component-table-cell-line-height);\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n}\n/* Body cells carry no border of their own — the separator lives on the row. Reset with tbody\n   specificity (0,1,2) so a host stylesheet's cell borders (e.g. `.pantoken-prose td`, 0,1,1) can't leak\n   in and double the row line (very visible in the stacked layout, where cells are display:block). */\n.pfx-table tbody td,\n.pfx-table tbody th {\n  border: 0;\n}\n/* The row separator is a single border on the ROW (InstUI puts it there), so it's uniform across the\n   row-header and data cells — no mismatched per-cell borders. */\n.pfx-table tbody tr {\n  border-bottom: var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color);\n}\n/* hover=\"true\" (InstUI's opt-in `hover` prop): every row reserves a transparent 3px inline border and\n   colours it with the brand hover-border on hover — a vertical bar on each edge, NOT a full box, and\n   no layout shift. Only rows in a `.-hover` table react. */\n.pfx-table.-hover tbody tr {\n  border-inline: 0.1875rem solid transparent;\n}\n.pfx-table.-hover tbody tr:hover {\n  border-inline-color: var(--instui-component-table-row-hover-border-color);\n}\n/* layout=\"stacked\": each row becomes a card and cells stack, labelled by their column. InstUI does this\n   by re-rendering the DOM; pure CSS can't pull the <th> text into each cell, so the author supplies a\n   `data-label` per cell and it's shown via ::before. Always-on (toggle the class responsively). */\n.pfx-table.-layout-stacked thead {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n.pfx-table.-layout-stacked,\n.pfx-table.-layout-stacked tbody,\n.pfx-table.-layout-stacked tr,\n.pfx-table.-layout-stacked td,\n.pfx-table.-layout-stacked th {\n  display: block;\n  width: auto;\n}\n/* InstUI's stacked row is just padding + the single bottom-border separator (the row's existing\n   border-bottom carries over) — NOT a full card box. */\n.pfx-table.-layout-stacked tbody tr {\n  padding: var(--instui-component-table-row-padding-vertical)\n    var(--instui-component-table-row-padding-horizontal);\n}\n.pfx-table.-layout-stacked tbody td[data-label]::before,\n.pfx-table.-layout-stacked tbody th[data-label]::before {\n  content: attr(data-label);\n  display: block;\n  font-weight: var(--instui-component-table-head-font-weight);\n  color: var(--instui-component-table-col-header-color);\n}\n",
-	"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`.\n * @modifier -hover — Highlight rows on hover.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`.\n * @pseudo ::before — Renders each cell's `data-label` as its column heading in the stacked layout.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n *   <caption>Top-rated films</caption>\n *   <thead>\n *     <tr>\n *       <th scope=\"col\">Rank</th>\n *       <th scope=\"col\">Title</th>\n *       <th scope=\"col\">Year</th>\n *       <th scope=\"col\">Rating</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <th scope=\"row\">1</th>\n *       <td>The Shawshank Redemption</td>\n *       <td>1994</td>\n *       <td>9.3</td>\n *     </tr>\n *     <tr>\n *       <th scope=\"row\">2</th>\n *       <td>The Godfather</td>\n *       <td>1972</td>\n *       <td>9.2</td>\n *     </tr>\n *     <tr>\n *       <th scope=\"row\">3</th>\n *       <td>The Godfather: Part II</td>\n *       <td>1974</td>\n *       <td>9.0</td>\n *     </tr>\n *   </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n *   caption {}\n *   thead {\n *     tr {\n *       th {}\n *     }\n *   }\n *   tbody {\n *     tr {\n *       th {}\n *       td {}\n *     }\n *   }\n * }\n */\n.pfx-table {\n  border-collapse: collapse;\n  width: 100%;\n  background: var(--instui-component-table-background);\n  color: var(--instui-component-table-color);\n  font-family: var(--instui-component-table-font-family);\n  font-size: var(--instui-component-table-font-size);\n}\n.pfx-table caption {\n  text-align: start;\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n}\n/* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n.pfx-table.-layout-fixed {\n  table-layout: fixed;\n}\n.pfx-table thead {\n  background: var(--instui-component-table-head-background);\n}\n.pfx-table th {\n  text-align: start;\n  background: var(--instui-component-table-col-header-background);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n  line-height: var(--instui-component-table-col-header-line-height);\n  padding: var(--instui-component-table-col-header-padding-vertical)\n    var(--instui-component-table-col-header-padding-horizontal);\n}\n/* The column-header underline lives on the head only — a distinct 2px rule under the header row. */\n.pfx-table thead th {\n  border-bottom: var(--instui-border-width-md) solid var(--instui-component-table-row-border-color);\n}\n/* A row-header cell (th scope=row) — styled from the row-header tokens, not the column-header ones. */\n.pfx-table tbody th,\n.pfx-table th[scope=\"row\"] {\n  background: var(--instui-component-table-row-header-background);\n  color: var(--instui-component-table-row-header-color);\n  font-weight: var(--instui-component-table-row-header-font-weight);\n  line-height: var(--instui-component-table-row-header-line-height);\n  padding: var(--instui-component-table-row-header-padding-vertical)\n    var(--instui-component-table-row-header-padding-horizontal);\n}\n.pfx-table td {\n  color: var(--instui-component-table-cell-color);\n  line-height: var(--instui-component-table-cell-line-height);\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n}\n/* Body cells carry no border of their own — the separator lives on the row. Reset with tbody\n   specificity (0,1,2) so a host stylesheet's cell borders (e.g. `.pantoken-prose td`, 0,1,1) can't leak\n   in and double the row line (very visible in the stacked layout, where cells are display:block). */\n.pfx-table tbody td,\n.pfx-table tbody th {\n  border: 0;\n}\n/* The row separator is a single border on the ROW (InstUI puts it there), so it's uniform across the\n   row-header and data cells — no mismatched per-cell borders. */\n.pfx-table tbody tr {\n  border-bottom: var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color);\n}\n/* hover=\"true\" (InstUI's opt-in `hover` prop): every row reserves a transparent 3px inline border and\n   colours it with the brand hover-border on hover — a vertical bar on each edge, NOT a full box, and\n   no layout shift. Only rows in a `.-hover` table react. */\n.pfx-table.-hover tbody tr {\n  border-inline: 0.1875rem solid transparent;\n}\n.pfx-table.-hover tbody tr:hover {\n  border-inline-color: var(--instui-component-table-row-hover-border-color);\n}\n/* layout=\"stacked\": each row becomes a card and cells stack, labelled by their column. InstUI does this\n   by re-rendering the DOM; pure CSS can't pull the <th> text into each cell, so the author supplies a\n   `data-label` per cell and it's shown via ::before. Always-on (toggle the class responsively). */\n.pfx-table.-layout-stacked thead {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n.pfx-table.-layout-stacked,\n.pfx-table.-layout-stacked tbody,\n.pfx-table.-layout-stacked tr,\n.pfx-table.-layout-stacked td,\n.pfx-table.-layout-stacked th {\n  display: block;\n  width: auto;\n}\n/* InstUI's stacked row is just padding + the single bottom-border separator (the row's existing\n   border-bottom carries over) — NOT a full card box. */\n.pfx-table.-layout-stacked tbody tr {\n  padding: var(--instui-component-table-row-padding-vertical)\n    var(--instui-component-table-row-padding-horizontal);\n}\n.pfx-table.-layout-stacked tbody td[data-label]::before,\n.pfx-table.-layout-stacked tbody th[data-label]::before {\n  content: attr(data-label);\n  display: block;\n  font-weight: var(--instui-component-table-head-font-weight);\n  color: var(--instui-component-table-col-header-color);\n}\n",
-	"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`.\n * @modifier -hover — Highlight rows on hover.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`.\n * @pseudo ::before — Renders each cell's `data-label` as its column heading in the stacked layout.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n *   <caption>Top-rated films</caption>\n *   <thead>\n *     <tr>\n *       <th scope=\"col\">Rank</th>\n *       <th scope=\"col\">Title</th>\n *       <th scope=\"col\">Year</th>\n *       <th scope=\"col\">Rating</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <th scope=\"row\">1</th>\n *       <td>The Shawshank Redemption</td>\n *       <td>1994</td>\n *       <td>9.3</td>\n *     </tr>\n *     <tr>\n *       <th scope=\"row\">2</th>\n *       <td>The Godfather</td>\n *       <td>1972</td>\n *       <td>9.2</td>\n *     </tr>\n *     <tr>\n *       <th scope=\"row\">3</th>\n *       <td>The Godfather: Part II</td>\n *       <td>1974</td>\n *       <td>9.0</td>\n *     </tr>\n *   </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n *   caption {}\n *   thead {\n *     tr {\n *       th {}\n *     }\n *   }\n *   tbody {\n *     tr {\n *       th {}\n *       td {}\n *     }\n *   }\n * }\n */\n.pfx-table {\n  border-collapse: collapse;\n  width: 100%;\n  background: var(--instui-component-table-background);\n  color: var(--instui-component-table-color);\n  font-family: var(--instui-component-table-font-family);\n  font-size: var(--instui-component-table-font-size);\n}\n.pfx-table caption {\n  text-align: start;\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n}\n/* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n.pfx-table.-layout-fixed {\n  table-layout: fixed;\n}\n.pfx-table thead {\n  background: var(--instui-component-table-head-background);\n}\n.pfx-table th {\n  text-align: start;\n  background: var(--instui-component-table-col-header-background);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n  line-height: var(--instui-component-table-col-header-line-height);\n  padding: var(--instui-component-table-col-header-padding-vertical)\n    var(--instui-component-table-col-header-padding-horizontal);\n}\n/* The column-header underline lives on the head only — a distinct 2px rule under the header row. */\n.pfx-table thead th {\n  border-bottom: var(--instui-border-width-md) solid var(--instui-component-table-row-border-color);\n}\n/* A row-header cell (th scope=row) — styled from the row-header tokens, not the column-header ones. */\n.pfx-table tbody th,\n.pfx-table th[scope=\"row\"] {\n  background: var(--instui-component-table-row-header-background);\n  color: var(--instui-component-table-row-header-color);\n  font-weight: var(--instui-component-table-row-header-font-weight);\n  line-height: var(--instui-component-table-row-header-line-height);\n  padding: var(--instui-component-table-row-header-padding-vertical)\n    var(--instui-component-table-row-header-padding-horizontal);\n}\n.pfx-table td {\n  color: var(--instui-component-table-cell-color);\n  line-height: var(--instui-component-table-cell-line-height);\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n}\n/* Body cells carry no border of their own — the separator lives on the row. Reset with tbody\n   specificity (0,1,2) so a host stylesheet's cell borders (e.g. `.pantoken-prose td`, 0,1,1) can't leak\n   in and double the row line (very visible in the stacked layout, where cells are display:block). */\n.pfx-table tbody td,\n.pfx-table tbody th {\n  border: 0;\n}\n/* The row separator is a single border on the ROW (InstUI puts it there), so it's uniform across the\n   row-header and data cells — no mismatched per-cell borders. */\n.pfx-table tbody tr {\n  border-bottom: var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color);\n}\n/* hover=\"true\" (InstUI's opt-in `hover` prop): every row reserves a transparent 3px inline border and\n   colours it with the brand hover-border on hover — a vertical bar on each edge, NOT a full box, and\n   no layout shift. Only rows in a `.-hover` table react. */\n.pfx-table.-hover tbody tr {\n  border-inline: 0.1875rem solid transparent;\n}\n.pfx-table.-hover tbody tr:hover {\n  border-inline-color: var(--instui-component-table-row-hover-border-color);\n}\n/* layout=\"stacked\": each row becomes a card and cells stack, labelled by their column. InstUI does this\n   by re-rendering the DOM; pure CSS can't pull the <th> text into each cell, so the author supplies a\n   `data-label` per cell and it's shown via ::before. Always-on (toggle the class responsively). */\n.pfx-table.-layout-stacked thead {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n.pfx-table.-layout-stacked,\n.pfx-table.-layout-stacked tbody,\n.pfx-table.-layout-stacked tr,\n.pfx-table.-layout-stacked td,\n.pfx-table.-layout-stacked th {\n  display: block;\n  width: auto;\n}\n/* InstUI's stacked row is just padding + the single bottom-border separator (the row's existing\n   border-bottom carries over) — NOT a full card box. */\n.pfx-table.-layout-stacked tbody tr {\n  padding: var(--instui-component-table-row-padding-vertical)\n    var(--instui-component-table-row-padding-horizontal);\n}\n.pfx-table.-layout-stacked tbody td[data-label]::before,\n.pfx-table.-layout-stacked tbody th[data-label]::before {\n  content: attr(data-label);\n  display: block;\n  font-weight: var(--instui-component-table-head-font-weight);\n  color: var(--instui-component-table-col-header-color);\n}\n"
+	"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;
+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",
+	"canvas": "/**\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",
+	"canvasHighContrast": "/**\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"
+}.rebrand;
+const tableCell$1 = {
+	"rebrand": "/**\n * @component table.cell\n * @memberOf table\n * @selector td\n * @summary A data cell (InstUI `Table.Cell`).\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 *       td {}\n *     }\n *   }\n * }\n */\n.pfx-table td {\n  color: var(--instui-component-table-cell-color);\n  line-height: var(--instui-component-table-cell-line-height);\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n}\n\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 td {\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 td {\n  display: block;\n  width: auto;\n}\n\n.pfx-table.-layout-stacked tbody td[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",
+	"canvas": "/**\n * @component table.cell\n * @memberOf table\n * @selector td\n * @summary A data cell (InstUI `Table.Cell`).\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 *       td {}\n *     }\n *   }\n * }\n */\n.pfx-table td {\n  color: var(--instui-component-table-cell-color);\n  line-height: var(--instui-component-table-cell-line-height);\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n}\n\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 td {\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 td {\n  display: block;\n  width: auto;\n}\n\n.pfx-table.-layout-stacked tbody td[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",
+	"canvasHighContrast": "/**\n * @component table.cell\n * @memberOf table\n * @selector td\n * @summary A data cell (InstUI `Table.Cell`).\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 *       td {}\n *     }\n *   }\n * }\n */\n.pfx-table td {\n  color: var(--instui-component-table-cell-color);\n  line-height: var(--instui-component-table-cell-line-height);\n  padding: var(--instui-component-table-cell-padding-vertical)\n    var(--instui-component-table-cell-padding-horizontal);\n}\n\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 td {\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 td {\n  display: block;\n  width: auto;\n}\n\n.pfx-table.-layout-stacked tbody td[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 tableColHeader$1 = {
+	"rebrand": "/**\n * @component table.col-header\n * @memberOf table\n * @selector th\n * @summary A column-header cell (InstUI `Table.ColHeader`); the default `th` styling, overridden by `table.row-header` for `th[scope=\"row\"]`.\n * @structure\n * @component table {\n *   thead {\n *     th {}\n *   }\n * }\n */\n.pfx-table th {\n  text-align: start;\n  background: var(--instui-component-table-col-header-background);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n  line-height: var(--instui-component-table-col-header-line-height);\n  padding: var(--instui-component-table-col-header-padding-vertical)\n    var(--instui-component-table-col-header-padding-horizontal);\n}\n\n/* The column-header underline lives on the head only — a distinct 2px rule under the header row. */\n.pfx-table thead th {\n  border-bottom: var(--instui-border-width-md) solid var(--instui-component-table-row-border-color);\n}\n",
+	"canvas": "/**\n * @component table.col-header\n * @memberOf table\n * @selector th\n * @summary A column-header cell (InstUI `Table.ColHeader`); the default `th` styling, overridden by `table.row-header` for `th[scope=\"row\"]`.\n * @structure\n * @component table {\n *   thead {\n *     th {}\n *   }\n * }\n */\n.pfx-table th {\n  text-align: start;\n  background: var(--instui-component-table-col-header-background);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n  line-height: var(--instui-component-table-col-header-line-height);\n  padding: var(--instui-component-table-col-header-padding-vertical)\n    var(--instui-component-table-col-header-padding-horizontal);\n}\n\n/* The column-header underline lives on the head only — a distinct 2px rule under the header row. */\n.pfx-table thead th {\n  border-bottom: var(--instui-border-width-md) solid var(--instui-component-table-row-border-color);\n}\n",
+	"canvasHighContrast": "/**\n * @component table.col-header\n * @memberOf table\n * @selector th\n * @summary A column-header cell (InstUI `Table.ColHeader`); the default `th` styling, overridden by `table.row-header` for `th[scope=\"row\"]`.\n * @structure\n * @component table {\n *   thead {\n *     th {}\n *   }\n * }\n */\n.pfx-table th {\n  text-align: start;\n  background: var(--instui-component-table-col-header-background);\n  color: var(--instui-component-table-col-header-color);\n  font-weight: var(--instui-component-table-head-font-weight);\n  line-height: var(--instui-component-table-col-header-line-height);\n  padding: var(--instui-component-table-col-header-padding-vertical)\n    var(--instui-component-table-col-header-padding-horizontal);\n}\n\n/* The column-header underline lives on the head only — a distinct 2px rule under the header row. */\n.pfx-table thead th {\n  border-bottom: var(--instui-border-width-md) solid var(--instui-component-table-row-border-color);\n}\n"
+}.rebrand;
+const tableHead$1 = {
+	"rebrand": "/**\n * @component table.head\n * @memberOf table\n * @selector thead\n * @summary The table's header row group (InstUI `Table.Head`).\n * @remarks The parent `table`'s `-layout-stacked` modifier visually hides this member (its column titles surface per-cell instead) — see `table`'s own doc for that modifier.\n * @structure\n * @component table {\n *   thead {}\n * }\n */\n.pfx-table thead {\n  background: var(--instui-component-table-head-background);\n}\n\n/* layout=\"stacked\": the header row is redundant (each cell shows its own label instead), so it's\n visually hidden rather than removed (keeps it in the accessibility tree for non-visual users). */\n.pfx-table.-layout-stacked thead {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
+	"canvas": "/**\n * @component table.head\n * @memberOf table\n * @selector thead\n * @summary The table's header row group (InstUI `Table.Head`).\n * @remarks The parent `table`'s `-layout-stacked` modifier visually hides this member (its column titles surface per-cell instead) — see `table`'s own doc for that modifier.\n * @structure\n * @component table {\n *   thead {}\n * }\n */\n.pfx-table thead {\n  background: var(--instui-component-table-head-background);\n}\n\n/* layout=\"stacked\": the header row is redundant (each cell shows its own label instead), so it's\n visually hidden rather than removed (keeps it in the accessibility tree for non-visual users). */\n.pfx-table.-layout-stacked thead {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
+	"canvasHighContrast": "/**\n * @component table.head\n * @memberOf table\n * @selector thead\n * @summary The table's header row group (InstUI `Table.Head`).\n * @remarks The parent `table`'s `-layout-stacked` modifier visually hides this member (its column titles surface per-cell instead) — see `table`'s own doc for that modifier.\n * @structure\n * @component table {\n *   thead {}\n * }\n */\n.pfx-table thead {\n  background: var(--instui-component-table-head-background);\n}\n\n/* layout=\"stacked\": the header row is redundant (each cell shows its own label instead), so it's\n visually hidden rather than removed (keeps it in the accessibility tree for non-visual users). */\n.pfx-table.-layout-stacked thead {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"
+}.rebrand;
+const tableRow$1 = {
+	"rebrand": "/**\n * @component table.row\n * @memberOf table\n * @selector tr\n * @summary A table row (InstUI `Table.Row`).\n * @remarks The parent `table`'s `-hover` and `-layout-stacked` modifiers restyle this member — see `table`'s own doc for those modifiers.\n * @structure\n * @component table {\n *   tbody {\n *     tr {}\n *   }\n * }\n */\n/* The row separator is a single border on the ROW (InstUI puts it there), so it's uniform across the\n row-header and data cells — no mismatched per-cell borders. */\n.pfx-table tbody tr {\n  border-bottom: var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color);\n}\n\n/* hover=\"true\" (InstUI's opt-in `hover` prop): every row reserves a transparent 3px inline border and\n colours it with the brand hover-border on hover — a vertical bar on each edge, NOT a full box, and no\n layout shift. Only rows in a `.-hover` table react. */\n.pfx-table.-hover tbody tr {\n  border-inline: 0.1875rem solid transparent;\n}\n\n.pfx-table.-hover tbody tr:hover {\n  border-inline-color: var(--instui-component-table-row-hover-border-color);\n}\n\n/* layout=\"stacked\": each row becomes a card; InstUI's stacked row is just padding + the single\n bottom-border separator (the row's existing border-bottom carries over) — NOT a full card box. */\n.pfx-table.-layout-stacked tr {\n  display: block;\n  width: auto;\n}\n\n.pfx-table.-layout-stacked tbody tr {\n  padding: var(--instui-component-table-row-padding-vertical)\n    var(--instui-component-table-row-padding-horizontal);\n}\n",
+	"canvas": "/**\n * @component table.row\n * @memberOf table\n * @selector tr\n * @summary A table row (InstUI `Table.Row`).\n * @remarks The parent `table`'s `-hover` and `-layout-stacked` modifiers restyle this member — see `table`'s own doc for those modifiers.\n * @structure\n * @component table {\n *   tbody {\n *     tr {}\n *   }\n * }\n */\n/* The row separator is a single border on the ROW (InstUI puts it there), so it's uniform across the\n row-header and data cells — no mismatched per-cell borders. */\n.pfx-table tbody tr {\n  border-bottom: var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color);\n}\n\n/* hover=\"true\" (InstUI's opt-in `hover` prop): every row reserves a transparent 3px inline border and\n colours it with the brand hover-border on hover — a vertical bar on each edge, NOT a full box, and no\n layout shift. Only rows in a `.-hover` table react. */\n.pfx-table.-hover tbody tr {\n  border-inline: 0.1875rem solid transparent;\n}\n\n.pfx-table.-hover tbody tr:hover {\n  border-inline-color: var(--instui-component-table-row-hover-border-color);\n}\n\n/* layout=\"stacked\": each row becomes a card; InstUI's stacked row is just padding + the single\n bottom-border separator (the row's existing border-bottom carries over) — NOT a full card box. */\n.pfx-table.-layout-stacked tr {\n  display: block;\n  width: auto;\n}\n\n.pfx-table.-layout-stacked tbody tr {\n  padding: var(--instui-component-table-row-padding-vertical)\n    var(--instui-component-table-row-padding-horizontal);\n}\n",
+	"canvasHighContrast": "/**\n * @component table.row\n * @memberOf table\n * @selector tr\n * @summary A table row (InstUI `Table.Row`).\n * @remarks The parent `table`'s `-hover` and `-layout-stacked` modifiers restyle this member — see `table`'s own doc for those modifiers.\n * @structure\n * @component table {\n *   tbody {\n *     tr {}\n *   }\n * }\n */\n/* The row separator is a single border on the ROW (InstUI puts it there), so it's uniform across the\n row-header and data cells — no mismatched per-cell borders. */\n.pfx-table tbody tr {\n  border-bottom: var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color);\n}\n\n/* hover=\"true\" (InstUI's opt-in `hover` prop): every row reserves a transparent 3px inline border and\n colours it with the brand hover-border on hover — a vertical bar on each edge, NOT a full box, and no\n layout shift. Only rows in a `.-hover` table react. */\n.pfx-table.-hover tbody tr {\n  border-inline: 0.1875rem solid transparent;\n}\n\n.pfx-table.-hover tbody tr:hover {\n  border-inline-color: var(--instui-component-table-row-hover-border-color);\n}\n\n/* layout=\"stacked\": each row becomes a card; InstUI's stacked row is just padding + the single\n bottom-border separator (the row's existing border-bottom carries over) — NOT a full card box. */\n.pfx-table.-layout-stacked tr {\n  display: block;\n  width: auto;\n}\n\n.pfx-table.-layout-stacked tbody tr {\n  padding: var(--instui-component-table-row-padding-vertical)\n    var(--instui-component-table-row-padding-horizontal);\n}\n"
+}.rebrand;
+const tableRowHeader$1 = {
+	"rebrand": "/**\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",
+	"canvas": "/**\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",
+	"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 Selected and disabled styling matches either the `-selected`/`-disabled` class or the `aria-selected`/`aria-disabled` attribute, so you can drive state from markup or from ARIA.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below.\n * @part .list — The row of tabs.\n * @part .tab — A single tab; `-selected` marks the active one.\n * @part .panel — The content panel for a tab.\n * @cssstate selected\n * @cssstate disabled\n * @cssstate hidden\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab {}\n *   }\n *   .panel {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\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  .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: rounded \"folder\" tabs; the selected tab's bottom border matches the panel\n   background so it visually connects into the panel below. */\n  :scope.-variant-secondary .tab {\n    padding: 0.75rem 1rem;\n    line-height: var(--instui-component-tabs-tab-line-height);\n    color: var(--instui-component-tabs-tab-secondary-text-color);\n    margin-inline-end: 0.2em;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n    border: var(--instui-component-tabs-panel-border-width) solid transparent;\n    border-radius: 0.1875rem 0.1875rem 0 0;\n  }\n\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  :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\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks Selected and disabled styling matches either the `-selected`/`-disabled` class or the `aria-selected`/`aria-disabled` attribute, so you can drive state from markup or from ARIA.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below.\n * @part .list — The row of tabs.\n * @part .tab — A single tab; `-selected` marks the active one.\n * @part .panel — The content panel for a tab.\n * @cssstate selected\n * @cssstate disabled\n * @cssstate hidden\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab {}\n *   }\n *   .panel {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\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  .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: rounded \"folder\" tabs; the selected tab's bottom border matches the panel\n   background so it visually connects into the panel below. */\n  :scope.-variant-secondary .tab {\n    padding: 0.75rem 1rem;\n    line-height: var(--instui-component-tabs-tab-line-height);\n    color: var(--instui-component-tabs-tab-secondary-text-color);\n    margin-inline-end: 0.2em;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n    border: var(--instui-component-tabs-panel-border-width) solid transparent;\n    border-radius: 0.1875rem 0.1875rem 0 0;\n  }\n\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  :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\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks Selected and disabled styling matches either the `-selected`/`-disabled` class or the `aria-selected`/`aria-disabled` attribute, so you can drive state from markup or from ARIA.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below.\n * @part .list — The row of tabs.\n * @part .tab — A single tab; `-selected` marks the active one.\n * @part .panel — The content panel for a tab.\n * @cssstate selected\n * @cssstate disabled\n * @cssstate hidden\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab {}\n *   }\n *   .panel {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\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  .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: rounded \"folder\" tabs; the selected tab's bottom border matches the panel\n   background so it visually connects into the panel below. */\n  :scope.-variant-secondary .tab {\n    padding: 0.75rem 1rem;\n    line-height: var(--instui-component-tabs-tab-line-height);\n    color: var(--instui-component-tabs-tab-secondary-text-color);\n    margin-inline-end: 0.2em;\n    margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n    border: var(--instui-component-tabs-panel-border-width) solid transparent;\n    border-radius: 0.1875rem 0.1875rem 0 0;\n  }\n\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  :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\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;
+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;
+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;
 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",
@@ -473,9 +586,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 — AI-accent text colour.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * <span class=\"pfx-text -size-xs\">x-small text</span>\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n */\n.pfx-text {\n  font-family: var(--instui-component-text-content-font-family);\n  color: var(--instui-component-text-base-color);\n  font-size: var(--instui-component-text-font-size-medium);\n  font-weight: var(--instui-component-text-font-weight-normal);\n  line-height: var(--instui-component-text-content-line-height);\n}\n.pfx-text.-size-xs {\n  font-size: var(--instui-component-text-font-size-x-small);\n}\n.pfx-text.-size-sm {\n  font-size: var(--instui-component-text-font-size-small);\n}\n.pfx-text.-size-lg {\n  font-size: var(--instui-component-text-font-size-large);\n}\n.pfx-text.-size-xl {\n  font-size: var(--instui-component-text-font-size-x-large);\n}\n.pfx-text.-weight-bold {\n  font-weight: var(--instui-component-text-font-weight-bold);\n}\n.pfx-text.-style-italic {\n  font-style: italic;\n}\n.pfx-text.-color-secondary {\n  color: var(--instui-component-text-muted-color);\n}\n.pfx-text.-color-brand {\n  color: var(--instui-component-text-primary-color);\n}\n.pfx-text.-color-success {\n  color: var(--instui-component-text-success-color);\n}\n.pfx-text.-color-danger {\n  color: var(--instui-component-text-error-color);\n}\n.pfx-text.-color-warning {\n  color: var(--instui-component-text-warning-color);\n}\n.pfx-text.-color-primary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n.pfx-text.-color-ai {\n  color: var(--instui-component-text-ai-color);\n  background: var(--instui-component-text-ai-background-color);\n}\n.pfx-text.-variant-description-page {\n  font-size: var(--instui-component-text-description-page-font-size);\n  line-height: var(--instui-component-text-description-page-line-height);\n}\n.pfx-text.-variant-description-section {\n  font-size: var(--instui-component-text-description-section-font-size);\n  line-height: var(--instui-component-text-description-section-line-height);\n}\n.pfx-text.-variant-content-small {\n  font-size: var(--instui-component-text-content-small-font-size);\n  line-height: var(--instui-component-text-content-small-line-height);\n}\n.pfx-text.-variant-legend {\n  font-size: var(--instui-component-text-legend-font-size);\n  line-height: var(--instui-component-text-legend-line-height);\n}\n.pfx-text.-transform-uppercase {\n  text-transform: uppercase;\n}\n.pfx-text.-transform-lowercase {\n  text-transform: lowercase;\n}\n.pfx-text.-transform-capitalize {\n  text-transform: capitalize;\n}\n",
-	"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 — AI-accent text colour.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * <span class=\"pfx-text -size-xs\">x-small text</span>\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n */\n.pfx-text {\n  font-family: var(--instui-component-text-content-font-family);\n  color: var(--instui-component-text-base-color);\n  font-size: var(--instui-component-text-font-size-medium);\n  font-weight: var(--instui-component-text-font-weight-normal);\n  line-height: var(--instui-component-text-content-line-height);\n}\n.pfx-text.-size-xs {\n  font-size: var(--instui-component-text-font-size-x-small);\n}\n.pfx-text.-size-sm {\n  font-size: var(--instui-component-text-font-size-small);\n}\n.pfx-text.-size-lg {\n  font-size: var(--instui-component-text-font-size-large);\n}\n.pfx-text.-size-xl {\n  font-size: var(--instui-component-text-font-size-x-large);\n}\n.pfx-text.-weight-bold {\n  font-weight: var(--instui-component-text-font-weight-bold);\n}\n.pfx-text.-style-italic {\n  font-style: italic;\n}\n.pfx-text.-color-secondary {\n  color: var(--instui-component-text-muted-color);\n}\n.pfx-text.-color-brand {\n  color: var(--instui-component-text-primary-color);\n}\n.pfx-text.-color-success {\n  color: var(--instui-component-text-success-color);\n}\n.pfx-text.-color-danger {\n  color: var(--instui-component-text-error-color);\n}\n.pfx-text.-color-warning {\n  color: var(--instui-component-text-warning-color);\n}\n.pfx-text.-color-primary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n.pfx-text.-color-ai {\n  color: var(--instui-component-text-ai-color);\n  background: var(--instui-component-text-ai-background-color);\n}\n.pfx-text.-variant-description-page {\n  font-size: var(--instui-component-text-description-page-font-size);\n  line-height: var(--instui-component-text-description-page-line-height);\n}\n.pfx-text.-variant-description-section {\n  font-size: var(--instui-component-text-description-section-font-size);\n  line-height: var(--instui-component-text-description-section-line-height);\n}\n.pfx-text.-variant-content-small {\n  font-size: var(--instui-component-text-content-small-font-size);\n  line-height: var(--instui-component-text-content-small-line-height);\n}\n.pfx-text.-variant-legend {\n  font-size: var(--instui-component-text-legend-font-size);\n  line-height: var(--instui-component-text-legend-line-height);\n}\n.pfx-text.-transform-uppercase {\n  text-transform: uppercase;\n}\n.pfx-text.-transform-lowercase {\n  text-transform: lowercase;\n}\n.pfx-text.-transform-capitalize {\n  text-transform: capitalize;\n}\n",
-	"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 — AI-accent text colour.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * <span class=\"pfx-text -size-xs\">x-small text</span>\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n */\n.pfx-text {\n  font-family: var(--instui-component-text-content-font-family);\n  color: var(--instui-component-text-base-color);\n  font-size: var(--instui-component-text-font-size-medium);\n  font-weight: var(--instui-component-text-font-weight-normal);\n  line-height: var(--instui-component-text-content-line-height);\n}\n.pfx-text.-size-xs {\n  font-size: var(--instui-component-text-font-size-x-small);\n}\n.pfx-text.-size-sm {\n  font-size: var(--instui-component-text-font-size-small);\n}\n.pfx-text.-size-lg {\n  font-size: var(--instui-component-text-font-size-large);\n}\n.pfx-text.-size-xl {\n  font-size: var(--instui-component-text-font-size-x-large);\n}\n.pfx-text.-weight-bold {\n  font-weight: var(--instui-component-text-font-weight-bold);\n}\n.pfx-text.-style-italic {\n  font-style: italic;\n}\n.pfx-text.-color-secondary {\n  color: var(--instui-component-text-muted-color);\n}\n.pfx-text.-color-brand {\n  color: var(--instui-component-text-primary-color);\n}\n.pfx-text.-color-success {\n  color: var(--instui-component-text-success-color);\n}\n.pfx-text.-color-danger {\n  color: var(--instui-component-text-error-color);\n}\n.pfx-text.-color-warning {\n  color: var(--instui-component-text-warning-color);\n}\n.pfx-text.-color-primary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n.pfx-text.-color-ai {\n  color: var(--instui-component-text-ai-color);\n  background: var(--instui-component-text-ai-background-color);\n}\n.pfx-text.-variant-description-page {\n  font-size: var(--instui-component-text-description-page-font-size);\n  line-height: var(--instui-component-text-description-page-line-height);\n}\n.pfx-text.-variant-description-section {\n  font-size: var(--instui-component-text-description-section-font-size);\n  line-height: var(--instui-component-text-description-section-line-height);\n}\n.pfx-text.-variant-content-small {\n  font-size: var(--instui-component-text-content-small-font-size);\n  line-height: var(--instui-component-text-content-small-line-height);\n}\n.pfx-text.-variant-legend {\n  font-size: var(--instui-component-text-legend-font-size);\n  line-height: var(--instui-component-text-legend-line-height);\n}\n.pfx-text.-transform-uppercase {\n  text-transform: uppercase;\n}\n.pfx-text.-transform-lowercase {\n  text-transform: lowercase;\n}\n.pfx-text.-transform-capitalize {\n  text-transform: capitalize;\n}\n"
+	"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;
 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",
@@ -502,33 +615,33 @@ const treeBrowser$1 = {
 	"canvas": "/**\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",
 	"canvasHighContrast": "/**\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"
 }.rebrand;
-const truncate$1 = {
-	"rebrand": "/**\n * @component truncate\n * @summary Single-line ellipsis truncation, or a multi-line clamp via `--lines`.\n * @remarks The `-lines` clamp switches to `display: -webkit-box` and reads the `--lines` custom property, so the text wraps to that many lines before it ends in an ellipsis.\n * @modifier -lines — Multi-line clamp; set the line count via the `--lines` custom property (default 2).\n * @compat The `-lines` clamp relies on `-webkit-line-clamp` with `display: -webkit-box`, paired with the standard `line-clamp`.\n * @example\n * <div class=\"pfx-truncate\">This single line keeps going past the edge of its box, so it ends in an ellipsis.</div>\n * @related text — Body typography that this truncates.\n */\n.pfx-truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: var(--instui-component-truncate-text-font-family);\n  line-height: var(--instui-component-truncate-text-line-height);\n}\n.pfx-truncate.-lines {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--lines, 2);\n  line-clamp: var(--lines, 2);\n  white-space: normal;\n  overflow: hidden;\n}\n",
-	"canvas": "/**\n * @component truncate\n * @summary Single-line ellipsis truncation, or a multi-line clamp via `--lines`.\n * @remarks The `-lines` clamp switches to `display: -webkit-box` and reads the `--lines` custom property, so the text wraps to that many lines before it ends in an ellipsis.\n * @modifier -lines — Multi-line clamp; set the line count via the `--lines` custom property (default 2).\n * @compat The `-lines` clamp relies on `-webkit-line-clamp` with `display: -webkit-box`, paired with the standard `line-clamp`.\n * @example\n * <div class=\"pfx-truncate\">This single line keeps going past the edge of its box, so it ends in an ellipsis.</div>\n * @related text — Body typography that this truncates.\n */\n.pfx-truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: var(--instui-component-truncate-text-font-family);\n  line-height: var(--instui-component-truncate-text-line-height);\n}\n.pfx-truncate.-lines {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--lines, 2);\n  line-clamp: var(--lines, 2);\n  white-space: normal;\n  overflow: hidden;\n}\n",
-	"canvasHighContrast": "/**\n * @component truncate\n * @summary Single-line ellipsis truncation, or a multi-line clamp via `--lines`.\n * @remarks The `-lines` clamp switches to `display: -webkit-box` and reads the `--lines` custom property, so the text wraps to that many lines before it ends in an ellipsis.\n * @modifier -lines — Multi-line clamp; set the line count via the `--lines` custom property (default 2).\n * @compat The `-lines` clamp relies on `-webkit-line-clamp` with `display: -webkit-box`, paired with the standard `line-clamp`.\n * @example\n * <div class=\"pfx-truncate\">This single line keeps going past the edge of its box, so it ends in an ellipsis.</div>\n * @related text — Body typography that this truncates.\n */\n.pfx-truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: var(--instui-component-truncate-text-font-family);\n  line-height: var(--instui-component-truncate-text-line-height);\n}\n.pfx-truncate.-lines {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--lines, 2);\n  line-clamp: var(--lines, 2);\n  white-space: normal;\n  overflow: hidden;\n}\n"
-}.rebrand;
 const icon$1 = {
-	"rebrand": "/**\n * @utility icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @modifier -icon-* — Set the glyph token (`--pantoken-glyph`) and render it via the shared painter (for example `-icon-search`).\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n.pfx-icon {\n  display: inline-flex;\n}\n\n[class*=\"-icon-\"]::before {\n  content: \"\";\n  display: inline-block;\n  inline-size: 1em;\n  block-size: 1em;\n  flex: none;\n  vertical-align: -0.125em;\n  background: currentColor;\n  -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n  mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n",
-	"canvas": "/**\n * @utility icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @modifier -icon-* — Set the glyph token (`--pantoken-glyph`) and render it via the shared painter (for example `-icon-search`).\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n.pfx-icon {\n  display: inline-flex;\n}\n\n[class*=\"-icon-\"]::before {\n  content: \"\";\n  display: inline-block;\n  inline-size: 1em;\n  block-size: 1em;\n  flex: none;\n  vertical-align: -0.125em;\n  background: currentColor;\n  -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n  mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n",
-	"canvasHighContrast": "/**\n * @utility icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @modifier -icon-* — Set the glyph token (`--pantoken-glyph`) and render it via the shared painter (for example `-icon-search`).\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n.pfx-icon {\n  display: inline-flex;\n}\n\n[class*=\"-icon-\"]::before {\n  content: \"\";\n  display: inline-block;\n  inline-size: 1em;\n  block-size: 1em;\n  flex: none;\n  vertical-align: -0.125em;\n  background: currentColor;\n  -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n  mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n"
-}.rebrand;
-const mask$1 = {
-	"rebrand": "/**\n * @utility mask\n * @summary An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native `<dialog>` (its `::backdrop` is the mask).\n * @modifier -fullscreen — Fixed to the viewport, covering it at a high z-index.\n * @modifier -blur — Blur what's behind the mask with a backdrop-filter.\n * @example\n * <div style=\"position: relative\">\n *   <div class=\"instui-mask\">\n *     <span class=\"instui-spinner\"></span>\n *   </div>\n * </div>\n */\n/* An in-flow overlay for non-modal cases (e.g. a spinner over a card). For a modal, prefer a native\n   <dialog>: its ::backdrop is the mask and reuses the same `--instui-component-mask-background-color`\n   token (see modalRules). */\n.pfx-mask {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--instui-component-mask-background-color);\n}\n.pfx-mask.-fullscreen {\n  position: fixed;\n  z-index: 999;\n}\n.pfx-mask.-blur {\n  backdrop-filter: blur(0.5rem);\n}\n",
-	"canvas": "/**\n * @utility mask\n * @summary An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native `<dialog>` (its `::backdrop` is the mask).\n * @modifier -fullscreen — Fixed to the viewport, covering it at a high z-index.\n * @modifier -blur — Blur what's behind the mask with a backdrop-filter.\n * @example\n * <div style=\"position: relative\">\n *   <div class=\"instui-mask\">\n *     <span class=\"instui-spinner\"></span>\n *   </div>\n * </div>\n */\n/* An in-flow overlay for non-modal cases (e.g. a spinner over a card). For a modal, prefer a native\n   <dialog>: its ::backdrop is the mask and reuses the same `--instui-component-mask-background-color`\n   token (see modalRules). */\n.pfx-mask {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--instui-component-mask-background-color);\n}\n.pfx-mask.-fullscreen {\n  position: fixed;\n  z-index: 999;\n}\n.pfx-mask.-blur {\n  backdrop-filter: blur(0.5rem);\n}\n",
-	"canvasHighContrast": "/**\n * @utility mask\n * @summary An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native `<dialog>` (its `::backdrop` is the mask).\n * @modifier -fullscreen — Fixed to the viewport, covering it at a high z-index.\n * @modifier -blur — Blur what's behind the mask with a backdrop-filter.\n * @example\n * <div style=\"position: relative\">\n *   <div class=\"instui-mask\">\n *     <span class=\"instui-spinner\"></span>\n *   </div>\n * </div>\n */\n/* An in-flow overlay for non-modal cases (e.g. a spinner over a card). For a modal, prefer a native\n   <dialog>: its ::backdrop is the mask and reuses the same `--instui-component-mask-background-color`\n   token (see modalRules). */\n.pfx-mask {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--instui-component-mask-background-color);\n}\n.pfx-mask.-fullscreen {\n  position: fixed;\n  z-index: 999;\n}\n.pfx-mask.-blur {\n  backdrop-filter: blur(0.5rem);\n}\n"
+	"rebrand": "/**\n * @utility icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @modifier -icon-* — Set the glyph token (`--pantoken-glyph`) and render it via the shared painter (for example `-icon-search`).\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n.pfx-icon, .-icon-icon, .-icon {\n  display: inline-flex;\n}\n\n[class*=\"-icon-\"]::before {\n  content: \"\";\n  display: inline-block;\n  inline-size: 1em;\n  block-size: 1em;\n  flex: none;\n  vertical-align: -0.125em;\n  background: currentColor;\n  -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n  mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n",
+	"canvas": "/**\n * @utility icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @modifier -icon-* — Set the glyph token (`--pantoken-glyph`) and render it via the shared painter (for example `-icon-search`).\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n.pfx-icon, .-icon-icon, .-icon {\n  display: inline-flex;\n}\n\n[class*=\"-icon-\"]::before {\n  content: \"\";\n  display: inline-block;\n  inline-size: 1em;\n  block-size: 1em;\n  flex: none;\n  vertical-align: -0.125em;\n  background: currentColor;\n  -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n  mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n",
+	"canvasHighContrast": "/**\n * @utility icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @modifier -icon-* — Set the glyph token (`--pantoken-glyph`) and render it via the shared painter (for example `-icon-search`).\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n.pfx-icon, .-icon-icon, .-icon {\n  display: inline-flex;\n}\n\n[class*=\"-icon-\"]::before {\n  content: \"\";\n  display: inline-block;\n  inline-size: 1em;\n  block-size: 1em;\n  flex: none;\n  vertical-align: -0.125em;\n  background: currentColor;\n  -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n  mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n"
 }.rebrand;
 const screenReaderContent$1 = {
-	"rebrand": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern is intentionally repeated in component modifier rules for individual importability */\n.pfx-screen-reader-content {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
-	"canvas": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern is intentionally repeated in component modifier rules for individual importability */\n.pfx-screen-reader-content {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
-	"canvasHighContrast": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern is intentionally repeated in component modifier rules for individual importability */\n.pfx-screen-reader-content {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"
+	"rebrand": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @selector .pfx-screen-reader-content\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * ```html\n * <a class=\"instui-link\" href=\"#examples\" target=\"_blank\">example</a>\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n * ```\n */\n.pfx-screen-reader-content, .-screen-reader-content {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
+	"canvas": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @selector .pfx-screen-reader-content\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * ```html\n * <a class=\"instui-link\" href=\"#examples\" target=\"_blank\">example</a>\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n * ```\n */\n.pfx-screen-reader-content, .-screen-reader-content {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
+	"canvasHighContrast": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @selector .pfx-screen-reader-content\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * ```html\n * <a class=\"instui-link\" href=\"#examples\" target=\"_blank\">example</a>\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n * ```\n */\n.pfx-screen-reader-content, .-screen-reader-content {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"
+}.rebrand;
+const transition$1 = {
+	"rebrand": "/**\n * @utility transition\n * @selector .instui-transition.-transition-fade-entering\n * @modifier -transition-* — Transition type/state class toggled by runtime (`fade|scale|slide-*` + `entering|entered|exiting|exited`).\n * @global\n * @summary Animation state classes for the `Transition` component — `.instui-transition` and state classes (`-transition-fade-entering`, `-transition-scale-exited`, etc.) — usable bare or chained onto any component.\n * @cssproperty --duration — Animation duration (default `300ms`); override to speed up or slow down every transition state.\n * @cssproperty --timing — Animation timing function (default `ease-in-out`).\n * @example\n * <div class=\"instui-transition -transition-fade-entering\">Animated content</div>\n */\n@property --duration {\n  syntax: \"<time>\";\n  inherits: true;\n  initial-value: 300ms;\n}\n\n@property --timing {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: ease-in-out;\n}\n\n.pfx-transition, .-transition-transition, .-transition {\n  transition:\n    opacity var(--duration) var(--timing),\n    transform var(--duration) var(--timing);\n}\n\n.pfx-transition.-transition-fade-exiting,\n.-transition-transition-fade-exiting,\n.-transition-fade-exiting,\n.pfx-transition.-transition-fade-exited,\n.-transition-transition-fade-exited,\n.-transition-fade-exited {\n  opacity: 0.01;\n}\n\n.pfx-transition.-transition-fade-entering,\n.-transition-transition-fade-entering,\n.-transition-fade-entering,\n.pfx-transition.-transition-fade-entered,\n.-transition-transition-fade-entered,\n.-transition-fade-entered {\n  opacity: 1;\n}\n\n.pfx-transition.-transition-scale-exiting,\n.-transition-transition-scale-exiting,\n.-transition-scale-exiting,\n.pfx-transition.-transition-scale-exited,\n.-transition-transition-scale-exited,\n.-transition-scale-exited {\n  transform: scale(0.01) translate3d(0, 0, 0);\n  opacity: 0.01;\n}\n\n.pfx-transition.-transition-scale-entering,\n.-transition-transition-scale-entering,\n.-transition-scale-entering,\n.pfx-transition.-transition-scale-entered,\n.-transition-transition-scale-entered,\n.-transition-scale-entered {\n  transform: scale(1) translate3d(0, 0, 0);\n  opacity: 1;\n}\n\n.pfx-transition.-transition-slide-right-exited,\n.-transition-transition-slide-right-exited,\n.-transition-slide-right-exited,\n.pfx-transition.-transition-slide-left-exited,\n.-transition-transition-slide-left-exited,\n.-transition-slide-left-exited,\n.pfx-transition.-transition-slide-up-exited,\n.-transition-transition-slide-up-exited,\n.-transition-slide-up-exited,\n.pfx-transition.-transition-slide-down-exited,\n.-transition-transition-slide-down-exited,\n.-transition-slide-down-exited {\n  opacity: 0.01;\n}\n\n.pfx-transition.-transition-slide-right-exiting,\n.-transition-transition-slide-right-exiting,\n.-transition-slide-right-exiting,\n.pfx-transition.-transition-slide-right-exited,\n.-transition-transition-slide-right-exited,\n.-transition-slide-right-exited {\n  transform: translate3d(100%, 0, 0);\n}\n\n.pfx-transition.-transition-slide-left-exiting,\n.-transition-transition-slide-left-exiting,\n.-transition-slide-left-exiting,\n.pfx-transition.-transition-slide-left-exited,\n.-transition-transition-slide-left-exited,\n.-transition-slide-left-exited {\n  transform: translate3d(-100%, 0, 0);\n}\n\n.pfx-transition.-transition-slide-up-exiting,\n.-transition-transition-slide-up-exiting,\n.-transition-slide-up-exiting,\n.pfx-transition.-transition-slide-up-exited,\n.-transition-transition-slide-up-exited,\n.-transition-slide-up-exited {\n  transform: translate3d(0, -100%, 0);\n}\n\n.pfx-transition.-transition-slide-down-exiting,\n.-transition-transition-slide-down-exiting,\n.-transition-slide-down-exiting,\n.pfx-transition.-transition-slide-down-exited,\n.-transition-transition-slide-down-exited,\n.-transition-slide-down-exited {\n  transform: translate3d(0, 100%, 0);\n}\n\n.pfx-transition.-transition-slide-right-entering,\n.-transition-transition-slide-right-entering,\n.-transition-slide-right-entering,\n.pfx-transition.-transition-slide-left-entering,\n.-transition-transition-slide-left-entering,\n.-transition-slide-left-entering,\n.pfx-transition.-transition-slide-up-entering,\n.-transition-transition-slide-up-entering,\n.-transition-slide-up-entering,\n.pfx-transition.-transition-slide-down-entering,\n.-transition-transition-slide-down-entering,\n.-transition-slide-down-entering,\n.pfx-transition.-transition-slide-right-entered,\n.-transition-transition-slide-right-entered,\n.-transition-slide-right-entered,\n.pfx-transition.-transition-slide-left-entered,\n.-transition-transition-slide-left-entered,\n.-transition-slide-left-entered,\n.pfx-transition.-transition-slide-up-entered,\n.-transition-transition-slide-up-entered,\n.-transition-slide-up-entered,\n.pfx-transition.-transition-slide-down-entered,\n.-transition-transition-slide-down-entered,\n.-transition-slide-down-entered {\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n",
+	"canvas": "/**\n * @utility transition\n * @selector .instui-transition.-transition-fade-entering\n * @modifier -transition-* — Transition type/state class toggled by runtime (`fade|scale|slide-*` + `entering|entered|exiting|exited`).\n * @global\n * @summary Animation state classes for the `Transition` component — `.instui-transition` and state classes (`-transition-fade-entering`, `-transition-scale-exited`, etc.) — usable bare or chained onto any component.\n * @cssproperty --duration — Animation duration (default `300ms`); override to speed up or slow down every transition state.\n * @cssproperty --timing — Animation timing function (default `ease-in-out`).\n * @example\n * <div class=\"instui-transition -transition-fade-entering\">Animated content</div>\n */\n@property --duration {\n  syntax: \"<time>\";\n  inherits: true;\n  initial-value: 300ms;\n}\n\n@property --timing {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: ease-in-out;\n}\n\n.pfx-transition, .-transition-transition, .-transition {\n  transition:\n    opacity var(--duration) var(--timing),\n    transform var(--duration) var(--timing);\n}\n\n.pfx-transition.-transition-fade-exiting,\n.-transition-transition-fade-exiting,\n.-transition-fade-exiting,\n.pfx-transition.-transition-fade-exited,\n.-transition-transition-fade-exited,\n.-transition-fade-exited {\n  opacity: 0.01;\n}\n\n.pfx-transition.-transition-fade-entering,\n.-transition-transition-fade-entering,\n.-transition-fade-entering,\n.pfx-transition.-transition-fade-entered,\n.-transition-transition-fade-entered,\n.-transition-fade-entered {\n  opacity: 1;\n}\n\n.pfx-transition.-transition-scale-exiting,\n.-transition-transition-scale-exiting,\n.-transition-scale-exiting,\n.pfx-transition.-transition-scale-exited,\n.-transition-transition-scale-exited,\n.-transition-scale-exited {\n  transform: scale(0.01) translate3d(0, 0, 0);\n  opacity: 0.01;\n}\n\n.pfx-transition.-transition-scale-entering,\n.-transition-transition-scale-entering,\n.-transition-scale-entering,\n.pfx-transition.-transition-scale-entered,\n.-transition-transition-scale-entered,\n.-transition-scale-entered {\n  transform: scale(1) translate3d(0, 0, 0);\n  opacity: 1;\n}\n\n.pfx-transition.-transition-slide-right-exited,\n.-transition-transition-slide-right-exited,\n.-transition-slide-right-exited,\n.pfx-transition.-transition-slide-left-exited,\n.-transition-transition-slide-left-exited,\n.-transition-slide-left-exited,\n.pfx-transition.-transition-slide-up-exited,\n.-transition-transition-slide-up-exited,\n.-transition-slide-up-exited,\n.pfx-transition.-transition-slide-down-exited,\n.-transition-transition-slide-down-exited,\n.-transition-slide-down-exited {\n  opacity: 0.01;\n}\n\n.pfx-transition.-transition-slide-right-exiting,\n.-transition-transition-slide-right-exiting,\n.-transition-slide-right-exiting,\n.pfx-transition.-transition-slide-right-exited,\n.-transition-transition-slide-right-exited,\n.-transition-slide-right-exited {\n  transform: translate3d(100%, 0, 0);\n}\n\n.pfx-transition.-transition-slide-left-exiting,\n.-transition-transition-slide-left-exiting,\n.-transition-slide-left-exiting,\n.pfx-transition.-transition-slide-left-exited,\n.-transition-transition-slide-left-exited,\n.-transition-slide-left-exited {\n  transform: translate3d(-100%, 0, 0);\n}\n\n.pfx-transition.-transition-slide-up-exiting,\n.-transition-transition-slide-up-exiting,\n.-transition-slide-up-exiting,\n.pfx-transition.-transition-slide-up-exited,\n.-transition-transition-slide-up-exited,\n.-transition-slide-up-exited {\n  transform: translate3d(0, -100%, 0);\n}\n\n.pfx-transition.-transition-slide-down-exiting,\n.-transition-transition-slide-down-exiting,\n.-transition-slide-down-exiting,\n.pfx-transition.-transition-slide-down-exited,\n.-transition-transition-slide-down-exited,\n.-transition-slide-down-exited {\n  transform: translate3d(0, 100%, 0);\n}\n\n.pfx-transition.-transition-slide-right-entering,\n.-transition-transition-slide-right-entering,\n.-transition-slide-right-entering,\n.pfx-transition.-transition-slide-left-entering,\n.-transition-transition-slide-left-entering,\n.-transition-slide-left-entering,\n.pfx-transition.-transition-slide-up-entering,\n.-transition-transition-slide-up-entering,\n.-transition-slide-up-entering,\n.pfx-transition.-transition-slide-down-entering,\n.-transition-transition-slide-down-entering,\n.-transition-slide-down-entering,\n.pfx-transition.-transition-slide-right-entered,\n.-transition-transition-slide-right-entered,\n.-transition-slide-right-entered,\n.pfx-transition.-transition-slide-left-entered,\n.-transition-transition-slide-left-entered,\n.-transition-slide-left-entered,\n.pfx-transition.-transition-slide-up-entered,\n.-transition-transition-slide-up-entered,\n.-transition-slide-up-entered,\n.pfx-transition.-transition-slide-down-entered,\n.-transition-transition-slide-down-entered,\n.-transition-slide-down-entered {\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n",
+	"canvasHighContrast": "/**\n * @utility transition\n * @selector .instui-transition.-transition-fade-entering\n * @modifier -transition-* — Transition type/state class toggled by runtime (`fade|scale|slide-*` + `entering|entered|exiting|exited`).\n * @global\n * @summary Animation state classes for the `Transition` component — `.instui-transition` and state classes (`-transition-fade-entering`, `-transition-scale-exited`, etc.) — usable bare or chained onto any component.\n * @cssproperty --duration — Animation duration (default `300ms`); override to speed up or slow down every transition state.\n * @cssproperty --timing — Animation timing function (default `ease-in-out`).\n * @example\n * <div class=\"instui-transition -transition-fade-entering\">Animated content</div>\n */\n@property --duration {\n  syntax: \"<time>\";\n  inherits: true;\n  initial-value: 300ms;\n}\n\n@property --timing {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: ease-in-out;\n}\n\n.pfx-transition, .-transition-transition, .-transition {\n  transition:\n    opacity var(--duration) var(--timing),\n    transform var(--duration) var(--timing);\n}\n\n.pfx-transition.-transition-fade-exiting,\n.-transition-transition-fade-exiting,\n.-transition-fade-exiting,\n.pfx-transition.-transition-fade-exited,\n.-transition-transition-fade-exited,\n.-transition-fade-exited {\n  opacity: 0.01;\n}\n\n.pfx-transition.-transition-fade-entering,\n.-transition-transition-fade-entering,\n.-transition-fade-entering,\n.pfx-transition.-transition-fade-entered,\n.-transition-transition-fade-entered,\n.-transition-fade-entered {\n  opacity: 1;\n}\n\n.pfx-transition.-transition-scale-exiting,\n.-transition-transition-scale-exiting,\n.-transition-scale-exiting,\n.pfx-transition.-transition-scale-exited,\n.-transition-transition-scale-exited,\n.-transition-scale-exited {\n  transform: scale(0.01) translate3d(0, 0, 0);\n  opacity: 0.01;\n}\n\n.pfx-transition.-transition-scale-entering,\n.-transition-transition-scale-entering,\n.-transition-scale-entering,\n.pfx-transition.-transition-scale-entered,\n.-transition-transition-scale-entered,\n.-transition-scale-entered {\n  transform: scale(1) translate3d(0, 0, 0);\n  opacity: 1;\n}\n\n.pfx-transition.-transition-slide-right-exited,\n.-transition-transition-slide-right-exited,\n.-transition-slide-right-exited,\n.pfx-transition.-transition-slide-left-exited,\n.-transition-transition-slide-left-exited,\n.-transition-slide-left-exited,\n.pfx-transition.-transition-slide-up-exited,\n.-transition-transition-slide-up-exited,\n.-transition-slide-up-exited,\n.pfx-transition.-transition-slide-down-exited,\n.-transition-transition-slide-down-exited,\n.-transition-slide-down-exited {\n  opacity: 0.01;\n}\n\n.pfx-transition.-transition-slide-right-exiting,\n.-transition-transition-slide-right-exiting,\n.-transition-slide-right-exiting,\n.pfx-transition.-transition-slide-right-exited,\n.-transition-transition-slide-right-exited,\n.-transition-slide-right-exited {\n  transform: translate3d(100%, 0, 0);\n}\n\n.pfx-transition.-transition-slide-left-exiting,\n.-transition-transition-slide-left-exiting,\n.-transition-slide-left-exiting,\n.pfx-transition.-transition-slide-left-exited,\n.-transition-transition-slide-left-exited,\n.-transition-slide-left-exited {\n  transform: translate3d(-100%, 0, 0);\n}\n\n.pfx-transition.-transition-slide-up-exiting,\n.-transition-transition-slide-up-exiting,\n.-transition-slide-up-exiting,\n.pfx-transition.-transition-slide-up-exited,\n.-transition-transition-slide-up-exited,\n.-transition-slide-up-exited {\n  transform: translate3d(0, -100%, 0);\n}\n\n.pfx-transition.-transition-slide-down-exiting,\n.-transition-transition-slide-down-exiting,\n.-transition-slide-down-exiting,\n.pfx-transition.-transition-slide-down-exited,\n.-transition-transition-slide-down-exited,\n.-transition-slide-down-exited {\n  transform: translate3d(0, 100%, 0);\n}\n\n.pfx-transition.-transition-slide-right-entering,\n.-transition-transition-slide-right-entering,\n.-transition-slide-right-entering,\n.pfx-transition.-transition-slide-left-entering,\n.-transition-transition-slide-left-entering,\n.-transition-slide-left-entering,\n.pfx-transition.-transition-slide-up-entering,\n.-transition-transition-slide-up-entering,\n.-transition-slide-up-entering,\n.pfx-transition.-transition-slide-down-entering,\n.-transition-transition-slide-down-entering,\n.-transition-slide-down-entering,\n.pfx-transition.-transition-slide-right-entered,\n.-transition-transition-slide-right-entered,\n.-transition-slide-right-entered,\n.pfx-transition.-transition-slide-left-entered,\n.-transition-transition-slide-left-entered,\n.-transition-slide-left-entered,\n.pfx-transition.-transition-slide-up-entered,\n.-transition-transition-slide-up-entered,\n.-transition-slide-up-entered,\n.pfx-transition.-transition-slide-down-entered,\n.-transition-transition-slide-down-entered,\n.-transition-slide-down-entered {\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n"
+}.rebrand;
+const visualDebug$1 = {
+	"rebrand": "/**\n * @utility visual-debug\n * @selector .-with-visual-debug\n * @global\n * @summary A layout-debugging outline: compound `.-with-visual-debug` onto any element to outline the box and its immediate children, so a layout's structure is visible at a glance.\n * @cssproperty --pantoken-visual-debug-color — The outline colour (default a bright magenta); retint it to change every debug outline.\n * @example\n * <div class=\"instui-view -with-visual-debug\">\n *   <span>Outlined child.</span>\n * </div>\n */\n.-with-visual-debug {\n  outline: 0.0625rem solid var(--pantoken-visual-debug-color, #f42272);\n}\n\n.-with-visual-debug > * {\n  outline: 0.0625rem dashed var(--pantoken-visual-debug-color, #f42272);\n}\n",
+	"canvas": "/**\n * @utility visual-debug\n * @selector .-with-visual-debug\n * @global\n * @summary A layout-debugging outline: compound `.-with-visual-debug` onto any element to outline the box and its immediate children, so a layout's structure is visible at a glance.\n * @cssproperty --pantoken-visual-debug-color — The outline colour (default a bright magenta); retint it to change every debug outline.\n * @example\n * <div class=\"instui-view -with-visual-debug\">\n *   <span>Outlined child.</span>\n * </div>\n */\n.-with-visual-debug {\n  outline: 0.0625rem solid var(--pantoken-visual-debug-color, #f42272);\n}\n\n.-with-visual-debug > * {\n  outline: 0.0625rem dashed var(--pantoken-visual-debug-color, #f42272);\n}\n",
+	"canvasHighContrast": "/**\n * @utility visual-debug\n * @selector .-with-visual-debug\n * @global\n * @summary A layout-debugging outline: compound `.-with-visual-debug` onto any element to outline the box and its immediate children, so a layout's structure is visible at a glance.\n * @cssproperty --pantoken-visual-debug-color — The outline colour (default a bright magenta); retint it to change every debug outline.\n * @example\n * <div class=\"instui-view -with-visual-debug\">\n *   <span>Outlined child.</span>\n * </div>\n */\n.-with-visual-debug {\n  outline: 0.0625rem solid var(--pantoken-visual-debug-color, #f42272);\n}\n\n.-with-visual-debug > * {\n  outline: 0.0625rem dashed var(--pantoken-visual-debug-color, #f42272);\n}\n"
 }.rebrand;
 const base$1 = {
-	"rebrand": "/**\n * @rule base\n * @class *\n * @summary The opt-in global reset: `box-sizing`, the page surface, base text colour and font, `color-scheme`, and link defaults.\n * @pseudo ::before — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::after — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::selection — Tints highlighted text with a translucent primary navigation colour.\n * @example\n * <html>\n *   <body>\n *     <a href=\"/\">A styled link on the base surface.</a>\n *   </body>\n * </html>\n */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n:where(html) {\n  color-scheme: light dark;\n  background: var(--instui-color-background-page);\n  color: var(--instui-color-text-base);\n  font-family: var(--instui-font-family-base);\n  font-size: var(--instui-component-text-content-font-size);\n  line-height: var(--instui-component-text-content-line-height);\n  -webkit-text-size-adjust: 100%;\n  text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n:where(body) {\n  margin: 0;\n}\n:where(a) {\n  color: var(--instui-color-text-interactive-navigation-primary-base);\n  text-decoration: underline;\n}\n:where(a:hover) {\n  color: var(--instui-color-text-interactive-navigation-primary-hover);\n}\n::selection {\n  background: color-mix(\n    in srgb,\n    var(--instui-color-text-interactive-navigation-primary-base) 25%,\n    transparent\n  );\n}\n",
-	"canvas": "/**\n * @rule base\n * @class *\n * @summary The opt-in global reset: `box-sizing`, the page surface, base text colour and font, `color-scheme`, and link defaults.\n * @pseudo ::before — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::after — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::selection — Tints highlighted text with a translucent primary navigation colour.\n * @example\n * <html>\n *   <body>\n *     <a href=\"/\">A styled link on the base surface.</a>\n *   </body>\n * </html>\n */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n:where(html) {\n  color-scheme: light dark;\n  background: var(--instui-color-background-page);\n  color: var(--instui-color-text-base);\n  font-family: var(--instui-font-family-base);\n  font-size: var(--instui-component-text-content-font-size);\n  line-height: var(--instui-component-text-content-line-height);\n  -webkit-text-size-adjust: 100%;\n  text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n:where(body) {\n  margin: 0;\n}\n:where(a) {\n  color: var(--instui-color-text-interactive-navigation-primary-base);\n  text-decoration: underline;\n}\n:where(a:hover) {\n  color: var(--instui-color-text-interactive-navigation-primary-hover);\n}\n::selection {\n  background: color-mix(\n    in srgb,\n    var(--instui-color-text-interactive-navigation-primary-base) 25%,\n    transparent\n  );\n}\n",
-	"canvasHighContrast": "/**\n * @rule base\n * @class *\n * @summary The opt-in global reset: `box-sizing`, the page surface, base text colour and font, `color-scheme`, and link defaults.\n * @pseudo ::before — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::after — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::selection — Tints highlighted text with a translucent primary navigation colour.\n * @example\n * <html>\n *   <body>\n *     <a href=\"/\">A styled link on the base surface.</a>\n *   </body>\n * </html>\n */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n:where(html) {\n  color-scheme: light dark;\n  background: var(--instui-color-background-page);\n  color: var(--instui-color-text-base);\n  font-family: var(--instui-font-family-base);\n  font-size: var(--instui-component-text-content-font-size);\n  line-height: var(--instui-component-text-content-line-height);\n  -webkit-text-size-adjust: 100%;\n  text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n:where(body) {\n  margin: 0;\n}\n:where(a) {\n  color: var(--instui-color-text-interactive-navigation-primary-base);\n  text-decoration: underline;\n}\n:where(a:hover) {\n  color: var(--instui-color-text-interactive-navigation-primary-hover);\n}\n::selection {\n  background: color-mix(\n    in srgb,\n    var(--instui-color-text-interactive-navigation-primary-base) 25%,\n    transparent\n  );\n}\n"
+	"rebrand": "/**\n * @rule base\n * @selector *\n * @summary The opt-in global reset: `box-sizing`, the page surface, base text colour and font, `color-scheme`, and link defaults.\n * @pseudo ::before — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::after — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::selection — Tints highlighted text with a translucent primary navigation colour.\n * @example\n * <html>\n *   <body>\n *     <a href=\"/\">A styled link on the base surface.</a>\n *   </body>\n * </html>\n */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:where(html) {\n  color-scheme: light dark;\n  background: var(--instui-color-background-page);\n  color: var(--instui-color-text-base);\n  font-family: var(--instui-font-family-base);\n  font-size: var(--instui-component-text-content-font-size);\n  line-height: var(--instui-component-text-content-line-height);\n  -webkit-text-size-adjust: 100%;\n  text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n\n:where(body) {\n  margin: 0;\n}\n\n:where(a) {\n  color: var(--instui-color-text-interactive-navigation-primary-base);\n  text-decoration: underline;\n}\n\n:where(a:hover) {\n  color: var(--instui-color-text-interactive-navigation-primary-hover);\n}\n\n::selection {\n  background: color-mix(\n    in srgb,\n    var(--instui-color-text-interactive-navigation-primary-base) 25%,\n    transparent\n  );\n}\n",
+	"canvas": "/**\n * @rule base\n * @selector *\n * @summary The opt-in global reset: `box-sizing`, the page surface, base text colour and font, `color-scheme`, and link defaults.\n * @pseudo ::before — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::after — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::selection — Tints highlighted text with a translucent primary navigation colour.\n * @example\n * <html>\n *   <body>\n *     <a href=\"/\">A styled link on the base surface.</a>\n *   </body>\n * </html>\n */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:where(html) {\n  color-scheme: light dark;\n  background: var(--instui-color-background-page);\n  color: var(--instui-color-text-base);\n  font-family: var(--instui-font-family-base);\n  font-size: var(--instui-component-text-content-font-size);\n  line-height: var(--instui-component-text-content-line-height);\n  -webkit-text-size-adjust: 100%;\n  text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n\n:where(body) {\n  margin: 0;\n}\n\n:where(a) {\n  color: var(--instui-color-text-interactive-navigation-primary-base);\n  text-decoration: underline;\n}\n\n:where(a:hover) {\n  color: var(--instui-color-text-interactive-navigation-primary-hover);\n}\n\n::selection {\n  background: color-mix(\n    in srgb,\n    var(--instui-color-text-interactive-navigation-primary-base) 25%,\n    transparent\n  );\n}\n",
+	"canvasHighContrast": "/**\n * @rule base\n * @selector *\n * @summary The opt-in global reset: `box-sizing`, the page surface, base text colour and font, `color-scheme`, and link defaults.\n * @pseudo ::before — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::after — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::selection — Tints highlighted text with a translucent primary navigation colour.\n * @example\n * <html>\n *   <body>\n *     <a href=\"/\">A styled link on the base surface.</a>\n *   </body>\n * </html>\n */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:where(html) {\n  color-scheme: light dark;\n  background: var(--instui-color-background-page);\n  color: var(--instui-color-text-base);\n  font-family: var(--instui-font-family-base);\n  font-size: var(--instui-component-text-content-font-size);\n  line-height: var(--instui-component-text-content-line-height);\n  -webkit-text-size-adjust: 100%;\n  text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n}\n\n:where(body) {\n  margin: 0;\n}\n\n:where(a) {\n  color: var(--instui-color-text-interactive-navigation-primary-base);\n  text-decoration: underline;\n}\n\n:where(a:hover) {\n  color: var(--instui-color-text-interactive-navigation-primary-hover);\n}\n\n::selection {\n  background: color-mix(\n    in srgb,\n    var(--instui-color-text-interactive-navigation-primary-base) 25%,\n    transparent\n  );\n}\n"
 }.rebrand;
 //#endregion
-//#region src/utilities/icon.ts
+//#region src/utilities/icon/index.ts
 /** The icon utility — `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph, with the prefix sentinel replaced. */
 const icon = defineUtility({
 	name: "icon",
@@ -537,16 +650,7 @@ const icon = defineUtility({
 /** The icon utility as a standalone, header-wrapped stylesheet. */
 const iconCss = icon.css;
 //#endregion
-//#region src/utilities/mask.ts
-/** The mask utility — an in-flow overlay that fills its positioned parent and centres its content, with the prefix sentinel replaced. */
-const mask = defineUtility({
-	name: "mask",
-	css: (p) => mask$1.replaceAll(SENTINEL, p)
-});
-/** The mask utility as a standalone, header-wrapped stylesheet. */
-const maskCss = mask.css;
-//#endregion
-//#region src/utilities/screen-reader-content.ts
+//#region src/utilities/screen-reader-content/index.ts
 /** The screen-reader-content utility — visually hides content while keeping it available to assistive tech, with the prefix sentinel replaced. */
 const screenReaderContent = defineUtility({
 	name: "screen-reader-content",
@@ -555,7 +659,7 @@ const screenReaderContent = defineUtility({
 /** The screen-reader-content utility as a standalone, header-wrapped stylesheet. */
 const screenReaderContentCss = screenReaderContent.css;
 //#endregion
-//#region src/components/alert.ts
+//#region src/components/alert/index.ts
 /** The `alert` component record: an inline message with a coloured status bar and a masked status glyph from the shared icon set. */
 const alert = defineComponent({
 	name: "alert",
@@ -564,7 +668,7 @@ const alert = defineComponent({
 /** Standalone `alert` stylesheet — the prefixed CSS for the status message, ready to ship as a `.css` file. */
 const alertCss = alert.css;
 //#endregion
-//#region src/components/avatar.ts
+//#region src/components/avatar/index.ts
 /** The `avatar` component record: a user avatar showing initials or an image, circular by default. */
 const avatar = defineComponent({
 	name: "avatar",
@@ -573,7 +677,7 @@ const avatar = defineComponent({
 /** Standalone `avatar` stylesheet — the prefixed CSS for the avatar, ready to ship as a `.css` file. */
 const avatarCss = avatar.css;
 //#endregion
-//#region src/components/badge.ts
+//#region src/components/badge/index.ts
 /** The `badge` component record: a small count or status dot pinned to a target's corner. */
 const badge = defineComponent({
 	name: "badge",
@@ -582,7 +686,7 @@ const badge = defineComponent({
 /** Standalone `badge` stylesheet — the prefixed CSS for the count-and-status badge, ready to ship as a `.css` file. */
 const badgeCss = badge.css;
 //#endregion
-//#region src/components/billboard.ts
+//#region src/components/billboard/index.ts
 /** The `billboard` component record: a large empty-state or call-to-action block with a hero graphic, a heading, and a message. */
 const billboard = defineComponent({
 	name: "billboard",
@@ -591,7 +695,7 @@ const billboard = defineComponent({
 /** Standalone `billboard` stylesheet — the prefixed CSS for the empty-state block, ready to ship as a `.css` file. */
 const billboardCss = billboard.css;
 //#endregion
-//#region src/components/breadcrumb.ts
+//#region src/components/breadcrumb/index.ts
 /** The `breadcrumb` component record: a navigation trail with `/` separators, ending on the current page. */
 const breadcrumb = defineComponent({
 	name: "breadcrumb",
@@ -600,6 +704,15 @@ const breadcrumb = defineComponent({
 /** Standalone `breadcrumb` stylesheet — the prefixed CSS for the breadcrumb trail, ready to ship as a `.css` file. */
 const breadcrumbCss = breadcrumb.css;
 //#endregion
+//#region src/components/breadcrumb/members/link/index.ts
+/** The `breadcrumb.link` member record: a crumb (InstUI `Breadcrumb.Link`). */
+const breadcrumbLink = defineComponent({
+	name: "breadcrumb.link",
+	css: (p) => breadcrumbLink$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `breadcrumb.link` stylesheet. */
+const breadcrumbLinkCss = breadcrumbLink.css;
+//#endregion
 //#region src/lib/css.ts
 /**
 * The `css` tagged-template — an identity tag that just returns the interpolated string. Authoring the
@@ -614,7 +727,7 @@ const breadcrumbCss = breadcrumb.css;
 /** Identity tagged-template: rebuild the string from the cooked chunks + interpolated values. */
 const css = (strings, ...values) => strings.reduce((out, chunk, i) => out + (i ? String(values[i - 1]) : "") + chunk, "");
 //#endregion
-//#region src/components/button.ts
+//#region src/components/button/index.ts
 /** The `button` component record: an accessible action control styled from the token palette, primary by default. */
 const button = defineComponent({
 	name: "button",
@@ -897,7 +1010,7 @@ const button = defineComponent({
 /** Standalone `button` stylesheet — the prefixed CSS for the action button, ready to ship as a `.css` file. */
 const buttonCss = button.css;
 //#endregion
-//#region src/components/byline.ts
+//#region src/components/byline/index.ts
 /** The `byline` component record: a media object pairing a hero figure with a title and a description. */
 const byline = defineComponent({
 	name: "byline",
@@ -906,7 +1019,7 @@ const byline = defineComponent({
 /** Standalone `byline` stylesheet — the prefixed CSS for the media object, ready to ship as a `.css` file. */
 const bylineCss = byline.css;
 //#endregion
-//#region src/components/calendar.ts
+//#region src/components/calendar/index.ts
 /** The `calendar` component record: a static month grid with navigation, weekday headers, and day cells. */
 const calendar = defineComponent({
 	name: "calendar",
@@ -915,7 +1028,16 @@ const calendar = defineComponent({
 /** Standalone `calendar` stylesheet — the prefixed CSS for the month grid, ready to ship as a `.css` file. */
 const calendarCss = calendar.css;
 //#endregion
-//#region src/components/checkbox.ts
+//#region src/components/calendar/members/day/index.ts
+/** The `calendar.day` member record: a day cell (InstUI `Calendar.Day`). */
+const calendarDay = defineComponent({
+	name: "calendar.day",
+	css: (p) => calendarDay$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `calendar.day` stylesheet. */
+const calendarDayCss = calendarDay.css;
+//#endregion
+//#region src/components/checkbox/index.ts
 /** The `checkbox` component record: a native checkbox with its label, or a switch via `-variant-toggle`. */
 const checkbox = defineComponent({
 	name: "checkbox",
@@ -924,7 +1046,7 @@ const checkbox = defineComponent({
 /** Standalone `checkbox` stylesheet — the prefixed CSS for the checkbox and switch, ready to ship as a `.css` file. */
 const checkboxCss = checkbox.css;
 //#endregion
-//#region src/components/close-button.ts
+//#region src/components/close-button/index.ts
 /** The `closeButton` component record: a transparent icon button that draws its own × glyph, in three sizes plus an inverse variant. */
 const closeButton = defineComponent({
 	name: "close-button",
@@ -933,7 +1055,7 @@ const closeButton = defineComponent({
 /** Standalone `closeButton` stylesheet — the prefixed CSS for the close button, ready to ship as a `.css` file. */
 const closeButtonCss = closeButton.css;
 //#endregion
-//#region src/components/context-view.ts
+//#region src/components/context-view/index.ts
 /** The `contextView` component record: an elevated callout with a caret, positionable on any side and usable as a native `[popover]`. */
 const contextView = defineComponent({
 	name: "context-view",
@@ -942,7 +1064,7 @@ 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/file-drop.ts
+//#region src/components/file-drop/index.ts
 /** The `fileDrop` component record: a file dropzone with hover, accepted, and rejected states. */
 const fileDrop = defineComponent({
 	name: "file-drop",
@@ -951,7 +1073,7 @@ const fileDrop = defineComponent({
 /** Standalone `fileDrop` stylesheet — the prefixed CSS for the file dropzone, ready to ship as a `.css` file. */
 const fileDropCss = fileDrop.css;
 //#endregion
-//#region src/components/form-field.ts
+//#region src/components/form-field/index.ts
 /** The `formField` component record: a wrapper pairing a label with its controls, in inline, required, or readonly layouts. */
 const formField = defineComponent({
 	name: "form-field",
@@ -960,7 +1082,7 @@ const formField = defineComponent({
 /** Standalone `formField` stylesheet — the prefixed CSS for the form-field wrapper, ready to ship as a `.css` file. */
 const formFieldCss = formField.css;
 //#endregion
-//#region src/components/form-field-group.ts
+//#region src/components/form-field-group/index.ts
 /** The `formFieldGroup` component record: a `<fieldset>` group with a legend, a column or inline layout, and configurable spacing. */
 const formFieldGroup = defineComponent({
 	name: "form-field-group",
@@ -969,7 +1091,7 @@ const formFieldGroup = defineComponent({
 /** Standalone `formFieldGroup` stylesheet — the prefixed CSS for the fieldset group, ready to ship as a `.css` file. */
 const formFieldGroupCss = formFieldGroup.css;
 //#endregion
-//#region src/components/form-field-messages.ts
+//#region src/components/form-field-messages/index.ts
 /** The `formFieldMessages` component record: field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success. */
 const formFieldMessages = defineComponent({
 	name: "form-field-messages",
@@ -1001,7 +1123,7 @@ const HEADING_LEVELS = [
 */
 const headingLevelRules = (selector) => HEADING_LEVELS.map((l) => `${selector(l)} { font-size: var(--instui-component-heading-${l}-font-size); font-weight: var(--instui-component-heading-${l}-font-weight); }`).join("\n");
 //#endregion
-//#region src/components/heading.ts
+//#region src/components/heading/index.ts
 /** The `heading` component record: heading typography from `-level-h1` through `-level-h6`. */
 const heading = defineComponent({
 	name: "heading",
@@ -1068,7 +1190,7 @@ ${headingLevelRules((l) => `.${p}heading.-level-${l}`)}
 /** Standalone `heading` stylesheet — the prefixed CSS for the heading type, ready to ship as a `.css` file. */
 const headingCss = heading.css;
 //#endregion
-//#region src/components/img.ts
+//#region src/components/img/index.ts
 /** The `img` component record: a styled `<img>` with stackable display, crop, and effect modifiers. */
 const img = defineComponent({
 	name: "img",
@@ -1077,7 +1199,7 @@ const img = defineComponent({
 /** Standalone `img` stylesheet — the prefixed CSS for the styled image, ready to ship as a `.css` file. */
 const imgCss = img.css;
 //#endregion
-//#region src/components/in-place-edit.ts
+//#region src/components/in-place-edit/index.ts
 /** The `inPlaceEdit` component record: a `[contenteditable]` that reads as text until focused, then shows input chrome. */
 const inPlaceEdit = defineComponent({
 	name: "in-place-edit",
@@ -1211,7 +1333,7 @@ ${root}.-size-lg { block-size: ${t("height-lg")}; padding-inline: ${t("padding-h
 `;
 }
 //#endregion
-//#region src/components/input-group.ts
+//#region src/components/input-group/index.ts
 /** The `inputGroup` component record: a facade around a text input with leading and trailing icon slots. */
 const inputGroup = defineComponent({
 	name: "input-group",
@@ -1241,7 +1363,7 @@ ${inputFacadeBase(p, "input-group")}
 /** Standalone `inputGroup` stylesheet — the prefixed CSS for the input group, ready to ship as a `.css` file. */
 const inputGroupCss = inputGroup.css;
 //#endregion
-//#region src/components/link.ts
+//#region src/components/link/index.ts
 /** The `link` component record: a styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms. */
 const link = defineComponent({
 	name: "link",
@@ -1250,7 +1372,7 @@ const link = defineComponent({
 /** Standalone `link` stylesheet — the prefixed CSS for the hyperlink, ready to ship as a `.css` file. */
 const linkCss = link.css;
 //#endregion
-//#region src/components/list.ts
+//#region src/components/list/index.ts
 /** The `list` component record: a list with token-driven item spacing. */
 const list = defineComponent({
 	name: "list",
@@ -1259,7 +1381,25 @@ const list = defineComponent({
 /** Standalone `list` stylesheet — the prefixed CSS for the spaced list, ready to ship as a `.css` file. */
 const listCss = list.css;
 //#endregion
-//#region src/components/menu.ts
+//#region src/components/list/members/item/index.ts
+/** The `list.item` member record: a list item (InstUI `List.Item`). */
+const listItem = defineComponent({
+	name: "list.item",
+	css: (p) => listItem$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `list.item` stylesheet. */
+const listItemCss = listItem.css;
+//#endregion
+//#region src/components/mask/index.ts
+/** The mask component — an in-flow overlay that fills its positioned parent and centres its content, with the prefix sentinel replaced. */
+const mask = defineComponent({
+	name: "mask",
+	css: (p) => mask$1.replaceAll(SENTINEL, p)
+});
+/** The mask component as a standalone, header-wrapped stylesheet. */
+const maskCss = mask.css;
+//#endregion
+//#region src/components/menu/index.ts
 /** The `menu` component record: a dropdown surface of items, groups, and separators. */
 const menu = defineComponent({
 	name: "menu",
@@ -1268,7 +1408,34 @@ const menu = defineComponent({
 /** Standalone `menu` stylesheet — the prefixed CSS for the dropdown menu, ready to ship as a `.css` file. */
 const menuCss = menu.css;
 //#endregion
-//#region src/components/metric.ts
+//#region src/components/menu/members/group/index.ts
+/** The `menu.group` member record: a labelled group heading (InstUI `Menu.Group`). */
+const menuGroup = defineComponent({
+	name: "menu.group",
+	css: (p) => menuGroup$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `menu.group` stylesheet. */
+const menuGroupCss = menuGroup.css;
+//#endregion
+//#region src/components/menu/members/item/index.ts
+/** The `menu.item` member record: a single menu entry (InstUI `Menu.Item`). */
+const menuItem = defineComponent({
+	name: "menu.item",
+	css: (p) => menuItem$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `menu.item` stylesheet — the prefixed CSS for a menu entry, ready to ship as a `.css` file. */
+const menuItemCss = menuItem.css;
+//#endregion
+//#region src/components/menu/members/separator/index.ts
+/** The `menu.separator` member record: a divider rule between items (InstUI `Menu.Separator`). */
+const menuSeparator = defineComponent({
+	name: "menu.separator",
+	css: (p) => menuSeparator$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `menu.separator` stylesheet. */
+const menuSeparatorCss = menuSeparator.css;
+//#endregion
+//#region src/components/metric/index.ts
 /** The `metric` component record: a labelled statistic — a large value above a caption. */
 const metric = defineComponent({
 	name: "metric",
@@ -1277,7 +1444,7 @@ const metric = defineComponent({
 /** Standalone `metric` stylesheet — the prefixed CSS for the statistic, ready to ship as a `.css` file. */
 const metricCss = metric.css;
 //#endregion
-//#region src/components/modal.ts
+//#region src/components/modal/index.ts
 /** The `modal` component record: a dialog surface with header, body, and footer parts, working on a native `<dialog>`. */
 const modal = defineComponent({
 	name: "modal",
@@ -1286,7 +1453,34 @@ const modal = defineComponent({
 /** Standalone `modal` stylesheet — the prefixed CSS for the dialog surface, ready to ship as a `.css` file. */
 const modalCss = modal.css;
 //#endregion
-//#region src/components/number-input.ts
+//#region src/components/modal/members/body/index.ts
+/** The `modal.body` member record: the content region (InstUI `Modal.Body`). */
+const modalBody = defineComponent({
+	name: "modal.body",
+	css: (p) => modalBody$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `modal.body` stylesheet. */
+const modalBodyCss = modalBody.css;
+//#endregion
+//#region src/components/modal/members/footer/index.ts
+/** The `modal.footer` member record: the actions row (InstUI `Modal.Footer`). */
+const modalFooter = defineComponent({
+	name: "modal.footer",
+	css: (p) => modalFooter$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `modal.footer` stylesheet. */
+const modalFooterCss = modalFooter.css;
+//#endregion
+//#region src/components/modal/members/header/index.ts
+/** The `modal.header` member record: the title row (InstUI `Modal.Header`). */
+const modalHeader = defineComponent({
+	name: "modal.header",
+	css: (p) => modalHeader$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `modal.header` stylesheet. */
+const modalHeaderCss = modalHeader.css;
+//#endregion
+//#region src/components/number-input/index.ts
 /** The `numberInput` component record: a number-input facade with a plus/minus spinner column. */
 const numberInput = defineComponent({
 	name: "number-input",
@@ -1376,7 +1570,7 @@ ${root} .arrows button.down::before { -webkit-mask: ${CHEVRON_DOWN_ICON}; mask:
 /** Standalone `numberInput` stylesheet — the prefixed CSS for the number input, ready to ship as a `.css` file. */
 const numberInputCss = numberInput.css;
 //#endregion
-//#region src/components/pagination.ts
+//#region src/components/pagination/index.ts
 /** The `pagination` component record: page navigation with numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps. */
 const pagination = defineComponent({
 	name: "pagination",
@@ -1385,7 +1579,16 @@ const pagination = defineComponent({
 /** Standalone `pagination` stylesheet — the prefixed CSS for the page navigation, ready to ship as a `.css` file. */
 const paginationCss = pagination.css;
 //#endregion
-//#region src/components/pill.ts
+//#region src/components/pagination/members/page/index.ts
+/** The `pagination.page` member record: a page link or button (InstUI `Pagination.Page`). */
+const paginationPage = defineComponent({
+	name: "pagination.page",
+	css: (p) => paginationPage$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `pagination.page` stylesheet. */
+const paginationPageCss = paginationPage.css;
+//#endregion
+//#region src/components/pill/index.ts
 /** The `pill` component record: a compact status label that takes a leading glyph via the `-icon-<name>` form. */
 const pill = defineComponent({
 	name: "pill",
@@ -1394,7 +1597,7 @@ const pill = defineComponent({
 /** Standalone `pill` stylesheet — the prefixed CSS for the status pill, ready to ship as a `.css` file. */
 const pillCss = pill.css;
 //#endregion
-//#region src/components/popover.ts
+//#region src/components/popover/index.ts
 /** The `popover` component record: an elevated surface for a native `[popover]`, placed with CSS anchor positioning. */
 const popover = defineComponent({
 	name: "popover",
@@ -1403,25 +1606,25 @@ const popover = defineComponent({
 /** Standalone `popover` stylesheet — the prefixed CSS for the popover surface, ready to ship as a `.css` file. */
 const popoverCss = popover.css;
 //#endregion
-//#region src/components/progress.ts
+//#region src/components/progress/index.ts
 /** The `progress` component record: a determinate progress bar with a coloured meter, sizes, and an optional value label. */
 const progress = defineComponent({
 	name: "progress",
-	css: (p) => `${PROGRESS_NUMERIC_PROPERTIES}\n${progress$1.replaceAll(SENTINEL, p)}\n${progressTransitionRules(p.replace(/-$/u, ""))}`
+	css: (p) => `${PROGRESS_NUMERIC_PROPERTIES}\n${progress$1.replaceAll(SENTINEL, p)}`
 });
 /** Standalone `progress` stylesheet — the prefixed CSS for the progress bar, ready to ship as a `.css` file. */
 const progressCss = progress.css;
 //#endregion
-//#region src/components/progress-circle.ts
+//#region src/components/progress-circle/index.ts
 /** The `progressCircle` component record: a circular progress ring driven by current and maximum values. */
 const progressCircle = defineComponent({
 	name: "progress-circle",
-	css: (p) => `${PROGRESS_NUMERIC_PROPERTIES}\n${progressCircle$1.replaceAll(SENTINEL, p)}\n${progressCircleTransitionRules(p.replace(/-$/u, ""))}`
+	css: (p) => `${PROGRESS_NUMERIC_PROPERTIES}\n${progressCircle$1.replaceAll(SENTINEL, p)}`
 });
 /** Standalone `progressCircle` stylesheet — the prefixed CSS for the progress ring, ready to ship as a `.css` file. */
 const progressCircleCss = progressCircle.css;
 //#endregion
-//#region src/components/radio.ts
+//#region src/components/radio/index.ts
 /** The `radio` component record: a native radio button with its label. */
 const radio = defineComponent({
 	name: "radio",
@@ -1430,7 +1633,7 @@ const radio = defineComponent({
 /** Standalone `radio` stylesheet — the prefixed CSS for the radio button, ready to ship as a `.css` file. */
 const radioCss = radio.css;
 //#endregion
-//#region src/components/radio-input-group.ts
+//#region src/components/radio-input-group/index.ts
 /** The `radioInputGroup` component record: a single-select radio `<fieldset>`, plain or as a connected segmented toggle. */
 const radioInputGroup = defineComponent({
 	name: "radio-input-group",
@@ -1439,7 +1642,7 @@ const radioInputGroup = defineComponent({
 /** Standalone `radioInputGroup` stylesheet — the prefixed CSS for the radio group, ready to ship as a `.css` file. */
 const radioInputGroupCss = radioInputGroup.css;
 //#endregion
-//#region src/components/range-input.ts
+//#region src/components/range-input/index.ts
 /** The `rangeInput` component record: a styled range slider with an inverse value bubble. */
 const rangeInput = defineComponent({
 	name: "range-input",
@@ -1448,7 +1651,7 @@ const rangeInput = defineComponent({
 /** Standalone `rangeInput` stylesheet — the prefixed CSS for the range slider, ready to ship as a `.css` file. */
 const rangeInputCss = rangeInput.css;
 //#endregion
-//#region src/components/rating.ts
+//#region src/components/rating/index.ts
 /** The `rating` component record: a star rating with filled and empty glyphs and an optional numeric label. */
 const rating = defineComponent({
 	name: "rating",
@@ -1457,7 +1660,7 @@ const rating = defineComponent({
 /** Standalone `rating` stylesheet — the prefixed CSS for the star rating, ready to ship as a `.css` file. */
 const ratingCss = rating.css;
 //#endregion
-//#region src/components/side-nav-bar.ts
+//#region src/components/side-nav-bar/index.ts
 /** The `sideNavBar` component record: a vertical navigation rail of icon-over-label items, with a minimized icons-only mode. */
 const sideNavBar = defineComponent({
 	name: "side-nav-bar",
@@ -1466,7 +1669,16 @@ const sideNavBar = defineComponent({
 /** Standalone `sideNavBar` stylesheet — the prefixed CSS for the navigation rail, ready to ship as a `.css` file. */
 const sideNavBarCss = sideNavBar.css;
 //#endregion
-//#region src/components/simple-select.ts
+//#region src/components/side-nav-bar/members/item/index.ts
+/** The `side-nav-bar.item` member record: a navigation entry (InstUI `SideNavBar.Item`). */
+const sideNavBarItem = defineComponent({
+	name: "side-nav-bar.item",
+	css: (p) => sideNavBarItem$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `side-nav-bar.item` stylesheet. */
+const sideNavBarItemCss = sideNavBarItem.css;
+//#endregion
+//#region src/components/simple-select/index.ts
 /** The `simpleSelect` component record: a styled native `<select>` with a caret, matching the text-input states and sizes. */
 const simpleSelect = defineComponent({
 	name: "simple-select",
@@ -1518,7 +1730,7 @@ ${fieldControlBase(p, "simple-select", "text-input")}
 /** Standalone `simpleSelect` stylesheet — the prefixed CSS for the native select, ready to ship as a `.css` file. */
 const simpleSelectCss = simpleSelect.css;
 //#endregion
-//#region src/components/spinner.ts
+//#region src/components/spinner/index.ts
 /** The `spinner` component record: an animated loading ring; pair it with `role="status"` and an aria-label. */
 const spinner = defineComponent({
 	name: "spinner",
@@ -1527,7 +1739,7 @@ const spinner = defineComponent({
 /** Standalone `spinner` stylesheet — the prefixed CSS for the loading ring, ready to ship as a `.css` file. */
 const spinnerCss = spinner.css;
 //#endregion
-//#region src/components/table.ts
+//#region src/components/table/index.ts
 /** The `table` component record: a styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts. */
 const table = defineComponent({
 	name: "table",
@@ -1536,7 +1748,61 @@ const table = defineComponent({
 /** Standalone `table` stylesheet — the prefixed CSS for the data table, ready to ship as a `.css` file. */
 const tableCss = table.css;
 //#endregion
-//#region src/components/tabs.ts
+//#region src/components/table/members/body/index.ts
+/** The `table.body` member record: the table's data row group (InstUI `Table.Body`). */
+const tableBody = defineComponent({
+	name: "table.body",
+	css: (p) => tableBody$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `table.body` stylesheet. */
+const tableBodyCss = tableBody.css;
+//#endregion
+//#region src/components/table/members/cell/index.ts
+/** The `table.cell` member record: a data cell (InstUI `Table.Cell`). */
+const tableCell = defineComponent({
+	name: "table.cell",
+	css: (p) => tableCell$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `table.cell` stylesheet. */
+const tableCellCss = tableCell.css;
+//#endregion
+//#region src/components/table/members/col-header/index.ts
+/** The `table.col-header` member record: a column-header cell (InstUI `Table.ColHeader`). */
+const tableColHeader = defineComponent({
+	name: "table.col-header",
+	css: (p) => tableColHeader$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `table.col-header` stylesheet. */
+const tableColHeaderCss = tableColHeader.css;
+//#endregion
+//#region src/components/table/members/head/index.ts
+/** The `table.head` member record: the table's header row group (InstUI `Table.Head`). */
+const tableHead = defineComponent({
+	name: "table.head",
+	css: (p) => tableHead$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `table.head` stylesheet. */
+const tableHeadCss = tableHead.css;
+//#endregion
+//#region src/components/table/members/row/index.ts
+/** The `table.row` member record: a table row (InstUI `Table.Row`). */
+const tableRow = defineComponent({
+	name: "table.row",
+	css: (p) => tableRow$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `table.row` stylesheet. */
+const tableRowCss = tableRow.css;
+//#endregion
+//#region src/components/table/members/row-header/index.ts
+/** The `table.row-header` member record: a row-header cell (InstUI `Table.RowHeader`). */
+const tableRowHeader = defineComponent({
+	name: "table.row-header",
+	css: (p) => tableRowHeader$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `table.row-header` stylesheet. */
+const tableRowHeaderCss = tableRowHeader.css;
+//#endregion
+//#region src/components/tabs/index.ts
 /** The `tabs` component record: a tabbed panel set with a tab list, selectable tabs, and their panels. */
 const tabs = defineComponent({
 	name: "tabs",
@@ -1545,7 +1811,25 @@ const tabs = defineComponent({
 /** Standalone `tabs` stylesheet — the prefixed CSS for the tabbed panels, ready to ship as a `.css` file. */
 const tabsCss = tabs.css;
 //#endregion
-//#region src/components/tag.ts
+//#region src/components/tabs/members/panel/index.ts
+/** The `tabs.panel` member record: the content panel for a tab (InstUI `Tabs.Panel`). */
+const tabsPanel = defineComponent({
+	name: "tabs.panel",
+	css: (p) => tabsPanel$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `tabs.panel` stylesheet. */
+const tabsPanelCss = tabsPanel.css;
+//#endregion
+//#region src/components/tabs/members/tab/index.ts
+/** The `tabs.tab` member record: a single tab button (InstUI `Tabs.Tab`). */
+const tabsTab = defineComponent({
+	name: "tabs.tab",
+	css: (p) => tabsTab$1.replaceAll(SENTINEL, p)
+});
+/** Standalone `tabs.tab` stylesheet. */
+const tabsTabCss = tabsTab.css;
+//#endregion
+//#region src/components/tag/index.ts
 /** The `tag` component record: an inline chip for a keyword or a filter. */
 const tag = defineComponent({
 	name: "tag",
@@ -1554,7 +1838,7 @@ const tag = defineComponent({
 /** Standalone `tag` stylesheet — the prefixed CSS for the chip, ready to ship as a `.css` file. */
 const tagCss = tag.css;
 //#endregion
-//#region src/components/text.ts
+//#region src/components/text/index.ts
 /** The `text` component record: body-text typography with size, weight, colour, and style modifiers. */
 const text = defineComponent({
 	name: "text",
@@ -1563,7 +1847,7 @@ const text = defineComponent({
 /** Standalone `text` stylesheet — the prefixed CSS for the body typography, ready to ship as a `.css` file. */
 const textCss = text.css;
 //#endregion
-//#region src/components/text-area.ts
+//#region src/components/text-area/index.ts
 /** The `textArea` component record: a styled, resizable native `<textarea>` sharing the text input's states and sizes. */
 const textArea = defineComponent({
 	name: "text-area",
@@ -1600,7 +1884,7 @@ ${fieldControlBase(p, "text-area", "text-area")}
 /** Standalone `textArea` stylesheet — the prefixed CSS for the textarea, ready to ship as a `.css` file. */
 const textAreaCss = textArea.css;
 //#endregion
-//#region src/components/text-input.ts
+//#region src/components/text-input/index.ts
 /** The `textInput` component record: a styled native `<input>` — including `date`, `time`, and `datetime-local`, where the browser supplies the picker — with validation states and sizes. */
 const textInput = defineComponent({
 	name: "text-input",
@@ -1638,7 +1922,7 @@ ${fieldControlBase(p, "text-input", "text-input")}
 /** Standalone `textInput` stylesheet — the prefixed CSS for the text input, ready to ship as a `.css` file. */
 const textInputCss = textInput.css;
 //#endregion
-//#region src/components/toggle-details.ts
+//#region src/components/toggle-details/index.ts
 /** The `toggleDetails` component record: a styled native `<details>` disclosure with a rotating chevron. */
 const toggleDetails = defineComponent({
 	name: "toggle-details",
@@ -1647,7 +1931,7 @@ const toggleDetails = defineComponent({
 /** Standalone `toggleDetails` stylesheet — the prefixed CSS for the details disclosure, ready to ship as a `.css` file. */
 const toggleDetailsCss = toggleDetails.css;
 //#endregion
-//#region src/components/toggle-group.ts
+//#region src/components/toggle-group/index.ts
 /** The `toggleGroup` component record: a bordered disclosure built on `<details>`, with a chevron summary row and collapsible content. */
 const toggleGroup = defineComponent({
 	name: "toggle-group",
@@ -1656,7 +1940,7 @@ const toggleGroup = defineComponent({
 /** Standalone `toggleGroup` stylesheet — the prefixed CSS for the bordered disclosure, ready to ship as a `.css` file. */
 const toggleGroupCss = toggleGroup.css;
 //#endregion
-//#region src/components/tooltip.ts
+//#region src/components/tooltip/index.ts
 /** The `tooltip` component record: a CSS hover-and-focus tooltip bubble, positionable on any side. */
 const tooltip = defineComponent({
 	name: "tooltip",
@@ -1665,7 +1949,7 @@ const tooltip = defineComponent({
 /** Standalone `tooltip` stylesheet — the prefixed CSS for the tooltip bubble, ready to ship as a `.css` file. */
 const tooltipCss = tooltip.css;
 //#endregion
-//#region src/components/tray.ts
+//#region src/components/tray/index.ts
 /** The `tray` component record: an edge-pinned panel that slides in from any side, as a native `[popover]` or `<dialog>`. */
 const tray = defineComponent({
 	name: "tray",
@@ -1674,7 +1958,7 @@ const tray = defineComponent({
 /** Standalone `tray` stylesheet — the prefixed CSS for the sliding tray, ready to ship as a `.css` file. */
 const trayCss = tray.css;
 //#endregion
-//#region src/components/tree-browser.ts
+//#region src/components/tree-browser/index.ts
 /** The `treeBrowser` component record: a disclosure tree of nested collections and leaf items, with rotating chevrons. */
 const treeBrowser = defineComponent({
 	name: "tree-browser",
@@ -1683,17 +1967,181 @@ const treeBrowser = defineComponent({
 /** Standalone `treeBrowser` stylesheet — the prefixed CSS for the disclosure tree, ready to ship as a `.css` file. */
 const treeBrowserCss = treeBrowser.css;
 //#endregion
-//#region src/components/truncate.ts
-/** The `truncate` component record: single-line ellipsis truncation, or a multi-line clamp via `--lines`. */
-const truncate = defineComponent({
-	name: "truncate",
-	css: (p) => truncate$1.replaceAll(SENTINEL, p)
+//#region src/components/view/index.ts
+/**
+* The View primitive component — InstUI's `View` as a neutral box with key-value modifiers for its
+* visual props (background, border, radius, shadow, display, position, overflow, cursor).
+*
+* @module
+*/
+/** Generate rules for background modifiers. */
+const buildBackgroundRules = (p, rule) => {
+	return [...[
+		"primary",
+		"secondary",
+		"primary-inverse",
+		"brand",
+		"info",
+		"alert",
+		"success",
+		"danger",
+		"warning"
+	].map((bg) => rule(`background-${bg}`, `background: var(--instui-component-view-background-${bg});`)), rule("background-transparent", "background: transparent;")];
+};
+/** Generate rules for border modifiers (radius, width, color). */
+const buildBorderRules = (p, rule) => {
+	const radiusRules = [
+		["small", "var(--instui-border-radius-sm)"],
+		["medium", "var(--instui-border-radius-md)"],
+		["large", "var(--instui-border-radius-lg)"],
+		["circle", "50%"],
+		["pill", "var(--instui-border-radius-full)"]
+	].map(([name, value]) => rule(`border-radius-${name}`, `border-radius: ${value};`));
+	const widthRules = [
+		["small", "sm"],
+		["medium", "md"],
+		["large", "lg"]
+	].map(([name, size]) => rule(`border-width-${name}`, `border-style: solid; border-width: var(--instui-border-width-${size}); border-color: var(--instui-color-stroke-base);`));
+	const colorRules = [
+		["primary", "base"],
+		["brand", "brand"],
+		["success", "success"],
+		["info", "info"],
+		["warning", "warning"],
+		["danger", "error"]
+	].map(([name, token]) => rule(`border-color-${name}`, `border-color: var(--instui-color-stroke-${token});`));
+	return [
+		...radiusRules,
+		...widthRules,
+		...colorRules
+	];
+};
+/** Generate rules for shadow, display, position, overflow, and cursor modifiers. */
+const buildEnumRules = (p, rule) => {
+	const shadowRules = [
+		"resting",
+		"above",
+		"topmost"
+	].map((s) => rule(`shadow-${s}`, `box-shadow: var(--instui-elevation-${s});`));
+	const displayRules = [
+		"block",
+		"inline-block",
+		"inline",
+		"flex",
+		"inline-flex",
+		"none"
+	].map((d) => rule(`display-${d}`, `display: ${d};`));
+	const positionRules = [
+		"static",
+		"relative",
+		"absolute",
+		"fixed",
+		"sticky"
+	].map((pos) => rule(`position-${pos}`, `position: ${pos};`));
+	const overflowRules = [
+		"visible",
+		"hidden",
+		"auto",
+		"scroll",
+		"clip"
+	].flatMap((o) => [rule(`overflow-x-${o}`, `overflow-x: ${o};`), rule(`overflow-y-${o}`, `overflow-y: ${o};`)]);
+	const cursorRules = [
+		"auto",
+		"default",
+		"pointer",
+		"not-allowed",
+		"text",
+		"move",
+		"grab",
+		"wait"
+	].map((c) => rule(`cursor-${c}`, `cursor: ${c};`));
+	return [
+		...shadowRules,
+		...displayRules,
+		...positionRules,
+		...overflowRules,
+		...cursorRules
+	];
+};
+/** The View component — a neutral box with key-value modifiers for its visual props (background, border, radius, shadow, display, position, overflow, cursor). */
+const view = defineComponent({
+	name: "view",
+	css: (p) => {
+		const rule = (mod, decls) => `.${p}view.-${mod} { ${decls} }`;
+		const rules = [`.${p}view { display: block; box-sizing: border-box; }`];
+		rules.push(...buildBackgroundRules(p, rule));
+		rules.push(...buildBorderRules(p, rule));
+		rules.push(...buildEnumRules(p, rule));
+		return css`/**
+ * @component view
+ * @summary The View primitive: a neutral box with key-value modifiers for background, border, radius, shadow, display, position, overflow, and cursor. Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the \`background\`/\`border\`/\`shadow\`/\`display\`/\`position\`/\`overflow\`/\`cursor\` utilities.
+ * @modifier -background-primary — Primary surface background.
+ * @modifier -background-secondary — Secondary surface background.
+ * @modifier -background-primary-inverse — Inverse primary surface background.
+ * @modifier -background-brand — Brand surface background.
+ * @modifier -background-info — Info surface background.
+ * @modifier -background-alert — Alert surface background.
+ * @modifier -background-success — Success surface background.
+ * @modifier -background-danger — Danger surface background.
+ * @modifier -background-warning — Warning surface background.
+ * @modifier -background-transparent — Transparent background.
+ * @modifier -border-radius-small — Small corner radius.
+ * @modifier -border-radius-medium — Medium corner radius.
+ * @modifier -border-radius-large — Large corner radius.
+ * @modifier -border-radius-circle — Fully circular (50%) radius.
+ * @modifier -border-radius-pill — Pill (full) radius.
+ * @modifier -border-width-small — Small solid border in the base stroke colour.
+ * @modifier -border-width-medium — Medium solid border in the base stroke colour.
+ * @modifier -border-width-large — Large solid border in the base stroke colour.
+ * @modifier -border-color-primary — Base stroke border colour.
+ * @modifier -border-color-brand — Brand stroke border colour.
+ * @modifier -border-color-success — Success stroke border colour.
+ * @modifier -border-color-info — Info stroke border colour.
+ * @modifier -border-color-warning — Warning stroke border colour.
+ * @modifier -border-color-danger — Error stroke border colour.
+ * @modifier -shadow-resting — Resting elevation shadow.
+ * @modifier -shadow-above — Above elevation shadow.
+ * @modifier -shadow-topmost — Topmost elevation shadow.
+ * @modifier -display-block — display: block.
+ * @modifier -display-inline-block — display: inline-block.
+ * @modifier -display-inline — display: inline.
+ * @modifier -display-flex — display: flex.
+ * @modifier -display-inline-flex — display: inline-flex.
+ * @modifier -display-none — display: none.
+ * @modifier -position-static — position: static.
+ * @modifier -position-relative — position: relative.
+ * @modifier -position-absolute — position: absolute.
+ * @modifier -position-fixed — position: fixed.
+ * @modifier -position-sticky — position: sticky.
+ * @modifier -overflow-x-visible — overflow-x: visible.
+ * @modifier -overflow-x-hidden — overflow-x: hidden.
+ * @modifier -overflow-x-auto — overflow-x: auto.
+ * @modifier -overflow-x-scroll — overflow-x: scroll.
+ * @modifier -overflow-x-clip — overflow-x: clip.
+ * @modifier -overflow-y-visible — overflow-y: visible.
+ * @modifier -overflow-y-hidden — overflow-y: hidden.
+ * @modifier -overflow-y-auto — overflow-y: auto.
+ * @modifier -overflow-y-scroll — overflow-y: scroll.
+ * @modifier -overflow-y-clip — overflow-y: clip.
+ * @modifier -cursor-auto — cursor: auto.
+ * @modifier -cursor-default — cursor: default.
+ * @modifier -cursor-pointer — cursor: pointer.
+ * @modifier -cursor-not-allowed — cursor: not-allowed.
+ * @modifier -cursor-text — cursor: text.
+ * @modifier -cursor-move — cursor: move.
+ * @modifier -cursor-grab — cursor: grab.
+ * @modifier -cursor-wait — cursor: wait.
+ * @example
+ * <div class="instui-view -background-secondary -border-radius-medium -shadow-resting">A card-like surface.</div>
+ */
+${rules.join("\n")}`;
+	}
 });
-/** Standalone `truncate` stylesheet — the prefixed CSS for the truncation utility, ready to ship as a `.css` file. */
-const truncateCss = truncate.css;
+/** The View component as a standalone, header-wrapped stylesheet. */
+const viewCss = view.css;
 //#endregion
 //#region src/components/index.ts
-/** Every component (+ the three in-sheet utilities) in `componentsCss()`'s exact concat order. */
+/** Every component (+ the two in-sheet utilities) in `componentsCss()`'s exact concat order. */
 const COMPONENTS = [
 	button,
 	alert,
@@ -1702,32 +2150,50 @@ const COMPONENTS = [
 	tag,
 	avatar,
 	tabs,
+	tabsTab,
+	tabsPanel,
 	metric,
 	byline,
 	img,
 	table,
+	tableHead,
+	tableBody,
+	tableRow,
+	tableCell,
+	tableColHeader,
+	tableRowHeader,
 	link,
 	list,
+	listItem,
 	icon,
 	checkbox,
 	radio,
 	spinner,
 	progress,
 	menu,
+	menuItem,
+	menuGroup,
+	menuSeparator,
 	modal,
+	modalHeader,
+	modalBody,
+	modalFooter,
 	breadcrumb,
+	breadcrumbLink,
 	billboard,
 	rating,
 	toggleGroup,
 	contextView,
 	progressCircle,
 	pagination,
-	truncate,
+	paginationPage,
 	toggleDetails,
 	fileDrop,
 	sideNavBar,
+	sideNavBarItem,
 	treeBrowser,
 	calendar,
+	calendarDay,
 	popover,
 	tray,
 	tooltip,
@@ -1746,17 +2212,18 @@ const COMPONENTS = [
 	simpleSelect,
 	inputGroup,
 	numberInput,
-	inPlaceEdit
+	inPlaceEdit,
+	view
 ];
 //#endregion
-//#region src/rules/base.ts
+//#region src/rules/base/index.ts
 /** The base rule — the opt-in global reset (box-sizing, page surface, base text and font, color-scheme, link defaults), with the prefix sentinel replaced. */
 const base = defineRule({
 	name: "base",
 	css: (p) => base$1.replaceAll(SENTINEL, p)
 });
 //#endregion
-//#region src/declarations/focus.ts
+//#region src/declarations/focus/index.ts
 /**
 * The focus-outline system — the InstUI focus ring, intrinsic to `base.css` so every focusable gets it
 * out of the box when pantoken owns the page. The resting element carries a transparent ring + a
@@ -1773,7 +2240,7 @@ const base = defineRule({
 /** The focus declaration's cssdoc doc comment (authored inline; the CSS body follows in {@link focusOutlineCss}). */
 const FOCUS_DOC = css`/**
  * @declaration focus
- * @class :focus-visible
+ * @selector :focus-visible
  * @summary The focus-outline system: the \`--instui-focus-outline-*\` custom properties (declared on \`:root\`) plus the \`:focus-visible\` ring every focusable gets, and opt-in tuning classes.
  * @modifier -focus-color-success — Success-coloured ring.
  * @modifier -focus-color-danger — Danger-coloured ring.
@@ -1814,7 +2281,7 @@ function focusOutlineCss(options = {}) {
 	return css`${FOCUS_DOC}\n${tokenSelector} {\n${decls}\n}\n\n${focusOutlineRules$1(options.selector)}\n`;
 }
 //#endregion
-//#region src/rules/prose.ts
+//#region src/rules/prose/index.ts
 /**
 * The `prose` rule — typographic defaults for raw HTML under a content-root scope. Unlike the other
 * rules it's parameterized by a `scope` selector (not a class prefix), so it keeps its bespoke
@@ -1826,9 +2293,10 @@ function focusOutlineCss(options = {}) {
 /** The prose rule's cssdoc doc comment (authored inline; the CSS body follows from {@link proseBody}). */
 const PROSE_DOC = css`/**
  * @rule prose
- * @summary Typographic defaults for raw HTML — headings, paragraphs, lists, links, and code — under the \`.pantoken-prose\` scope.
+ * @selector :where(body)
+ * @summary Typographic defaults for raw HTML — headings, paragraphs, lists, links, and code — applied automatically wherever it's imported (default \`:where(body)\`); pass \`options.scope\` to target a different content root instead (e.g. \`.vp-doc\`).
  * @example
- * <article class="pantoken-prose">
+ * <article>
  *   <h2>Release notes</h2>
  *   <p>Body copy with a <a href="/">link</a>.</p>
  * </article>
@@ -1947,7 +2415,8 @@ ${s} table:not([class]) td {
 `;
 }
 /**
-* Build the InstUI-look prose stylesheet, scoped to `options.scope` (default `.pantoken-prose`).
+* Build the InstUI-look prose stylesheet, scoped to `options.scope` (default `:where(body)`, so it
+* applies automatically without a wrapper class — like `base.css`).
 *
 * @param options - {@link ProseOptions}.
 * @returns The CSS string.
@@ -1955,11 +2424,11 @@ ${s} table:not([class]) td {
 * @demo self:prose
 */
 function proseCss(options = {}) {
-	const scope = options.scope ?? ".pantoken-prose";
+	const scope = options.scope ?? ":where(body)";
 	return `/* InstUI-look prose styles (@pantoken/components) — scope: ${scope} */\n${PROSE_DOC}\n${proseBody(scope).trim()}\n`;
 }
 //#endregion
-//#region src/declarations/elevation.ts
+//#region src/declarations/elevation/index.ts
 /**
 * The `--instui-elevation-*` shadow scale — the one documented `@declaration` record whose CSS is a
 * token block on `:root` (no modifier classes). `componentsCss()` leads its sheet with `elevationCss()`
@@ -1983,6 +2452,8 @@ const ELEVATION_DOC = css`/**
  * @cssproperty --instui-elevation-card — Alias of \`resting\`, for card surfaces.
  * @cssproperty --instui-elevation-cardHover — Alias of \`topmost\`, for hovered cards.
  * @related view — The View primitive's \`-shadow-*\` modifiers read these shadows.
+ * @remarks Every level also ships as a global \`box-shadow\` utility class (via \`utilities.css\`), usable
+ *   bare (\`.instui-elevation-resting\`) or chained onto any component (\`.instui-button.-elevation-above\`).
  * @demo self:elevation
  */`;
 /**
@@ -2008,7 +2479,7 @@ function elevationCss(options = {}) {
 	return css`${ELEVATION_DOC}\n${selector} {\n${body}\n}\n`;
 }
 //#endregion
-//#region src/components/select.ts
+//#region src/components/select/index.ts
 /**
 * The **experimental** customizable-select enhancement for `.<prefix>-simple-select`. Bespoke (no
 * cssdoc record, not in the COMPONENTS registry): everything is gated behind
@@ -2045,168 +2516,13 @@ function selectCss(options = {}) {
 	return wrap("select", prefix, select.replaceAll(SENTINEL, ns(prefix)));
 }
 //#endregion
-//#region src/utilities/view.ts
-/**
-* The View primitive utility — InstUI's `View` as a neutral box with key-value modifiers for its
-* visual props (background, border, radius, shadow, display, position, overflow, cursor).
-*
-* @module
-*/
-/** The View utility — a neutral box with key-value modifiers for its visual props (background, border, radius, shadow, display, position, overflow, cursor). */
-const view = defineUtility({
-	name: "view",
-	css: (p) => {
-		const rule = (mod, decls) => `.${p}view.-${mod} { ${decls} }`;
-		const rules = [`.${p}view { display: block; box-sizing: border-box; }`];
-		for (const bg of [
-			"primary",
-			"secondary",
-			"primary-inverse",
-			"brand",
-			"info",
-			"alert",
-			"success",
-			"danger",
-			"warning"
-		]) rules.push(rule(`background-${bg}`, `background: var(--instui-component-view-background-${bg});`));
-		rules.push(rule("background-transparent", "background: transparent;"));
-		for (const [name, value] of [
-			["small", "var(--instui-border-radius-sm)"],
-			["medium", "var(--instui-border-radius-md)"],
-			["large", "var(--instui-border-radius-lg)"],
-			["circle", "50%"],
-			["pill", "var(--instui-border-radius-full)"]
-		]) rules.push(rule(`border-radius-${name}`, `border-radius: ${value};`));
-		for (const [name, size] of [
-			["small", "sm"],
-			["medium", "md"],
-			["large", "lg"]
-		]) rules.push(rule(`border-width-${name}`, `border-style: solid; border-width: var(--instui-border-width-${size}); border-color: var(--instui-color-stroke-base);`));
-		for (const [name, token] of [
-			["primary", "base"],
-			["brand", "brand"],
-			["success", "success"],
-			["info", "info"],
-			["warning", "warning"],
-			["danger", "error"]
-		]) rules.push(rule(`border-color-${name}`, `border-color: var(--instui-color-stroke-${token});`));
-		for (const s of [
-			"resting",
-			"above",
-			"topmost"
-		]) rules.push(rule(`shadow-${s}`, `box-shadow: var(--instui-elevation-${s});`));
-		for (const d of [
-			"block",
-			"inline-block",
-			"inline",
-			"flex",
-			"inline-flex",
-			"none"
-		]) rules.push(rule(`display-${d}`, `display: ${d};`));
-		for (const pos of [
-			"static",
-			"relative",
-			"absolute",
-			"fixed",
-			"sticky"
-		]) rules.push(rule(`position-${pos}`, `position: ${pos};`));
-		for (const o of [
-			"visible",
-			"hidden",
-			"auto",
-			"scroll",
-			"clip"
-		]) {
-			rules.push(rule(`overflow-x-${o}`, `overflow-x: ${o};`));
-			rules.push(rule(`overflow-y-${o}`, `overflow-y: ${o};`));
-		}
-		for (const c of [
-			"auto",
-			"default",
-			"pointer",
-			"not-allowed",
-			"text",
-			"move",
-			"grab",
-			"wait"
-		]) rules.push(rule(`cursor-${c}`, `cursor: ${c};`));
-		return css`/**
- * @utility view
- * @summary The View primitive: a neutral box with key-value modifiers for background, border, radius, shadow, display, position, overflow, and cursor.
- * @modifier -background-primary — Primary surface background.
- * @modifier -background-secondary — Secondary surface background.
- * @modifier -background-primary-inverse — Inverse primary surface background.
- * @modifier -background-brand — Brand surface background.
- * @modifier -background-info — Info surface background.
- * @modifier -background-alert — Alert surface background.
- * @modifier -background-success — Success surface background.
- * @modifier -background-danger — Danger surface background.
- * @modifier -background-warning — Warning surface background.
- * @modifier -background-transparent — Transparent background.
- * @modifier -border-radius-small — Small corner radius.
- * @modifier -border-radius-medium — Medium corner radius.
- * @modifier -border-radius-large — Large corner radius.
- * @modifier -border-radius-circle — Fully circular (50%) radius.
- * @modifier -border-radius-pill — Pill (full) radius.
- * @modifier -border-width-small — Small solid border in the base stroke colour.
- * @modifier -border-width-medium — Medium solid border in the base stroke colour.
- * @modifier -border-width-large — Large solid border in the base stroke colour.
- * @modifier -border-color-primary — Base stroke border colour.
- * @modifier -border-color-brand — Brand stroke border colour.
- * @modifier -border-color-success — Success stroke border colour.
- * @modifier -border-color-info — Info stroke border colour.
- * @modifier -border-color-warning — Warning stroke border colour.
- * @modifier -border-color-danger — Error stroke border colour.
- * @modifier -shadow-resting — Resting elevation shadow.
- * @modifier -shadow-above — Above elevation shadow.
- * @modifier -shadow-topmost — Topmost elevation shadow.
- * @modifier -display-block — display: block.
- * @modifier -display-inline-block — display: inline-block.
- * @modifier -display-inline — display: inline.
- * @modifier -display-flex — display: flex.
- * @modifier -display-inline-flex — display: inline-flex.
- * @modifier -display-none — display: none.
- * @modifier -position-static — position: static.
- * @modifier -position-relative — position: relative.
- * @modifier -position-absolute — position: absolute.
- * @modifier -position-fixed — position: fixed.
- * @modifier -position-sticky — position: sticky.
- * @modifier -overflow-x-visible — overflow-x: visible.
- * @modifier -overflow-x-hidden — overflow-x: hidden.
- * @modifier -overflow-x-auto — overflow-x: auto.
- * @modifier -overflow-x-scroll — overflow-x: scroll.
- * @modifier -overflow-x-clip — overflow-x: clip.
- * @modifier -overflow-y-visible — overflow-y: visible.
- * @modifier -overflow-y-hidden — overflow-y: hidden.
- * @modifier -overflow-y-auto — overflow-y: auto.
- * @modifier -overflow-y-scroll — overflow-y: scroll.
- * @modifier -overflow-y-clip — overflow-y: clip.
- * @modifier -cursor-auto — cursor: auto.
- * @modifier -cursor-default — cursor: default.
- * @modifier -cursor-pointer — cursor: pointer.
- * @modifier -cursor-not-allowed — cursor: not-allowed.
- * @modifier -cursor-text — cursor: text.
- * @modifier -cursor-move — cursor: move.
- * @modifier -cursor-grab — cursor: grab.
- * @modifier -cursor-wait — cursor: wait.
- * @example
- * <div class="instui-view -background-secondary -border-radius-medium -shadow-resting">A card-like surface.</div>
- */
-${rules.join("\n")}`;
-	}
-});
-/** The View utility as a standalone, header-wrapped stylesheet. */
-const viewCss = view.css;
-//#endregion
-//#region src/utilities/spacing.ts
+//#region src/utilities/spacing/index.ts
 /**
 * 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`).
 *
 * @module
 */
-/** Every component base class, plus `view` — the chainable bases a spacing modifier can attach to. */
-const SPACING_ALIAS_TARGETS = [...COMPONENTS.filter((entry) => entry.kind === "component").map((entry) => entry.name), view.name];
 /** The steps a boxed property takes — margin also gets `auto`. */
 const stepsFor = (property) => property.css === "margin" ? [...SPACING_STEPS$1, SPACING_AUTO_STEP$1] : SPACING_STEPS$1;
 /**
@@ -2214,19 +2530,18 @@ const stepsFor = (property) => property.css === "margin" ? [...SPACING_STEPS$1,
 * for the zero step (both `-m-0` and `-m-none` have shipped since before the long spelling existed).
 */
 const legacyStepEntries = (steps) => steps.flatMap((step) => step.short === "0" ? [[step.short, step.value], [step.long, step.value]] : [[step.short, step.value]]);
-const selectorsFor = (p, modifier) => SPACING_ALIAS_TARGETS.map((name) => `.${p}${name}.${modifier}`);
 /**
 * Short spellings (`-m-sm`) and the legacy long-property-word twin (`-margin-sm`) — concatenated
 * side, short step. Unchanged shape from before the long spelling existed.
 */
 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 modifier = `-${letter}${side.short}-${step}`;
-			const selectors = [`.${p}${letter}${side.short}-${step}`, ...selectorsFor(p, modifier)];
-			rules.push(`${selectors.join(", ")} { ${property.css}${side.suffix}: ${value}; }`);
+			const bareModifier = `-${letter}${side.short}-${step}`;
+			rules.push(utilityVariantRule(baseClass, "spacing", bareModifier, `${property.css}${side.suffix}: ${value}`));
 		}
 	}
 	return rules;
@@ -2238,12 +2553,11 @@ 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 name = `${property.long}-${sidePart}${step.long}`;
-		const modifier = `-${name}`;
-		const selectors = [`.${p}${name}`, ...selectorsFor(p, modifier)];
-		rules.push(`${selectors.join(", ")} { ${property.css}${side.suffix}: ${step.value}; }`);
+		const bareModifier = `-${`${property.long}-${sidePart}${step.long}`}`;
+		rules.push(utilityVariantRule(baseClass, "spacing", bareModifier, `${property.css}${side.suffix}: ${step.value}`));
 	}
 	return rules;
 }
@@ -2254,7 +2568,7 @@ const spacingUtilitiesCss = defineUtility({
 		const rules = [...shortAndLegacyRules(p), ...fullyLongRules(p)];
 		return css`/**
  * @utility spacing
- * @class .instui-p-md
+ * @selector .instui-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\`).
  * @demo self:spacing
@@ -2265,7 +2579,7 @@ ${rules.join("\n")}`;
 	}
 }).css;
 //#endregion
-//#region src/utilities/gap.ts
+//#region src/utilities/gap/index.ts
 /**
 * The gap utility — `gap` classes on the pantoken spacing scale, short (`-gap-sm`) and long
 * (`-gap-small`) spellings of the same rule.
@@ -2286,15 +2600,14 @@ const gapCss = defineUtility({
 	name: "gap",
 	css: (p) => {
 		const rules = [];
-		const componentAliases = (modifier) => SPACING_ALIAS_TARGETS.map((name) => `.${p}${name}.${modifier}`);
+		const baseClass = `.${p}gap`;
 		for (const [step, value] of STEP_ENTRIES) {
-			const modifier = `-gap-${step}`;
-			const selectors = [`.${p}gap-${step}`, ...componentAliases(modifier)];
-			rules.push(`${selectors.join(", ")} { gap: ${value}; }`);
+			const bareModifier = `-${step}`;
+			rules.push(utilityVariantRule(baseClass, "gap", bareModifier, `gap: ${value}`, `-gap${bareModifier}`));
 		}
 		return css`/**
  * @utility gap
- * @class .instui-gap-md
+ * @selector .instui-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.
  * @demo self:gap
@@ -2312,8 +2625,9 @@ const layoutUtilitiesCss = defineUtility({
 	name: "layout",
 	css: (p) => css`/**
  * @utility layout
- * @class .instui-display-flex
- * @summary Display and text-align utilities — \`.instui-display-<value>\` and \`.instui-text-align-<value>\` — as composable classes.
+ * @selector .instui-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.
  * @example
  * <div class="instui-display-flex instui-text-align-center">
  *   <span>One</span>
@@ -2327,37 +2641,497 @@ ${[...[
 		"flex",
 		"inline-flex",
 		"none"
-	].map((v) => `.${p}display-${v} { display: ${v}; }`), ...[
+	].map((v) => {
+		const bareModifier = `-display-${v}`;
+		return utilityVariantRule(`.${p}layout`, "layout", bareModifier, `display: ${v}`);
+	}), ...[
 		["start", "start"],
 		["center", "center"],
 		["end", "end"],
 		["justify", "justify"]
-	].map(([name, value]) => `.${p}text-align-${name} { text-align: ${value}; }`)].join("\n")}`
+	].map(([name, value]) => {
+		const bareModifier = `-text-align-${name}`;
+		return utilityVariantRule(`.${p}layout`, "layout", bareModifier, `text-align: ${value}`);
+	})].join("\n")}`
 }).css;
+//#endregion
+//#region src/utilities/responsive/index.ts
+/**
+* The responsive-visibility utilities — the closest pure-CSS analogue to InstUI's `<Responsive>`:
+* viewport-width hide classes plus `-cq-` container-query variants.
+*
+* Not dual-chained onto every real component (unlike spacing/gap/layout): the alias post-processors
+* (`withSizeAliases`/`deprecatedAliasPairs` in `lib/aliases.ts`) scan this record's CSS body with
+* unanchored regexes, and this utility's selector lists (breakpoint × infix × short/long/device name)
+* are already large enough that adding ~70 more chained selectors per rule (one per real component)
+* pushes the scan into unusable-slow territory (confirmed: multi-minute hang during implementation).
+* Each rule does carry a bare `.-hidden-max-xs`-style dash modifier alongside the prefixed
+* `.instui-hidden-max-xs` class (a flat, constant-factor addition, not a per-component fan-out), so the
+* documented `@modifier` names resolve to a real selector.
+*
+* @module
+*/
+const emValue = (tokenName) => {
+	const match = /^([\d.]+)em$/u.exec(tokens.find((t) => t.name === tokenName)?.value ?? "");
+	if (!match) throw new Error(`@pantoken/tokens: missing or non-em token "${tokenName}"`);
+	return `${match[1]}em`;
+};
+/** Short name, long-form spelling, and device name for each `--instui-component-tray-width-*` tier. */
+const SCALE_TIERS = [
+	[
+		"xs",
+		"x-small",
+		"mobile"
+	],
+	[
+		"sm",
+		"small",
+		"phablet"
+	],
+	[
+		"md",
+		"medium",
+		"tablet"
+	],
+	[
+		"lg",
+		"large",
+		"laptop"
+	],
+	[
+		"xl",
+		"x-large",
+		"desktop"
+	]
+];
+/** `[names sharing one breakpoint value, width]` for the scale tiers — theme-invariant. */
+const scaleBreakpoints = () => SCALE_TIERS.map(([short, long, device]) => [[
+	short,
+	long,
+	device
+], emValue(`--instui-component-tray-width-${short}`)]);
+/** The main content area's max-width, in em, per theme — hand-authored (not in the token IR). */
+const CONTENT_BREAKPOINT_EM = {
+	rebrand: {
+		content: "68.75em",
+		contentFullWidth: "98.75em"
+	},
+	canvas: {
+		content: "59.25em",
+		contentFullWidth: "59.25em"
+	},
+	canvasHighContrast: {
+		content: "59.25em",
+		contentFullWidth: "59.25em"
+	}
+};
 /** The responsive-visibility utilities as a standalone, header-wrapped stylesheet. */
 const responsiveUtilitiesCss = defineUtility({
 	name: "responsive",
-	css: (p) => {
+	css: (p, options) => {
+		const theme = options?.theme ?? "rebrand";
+		const { content, contentFullWidth } = CONTENT_BREAKPOINT_EM[theme];
 		const bp = [
-			["sm", "30rem"],
-			["md", "48rem"],
-			["lg", "64rem"],
-			["xl", "80rem"]
+			...scaleBreakpoints(),
+			[["content"], content],
+			[["content-full-width"], contentFullWidth]
 		];
-		const viewport = bp.map(([name, w]) => `@media (max-width: ${w}) { .${p}hidden-max-${name} { display: none !important; } }\n@media (min-width: ${w}) { .${p}hidden-min-${name} { display: none !important; } }`).join("\n");
-		const container = bp.map(([name, w]) => `@container (max-width: ${w}) { .${p}cq-hidden-max-${name} { display: none !important; } }\n@container (min-width: ${w}) { .${p}cq-hidden-min-${name} { display: none !important; } }`).join("\n");
+		const selectors = (prefix, infix, names) => names.map((name) => `.${prefix}${infix}${name}, .-${infix}${name}`).join(", ");
+		const viewport = bp.map(([names, w]) => `@media (max-width: ${w}) { ${selectors(p, "hidden-max-", names)} { display: none !important; } }\n@media (min-width: ${w}) { ${selectors(p, "hidden-min-", names)} { display: none !important; } }`).join("\n");
+		const container = bp.map(([names, w]) => `@container (max-width: ${w}) { ${selectors(p, "cq-hidden-max-", names)} { display: none !important; } }\n@container (min-width: ${w}) { ${selectors(p, "cq-hidden-min-", names)} { display: none !important; } }`).join("\n");
+		const showSelector = (infix) => bp.map(([names]) => selectors(p, infix, names)).join(", ");
+		const showBase = [
+			"show-max-",
+			"show-min-",
+			"cq-show-max-",
+			"cq-show-min-"
+		].map(showSelector).join(", ");
+		const showViewport = bp.map(([names, w]) => `@media (max-width: ${w}) { ${selectors(p, "show-max-", names)} { display: revert !important; } }\n@media (min-width: ${w}) { ${selectors(p, "show-min-", names)} { display: revert !important; } }`).join("\n");
+		const showContainer = bp.map(([names, w]) => `@container (max-width: ${w}) { ${selectors(p, "cq-show-max-", names)} { display: revert !important; } }\n@container (min-width: ${w}) { ${selectors(p, "cq-show-min-", names)} { display: revert !important; } }`).join("\n");
+		const conditionDocs = bp.map(([names, w]) => ` * @media (max-width: ${w}) — Upper bound of the \`${names[0]}\` breakpoint.\n * @media (min-width: ${w}) — Lower bound of the \`${names[0]}\` breakpoint.\n * @container (max-width: ${w}) — Upper bound of the \`${names[0]}\` breakpoint, evaluated against a marked container.\n * @container (min-width: ${w}) — Lower bound of the \`${names[0]}\` breakpoint, evaluated against a marked container.`).join("\n");
+		const modifierDocs = bp.map(([names, w]) => {
+			const [short, ...aliases] = names;
+			const canonical = [
+				` * @modifier -hidden-max-${short} — Hide when the viewport is at or below the \`${short}\` breakpoint (\`${w}\`).`,
+				` * @modifier -hidden-min-${short} — Hide when the viewport is at or above the \`${short}\` breakpoint (\`${w}\`).`,
+				` * @modifier -cq-hidden-max-${short} — Hide when the marked container is at or below the \`${short}\` breakpoint (\`${w}\`).`,
+				` * @modifier -cq-hidden-min-${short} — Hide when the marked container is at or above the \`${short}\` breakpoint (\`${w}\`).`
+			];
+			const aliasDocs = aliases.flatMap((alias) => [
+				` * @modifier -hidden-max-${alias} — @alias {@link -hidden-max-${short}}`,
+				` * @modifier -hidden-min-${alias} — @alias {@link -hidden-min-${short}}`,
+				` * @modifier -cq-hidden-max-${alias} — @alias {@link -cq-hidden-max-${short}}`,
+				` * @modifier -cq-hidden-min-${alias} — @alias {@link -cq-hidden-min-${short}}`
+			]);
+			const showCanonical = [
+				` * @modifier -show-max-${short} — Show (inverse of \`-hidden-min-${short}\`) when the viewport is at or below the \`${short}\` breakpoint (\`${w}\`); hidden otherwise.`,
+				` * @modifier -show-min-${short} — Show (inverse of \`-hidden-max-${short}\`) when the viewport is at or above the \`${short}\` breakpoint (\`${w}\`); hidden otherwise.`,
+				` * @modifier -cq-show-max-${short} — Show when the marked container is at or below the \`${short}\` breakpoint (\`${w}\`); hidden otherwise.`,
+				` * @modifier -cq-show-min-${short} — Show when the marked container is at or above the \`${short}\` breakpoint (\`${w}\`); hidden otherwise.`
+			];
+			const showAliasDocs = aliases.flatMap((alias) => [
+				` * @modifier -show-max-${alias} — @alias {@link -show-max-${short}}`,
+				` * @modifier -show-min-${alias} — @alias {@link -show-min-${short}}`,
+				` * @modifier -cq-show-max-${alias} — @alias {@link -cq-show-max-${short}}`,
+				` * @modifier -cq-show-min-${alias} — @alias {@link -cq-show-min-${short}}`
+			]);
+			return [
+				...canonical,
+				...aliasDocs,
+				...showCanonical,
+				...showAliasDocs
+			].join("\n");
+		}).join("\n");
+		const properties = bp.map(([names, w]) => `@property --pantoken-bp-${names[0]} { syntax: "<length>"; inherits: true; initial-value: ${w}; }`).join("\n");
+		const scaleSourceVars = SCALE_TIERS.map(([short]) => `  --pantoken-bp-${short}: var(--instui-component-tray-width-${short});`).join("\n");
+		const scaleShortNames = new Set(SCALE_TIERS.map(([short]) => short));
+		const propertyDocs = bp.map(([names, w]) => {
+			const short = names[0];
+			return ` * @cssproperty --pantoken-bp-${short} <length> — The \`${short}\` breakpoint's value (\`${w}\`, ${scaleShortNames.has(short) ? `mirrors \`--instui-component-tray-width-${short}\`` : "hand-authored, themed (not in the token IR)"}). Overriding it does not move the compiled \`@media\`/\`@container\` thresholds above.`;
+		}).join("\n");
 		return css`
 /**
  * @utility responsive
- * @class .instui-hidden-max-md
- * @summary Responsive visibility: \`.instui-hidden-max-<bp>\` / \`-hidden-min-<bp>\` hide by viewport width; the \`-cq-\` variants react to a \`.instui-container\` ancestor's width instead. Breakpoints \`sm\`/\`md\`/\`lg\`/\`xl\`.
+ * @selector [class*="-hidden-"],[class*="-show-"]
+ * @global
+ * @summary Viewport- or container-width show/hide classes across a themed breakpoint scale.
+ * @remarks \`.instui-hidden-max-<bp>\`/\`-hidden-min-<bp>\` hide by viewport width; \`.instui-show-max-<bp>\`/\`-show-min-<bp>\` are the inverse (hidden by default, shown only inside the range via \`display: revert\`); the \`-cq-\` variants react to a \`.instui-container\` ancestor's width instead, not the viewport's. Scale tiers \`xs\`/\`sm\`/\`md\`/\`lg\`/\`xl\` (sourced from the IR's tray-width component tokens) are each aliased to a long-form spelling (\`x-small\`\u2013\`x-large\`) and a device name (\`mobile\`/\`phablet\`/\`tablet\`/\`laptop\`/\`desktop\`) \u2014 both deprecated in favor of the short name \u2014 plus the unscaled, themed \`content\`/\`content-full-width\` tiers (the main content area's max-width).
  * @example
  * <div class="instui-hidden-max-sm">Hidden at or below the small breakpoint.</div>
- */${viewport}\n.${p}container { container-type: inline-size; }\n${container}\n`;
+ * <div class="instui-show-min-sm">Shown only at or above the small breakpoint.</div>
+${modifierDocs}
+${conditionDocs}
+${propertyDocs}
+ */
+${properties}
+:root {
+${scaleSourceVars}
+}
+${viewport}
+.${p}container { container-type: inline-size; }
+${container}
+${showBase} { display: none !important; }
+${showViewport}
+${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
+* onto any component) — copied from `view`'s former `-position-*` modifiers.
+*
+* @module
+*/
+const POSITIONS = [
+	"static",
+	"relative",
+	"absolute",
+	"fixed",
+	"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}; }`;
+});
+/** The position utility as a standalone, header-wrapped stylesheet. */
+const positionUtilitiesCss = defineUtility({
+	name: "position",
+	css: (p) => {
+		const rules = buildPropertyRules$1(p, "position", "position", Array.from(POSITIONS));
+		return css`/**
+ * @utility position
+ * @selector .instui-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.
+ * @example
+ * <div class="instui-position-relative">…</div>
+ */
+${rules.join("\n")}`;
 	}
 }).css;
 //#endregion
-//#region src/utilities/icon-glyphs.ts
+//#region src/utilities/overflow/index.ts
+/**
+* The overflow utility — CSS `overflow-x`/`overflow-y` as composable, globally-available classes (bare,
+* or chained onto any component) — copied from `view`'s former `-overflow-{x,y}-*` modifiers.
+*
+* @module
+*/
+const OVERFLOWS = [
+	"visible",
+	"hidden",
+	"auto",
+	"scroll",
+	"clip"
+];
+const AXES = ["x", "y"];
+/** The overflow utility as a standalone, header-wrapped stylesheet. */
+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}`);
+		}));
+		return css`/**
+ * @utility overflow
+ * @selector .instui-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.
+ * @example
+ * <div class="instui-overflow-y-auto">…</div>
+ */
+${rules.join("\n")}`;
+	}
+}).css;
+//#endregion
+//#region src/utilities/cursor/index.ts
+/**
+* The cursor utility — CSS `cursor` as composable, globally-available classes (bare, or chained onto
+* any component) — copied from `view`'s former `-cursor-*` modifiers.
+*
+* @module
+*/
+const CURSORS = [
+	"auto",
+	"default",
+	"pointer",
+	"not-allowed",
+	"text",
+	"move",
+	"grab",
+	"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}; }`;
+});
+/** The cursor utility as a standalone, header-wrapped stylesheet. */
+const cursorUtilitiesCss = defineUtility({
+	name: "cursor",
+	css: (p) => {
+		const rules = buildPropertyRules(p, "cursor", "cursor", Array.from(CURSORS));
+		return css`/**
+ * @utility cursor
+ * @selector .instui-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.
+ * @example
+ * <div class="instui-cursor-pointer">…</div>
+ */
+${rules.join("\n")}`;
+	}
+}).css;
+//#endregion
+//#region src/utilities/stacking/index.ts
+/**
+* The stacking utility — a global, dual copy of `@pantoken/plugin-stacking`'s `.instui-stack-<level>`
+* z-index scale (reusing the same class word), usable bare or chained onto any component.
+*
+* @module
+*/
+/** The stacking depths, deepest → topmost — same order and names as `@pantoken/plugin-stacking`. */
+const STACKING_LEVELS = [
+	"deepest",
+	"below",
+	"above",
+	"topmost"
+];
+/** The stacking utility as a standalone, header-wrapped stylesheet. */
+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 css`/**
+ * @utility stacking
+ * @selector .instui-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).
+ * @example
+ * <div class="instui-stack-topmost">Always on top.</div>
+ */
+${rules.join("\n")}`;
+	}
+}).css;
+/** The mask utility as a standalone, header-wrapped stylesheet. */
+const maskUtilityCss = defineUtility({
+	name: "maskglobal",
+	css: (p) => {
+		const selectors = (name) => globalSelectors(p, `.${p}mask-${name}`, `.-mask-${name}`).join(", ");
+		const base = selectors("overlay");
+		const fullscreen = selectors("fullscreen");
+		const blur = selectors("blur");
+		return css`/**
+ * @utility maskglobal
+ * @selector .instui-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.
+ * @example
+ * <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; }
+${blur} { backdrop-filter: blur(0.5rem); }`;
+	}
+}).css;
+/** The transition utility as a standalone, header-wrapped stylesheet. */
+const transitionCss = defineUtility({
+	name: "transition",
+	css: (p) => transition$1.replaceAll(SENTINEL, p)
+}).css;
+//#endregion
+//#region src/utilities/truncate/index.ts
+/**
+* The truncate utility — ellipsis truncation with line clamping controlled by `--lines`, as composable,
+* globally-available classes (bare, or chained onto any component) — moved from `truncate`'s former
+* standalone component record.
+*
+* @module
+*/
+const MAX_LINES = [
+	1,
+	2,
+	3,
+	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}`);
+/** 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 maxLinesRules = MAX_LINES.map((n) => {
+			return `${[...truncateSelectors(p, `.-max-lines-${n}`), ...truncateSelectors(p, `.-lines-${n}`)].join(", ")} { --lines: ${n}; }`;
+		});
+		return css`/**
+ * @utility truncate
+ * @selector .instui-truncate
+ * @global
+ * @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\`.
+ * @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>
+ * @related text — Body typography that this truncates.
+ */
+
+@property --lines {
+  syntax: "<integer>";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --ellipsis {
+  /* Keep the strictest grammar our current CSS parser accepts.
+     \`fade()\` is valid per modern specs/MDN but currently rejected in this
+     descriptor by the toolchain parser during pack/build. */
+  syntax: "clip | ellipsis | <string> | fade";
+  inherits: false;
+  initial-value: ellipsis;
+}
+
+${base} {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--lines, 1);
+  line-clamp: var(--lines, 1);
+  overflow: hidden;
+  text-overflow: var(--ellipsis);
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: break-all;
+  font-family: var(--instui-component-truncate-text-font-family);
+  line-height: var(--instui-component-truncate-text-line-height);
+}
+
+${character} { word-break: break-all; }
+
+${word} { word-break: break-word; }
+
+${maxLinesRules.join("\n\n")}`;
+	}
+}).css;
+/** The visual-debug utility as a standalone, header-wrapped stylesheet. */
+const visualDebugCss = defineUtility({
+	name: "visual-debug",
+	css: (p) => visualDebug$1.replaceAll(SENTINEL, p)
+}).css;
+//#endregion
+//#region src/utilities/icon-glyphs/index.ts
 /**
 * The glyph-token half of the icon system: one `.<prefix>-icon-<name>` class per icon that points
 * `--pantoken-glyph` at the matching `--instui-icon-<name>` token. Bespoke (no cssdoc record, not in
@@ -2452,8 +3226,8 @@ function baseCss() {
 }
 /**
 * Build the aggregated component stylesheet: every component's rules in the `COMPONENTS` concat order.
-* The size-alias and deprecated-alias twins are appended PER COMPONENT (within its own chunk) so each
-* alias documents on its own page — the deprecated aliases are discovered from each record's
+* The size-alias and alias twins are appended PER COMPONENT (within its own chunk) so each alias
+* documents on its own page — the aliases are discovered from each record's `@alias {@link -x}` or
 * `@deprecated {@link -x}` metadata (see `withAliases`), not a central hand-kept list. The
 * `--instui-elevation-*` shadow scale the components reference is defined in the token sheet
 * (`@pantoken/css`), so it's no longer inlined here.
@@ -2466,4 +3240,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, buttonCss, bylineCss, calendarCss, checkboxCss, closeButtonCss, componentsCss, contextViewCss, elevationCss, elevationDeclarations, fileDropCss, focusOutlineCss, focusOutlineDeclarations, focusOutlineRules, formFieldCss, formFieldGroupCss, formFieldMessagesCss, gapCss, headingCss, iconCss, iconGlyphsCss, imgCss, inPlaceEditCss, inputGroupCss, layoutUtilitiesCss, linkCss, listCss, maskCss, menuCss, metricCss, modalCss, numberInputCss, paginationCss, pillCss, popoverCss, progressCircleCss, progressCss, proseCss, radioCss, radioInputGroupCss, rangeInputCss, ratingCss, responsiveUtilitiesCss, screenReaderContentCss, selectCss, sideNavBarCss, simpleSelectCss, spacingUtilitiesCss, spinnerCss, tableCss, tabsCss, tagCss, textAreaCss, textCss, textInputCss, toggleDetailsCss, toggleGroupCss, tooltipCss, trayCss, treeBrowserCss, truncateCss, viewCss };
+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 };