@pantoken/components 0.4.1 → 0.5.1

package/dist/index.mjs

@@ -1,4 +1,6 @@
 import { alpha, darken } from "@pantoken/plugin-colors";
+import { progressTransitionRules } from "@pantoken/plugin-transition/progress";
+import { progressCircleTransitionRules } from "@pantoken/plugin-transition/progress-circle";
 import { ELEVATION_NAMES, FOCUSABLE_SELECTOR, elevationDeclarations, elevationDeclarations as elevationDeclarations$1, focusOutlineDeclarations, focusOutlineDeclarations as focusOutlineDeclarations$1, focusOutlineRules, focusOutlineRules as focusOutlineRules$1 } from "@pantoken/utils";
 //#region src/lib/aliases.ts
 /** `@modifier -alias — @deprecated {@link -canonical}` (em-dash or hyphen separator; optional leading dot). */
@@ -15,11 +17,13 @@ function deprecatedAliasPairs(rawRecord) {
 }
 /** Long-form spellings for the size scale — emitted as first-class aliases beside the short forms. */
 const SIZE_LONG = {
+	"2xs": "xx-small",
 	xs: "x-small",
 	sm: "small",
 	md: "medium",
 	lg: "large",
-	xl: "x-large"
+	xl: "x-large",
+	"2xl": "xx-large"
 };
 /**
 * For every rule whose selector uses a short size class (`.-size-sm`), append a twin rule with the
@@ -28,8 +32,8 @@ const SIZE_LONG = {
 */
 function withSizeAliases(css) {
 	const extra = [];
-	for (const [, selector, , body] of css.matchAll(/([^{}]*\.-size-(xs|sm|md|lg|xl)\b[^{}]*)(\{[^{}]*\})/g)) {
-		const long = selector.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\.-size-(xs|sm|md|lg|xl)\b/g, (_m, s) => `.-size-${SIZE_LONG[s]}`).trim();
+	for (const [, selector, , body] of css.matchAll(/([^{}]*\.-size-(2xs|xs|sm|md|lg|xl|2xl)\b[^{}]*)(\{[^{}]*\})/g)) {
+		const long = selector.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\.-size-(2xs|xs|sm|md|lg|xl|2xl)\b/g, (_m, s) => `.-size-${SIZE_LONG[s]}`).trim();
 		extra.push(`${long} ${body}`);
 	}
 	return extra.length ? `${css}\n/* size aliases */\n${extra.join("\n")}\n` : css;
@@ -43,7 +47,7 @@ function withSizeAliases(css) {
 */
 function withSizeAliasDocs(comment, body) {
 	if (!comment) return comment;
-	const shorts = new Set([...body.matchAll(/\.-size-(xs|sm|md|lg|xl)\b/gu)].map((m) => m[1]));
+	const shorts = new Set([...body.matchAll(/\.-size-(2xs|xs|sm|md|lg|xl|2xl)\b/gu)].map((m) => m[1]));
 	const lines = [];
 	for (const short of shorts) {
 		const long = SIZE_LONG[short];
@@ -116,6 +120,41 @@ const CHEVRON_DOWN_ICON = iconMask("chevron-down");
 * white on `--ai`, the violet→sea gradient on `--ai-secondary`. Source: `@instructure/ui-icons`.
 */
 const AI_ICON_MASK = "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M960 0L1219.29 700.713L1920 960L1219.29 1219.29L960 1920L700.713 1219.29L0 960L700.713 700.713L960 0Z'/%3E%3Cpath d='M1600 0L1686.43 233.571L1920 320L1686.43 406.429L1600 640L1513.57 406.429L1280 320L1513.57 233.571L1600 0Z'/%3E%3C/svg%3E\") center / contain no-repeat";
+/**
+* `@property` registrations for the numeric progress inputs (`--value`/`--min`/`--max` plus their
+* deprecated `--value-now`/`--value-max` aliases) shared verbatim by progress-bar and progress-circle,
+* so both standalone stylesheets register them without duplicating the block in each `.css` source.
+* Prefix-independent — custom property names aren't namespaced.
+*/
+const PROGRESS_NUMERIC_PROPERTIES = `@property --value {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --value-now {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --min {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --max {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 100;
+}
+
+@property --value-max {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 100;
+}`;
 /** Spacing step → value on the pantoken spacing scale. */
 const SPACING_STEPS = {
 	"0": "var(--instui-component-shared-tokens-spacing-general-space-none)",
@@ -149,20 +188,26 @@ const SPACING_SIDES = {
 * @module
 */
 /**
-* Split a record's leading `/** … *\/` doc comment from its CSS body. The alias post-processors scan
-* for `{ … }` rule bodies, so they must never see the comment's `{@link …}` braces — `make()` runs them
-* on the body alone and recombines. Tolerates leading whitespace before `/**` (an authored template
-* literal often opens with a newline); drops the single newline separating the comment from the body.
+* Split a record's `/** … *\/` doc comment from its CSS body. The alias post-processors scan for
+* `{ … }` rule bodies, so they must never see the comment's `{@link …}` braces — `make()` runs them on
+* the body alone and recombines. Tolerates leading whitespace before `/**` (an authored template
+* literal often opens with a newline); drops the single newline separating the comment from the rest.
+* The comment isn't always the very first thing: some builders prepend shared, comment-free CSS (like
+* `@property` registrations) ahead of the record's own doc comment — that prefix stays in `body`, ahead
+* of the rest, so alias twins still append after the CSS they document instead of vanishing silently.
 */
 function splitLeadingDocComment(raw) {
-	const m = raw.match(/^\s*\/\*\*[\s\S]*?\*\//u);
+	const m = raw.match(/\/\*\*[\s\S]*?\*\//u);
 	if (!m) return {
 		comment: "",
 		body: raw
 	};
+	const start = raw.indexOf(m[0]);
+	const prefix = raw.slice(0, start).trim();
+	const rest = raw.slice(start + m[0].length).replace(/^\n/u, "");
 	return {
-		comment: m[0].replace(/^\s+/u, ""),
-		body: raw.slice(m[0].length).replace(/^\n/u, "")
+		comment: m[0],
+		body: prefix ? `${prefix}\n${rest}` : rest
 	};
 }
 function make(kind, input) {
@@ -217,14 +262,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 * @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 */\n.pfx-alert {\n  position: relative;\n  min-inline-size: 12rem;\n  padding: var(--instui-component-alert-content-padding-vertical)\n    var(--instui-component-alert-content-padding-horizontal);\n  padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n  background: var(--instui-component-alert-background);\n  color: var(--instui-component-alert-color);\n  border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n    var(--instui-component-alert-info-border-color);\n  border-radius: var(--instui-component-alert-border-radius);\n  /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n  box-shadow: var(--instui-elevation-above);\n  font-family: var(--instui-component-alert-content-font-family);\n  font-size: var(--instui-component-alert-content-font-size);\n  font-weight: var(--instui-component-alert-content-font-weight);\n  line-height: var(--instui-component-alert-content-line-height);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* 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 * @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 */\n.pfx-alert {\n  position: relative;\n  min-inline-size: 12rem;\n  padding: var(--instui-component-alert-content-padding-vertical)\n    var(--instui-component-alert-content-padding-horizontal);\n  padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n  background: var(--instui-component-alert-background);\n  color: var(--instui-component-alert-color);\n  border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n    var(--instui-component-alert-info-border-color);\n  border-radius: var(--instui-component-alert-border-radius);\n  /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n  box-shadow: var(--instui-elevation-above);\n  font-family: var(--instui-component-alert-content-font-family);\n  font-size: var(--instui-component-alert-content-font-size);\n  font-weight: var(--instui-component-alert-content-font-weight);\n  line-height: var(--instui-component-alert-content-line-height);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* 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 * @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 */\n.pfx-alert {\n  position: relative;\n  min-inline-size: 12rem;\n  padding: var(--instui-component-alert-content-padding-vertical)\n    var(--instui-component-alert-content-padding-horizontal);\n  padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n  background: var(--instui-component-alert-background);\n  color: var(--instui-component-alert-color);\n  border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n    var(--instui-component-alert-info-border-color);\n  border-radius: var(--instui-component-alert-border-radius);\n  /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n  box-shadow: var(--instui-elevation-above);\n  font-family: var(--instui-component-alert-content-font-family);\n  font-size: var(--instui-component-alert-content-font-size);\n  font-weight: var(--instui-component-alert-content-font-weight);\n  line-height: var(--instui-component-alert-content-line-height);\n  --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n  --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(-1 * var(--instui-component-alert-border-width));\n  inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n  inline-size: 2.5rem;\n  border-start-start-radius: var(--instui-component-alert-border-radius);\n  border-end-start-radius: var(--instui-component-alert-border-radius);\n  background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n  content: \"\";\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  inline-size: 2.5rem;\n  background: var(--instui-component-alert-icon-color);\n  -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n  mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n   takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n  position: absolute;\n  inset-block-start: var(--instui-spacing-space-xs);\n  inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n  padding-inline-end: calc(\n    var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n  );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n  box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* 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 — @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;
 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.\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — Ash palette colour.\n * @modifier -color-blue — Blue palette colour.\n * @modifier -color-green — Green palette colour.\n * @modifier -color-grey — Grey palette colour.\n * @modifier -color-orange — Orange palette colour.\n * @modifier -color-red — Red palette colour.\n * @modifier -has-inverse-color — Use the inverse (on-dark) text colour.\n * @modifier -shape-rectangle — Square (rectangular) shape instead of a circle.\n * @modifier -show-border — Add a border ring.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-2xl — Two sizes larger.\n * @modifier -color-accent1 — @deprecated {@link -color-blue}\n * @modifier -color-accent2 — @deprecated {@link -color-green}\n * @modifier -color-accent3 — @deprecated {@link -color-red}\n * @modifier -color-accent4 — @deprecated {@link -color-orange}\n * @modifier -color-accent5 — @deprecated {@link -color-ash}\n * @modifier -color-accent6 — @deprecated {@link -color-grey}\n * @example\n * ```html\n * <span class=\"pfx-avatar instui-me-sm\">DW</span>\n * <span class=\"pfx-avatar -color-ai\">AI</span>\n * ```\n * @related byline — Can host an avatar as its leading hero figure.\n */\n.pfx-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-avatar-size-md);\n  height: var(--instui-component-avatar-size-md);\n  border-radius: 50%;\n  overflow: hidden;\n  background: var(--instui-component-avatar-background-color);\n  color: var(--instui-component-avatar-blue-text-color);\n  border: var(--instui-component-avatar-border-width-sm) solid\n    var(--instui-component-avatar-border-color);\n  font-family: var(--instui-component-avatar-font-family);\n  font-size: var(--instui-component-avatar-font-size-md);\n  font-weight: var(--instui-component-avatar-font-weight);\n}\n\n.pfx-avatar.-shape-rectangle {\n  border-radius: var(--instui-component-avatar-rectangle-radius);\n}\n\n.pfx-avatar.-size-sm {\n  width: var(--instui-component-avatar-size-sm);\n  height: var(--instui-component-avatar-size-sm);\n  font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-2xs {\n  width: var(--instui-component-avatar-size2xs);\n  height: var(--instui-component-avatar-size2xs);\n  font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs {\n  width: var(--instui-component-avatar-size-xs);\n  height: var(--instui-component-avatar-size-xs);\n  font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-lg {\n  width: var(--instui-component-avatar-size-lg);\n  height: var(--instui-component-avatar-size-lg);\n  font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl {\n  width: var(--instui-component-avatar-size-xl);\n  height: var(--instui-component-avatar-size-xl);\n  font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl {\n  width: var(--instui-component-avatar-size2xl);\n  height: var(--instui-component-avatar-size2xl);\n  font-size: var(--instui-component-avatar-font-size2xl);\n}\n\n.pfx-avatar.-color-ash {\n  color: var(--instui-component-avatar-ash-text-color);\n}\n\n.pfx-avatar.-color-ash.-has-inverse-color {\n  background: var(--instui-component-avatar-ash-background-color);\n}\n\n.pfx-avatar.-color-blue {\n  color: var(--instui-component-avatar-blue-text-color);\n}\n\n.pfx-avatar.-color-blue.-has-inverse-color {\n  background: var(--instui-component-avatar-blue-background-color);\n}\n\n.pfx-avatar.-color-green {\n  color: var(--instui-component-avatar-green-text-color);\n}\n\n.pfx-avatar.-color-green.-has-inverse-color {\n  background: var(--instui-component-avatar-green-background-color);\n}\n\n.pfx-avatar.-color-grey {\n  color: var(--instui-component-avatar-grey-text-color);\n}\n\n.pfx-avatar.-color-grey.-has-inverse-color {\n  background: var(--instui-component-avatar-grey-background-color);\n}\n\n.pfx-avatar.-color-orange {\n  color: var(--instui-component-avatar-orange-text-color);\n}\n\n.pfx-avatar.-color-orange.-has-inverse-color {\n  background: var(--instui-component-avatar-orange-background-color);\n}\n\n.pfx-avatar.-color-red {\n  color: var(--instui-component-avatar-red-text-color);\n}\n\n.pfx-avatar.-color-red.-has-inverse-color {\n  background: var(--instui-component-avatar-red-background-color);\n}\n\n/* ai: always the violet→sea gradient fill with on-colour text (no border). */\n.pfx-avatar.-color-ai {\n  background: linear-gradient(\n    to bottom,\n    var(--instui-component-avatar-ai-top-gradient-color),\n    var(--instui-component-avatar-ai-bottom-gradient-color)\n  );\n  color: var(--instui-component-avatar-text-on-color);\n  border-color: transparent;\n}\n\n/* hasInverseColor: solid fill (default the accent1/blue surface) + on-colour initials, no ring. A\n   `-color-*` companion overrides the fill per colour (that rule is more specific). */\n.pfx-avatar.-has-inverse-color {\n  background: var(--instui-component-avatar-blue-background-color);\n  color: var(--instui-component-avatar-text-on-color);\n  border-color: transparent;\n}\n\n/* showBorder=\"always\": force the ring back on, even over an inverse fill or a photo. */\n.pfx-avatar.-show-border {\n  border-width: var(--instui-component-avatar-border-width-md);\n  border-style: solid;\n  border-color: var(--instui-component-avatar-border-color);\n}\n\n/* A photo: an <img> child fills the chip and covers the initials (image takes priority). */\n.pfx-avatar > img {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n}\n",
-	"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.\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — Ash palette colour.\n * @modifier -color-blue — Blue palette colour.\n * @modifier -color-green — Green palette colour.\n * @modifier -color-grey — Grey palette colour.\n * @modifier -color-orange — Orange palette colour.\n * @modifier -color-red — Red palette colour.\n * @modifier -has-inverse-color — Use the inverse (on-dark) text colour.\n * @modifier -shape-rectangle — Square (rectangular) shape instead of a circle.\n * @modifier -show-border — Add a border ring.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-2xl — Two sizes larger.\n * @modifier -color-accent1 — @deprecated {@link -color-blue}\n * @modifier -color-accent2 — @deprecated {@link -color-green}\n * @modifier -color-accent3 — @deprecated {@link -color-red}\n * @modifier -color-accent4 — @deprecated {@link -color-orange}\n * @modifier -color-accent5 — @deprecated {@link -color-ash}\n * @modifier -color-accent6 — @deprecated {@link -color-grey}\n * @example\n * ```html\n * <span class=\"pfx-avatar instui-me-sm\">DW</span>\n * <span class=\"pfx-avatar -color-ai\">AI</span>\n * ```\n * @related byline — Can host an avatar as its leading hero figure.\n */\n.pfx-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-avatar-size-md);\n  height: var(--instui-component-avatar-size-md);\n  border-radius: 50%;\n  overflow: hidden;\n  background: var(--instui-component-avatar-background-color);\n  color: var(--instui-component-avatar-blue-text-color);\n  border: var(--instui-component-avatar-border-width-sm) solid\n    var(--instui-component-avatar-border-color);\n  font-family: var(--instui-component-avatar-font-family);\n  font-size: var(--instui-component-avatar-font-size-md);\n  font-weight: var(--instui-component-avatar-font-weight);\n}\n\n.pfx-avatar.-shape-rectangle {\n  border-radius: var(--instui-component-avatar-rectangle-radius);\n}\n\n.pfx-avatar.-size-sm {\n  width: var(--instui-component-avatar-size-sm);\n  height: var(--instui-component-avatar-size-sm);\n  font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-2xs {\n  width: var(--instui-component-avatar-size2xs);\n  height: var(--instui-component-avatar-size2xs);\n  font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs {\n  width: var(--instui-component-avatar-size-xs);\n  height: var(--instui-component-avatar-size-xs);\n  font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-lg {\n  width: var(--instui-component-avatar-size-lg);\n  height: var(--instui-component-avatar-size-lg);\n  font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl {\n  width: var(--instui-component-avatar-size-xl);\n  height: var(--instui-component-avatar-size-xl);\n  font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl {\n  width: var(--instui-component-avatar-size2xl);\n  height: var(--instui-component-avatar-size2xl);\n  font-size: var(--instui-component-avatar-font-size2xl);\n}\n\n.pfx-avatar.-color-ash {\n  color: var(--instui-component-avatar-ash-text-color);\n}\n\n.pfx-avatar.-color-ash.-has-inverse-color {\n  background: var(--instui-component-avatar-ash-background-color);\n}\n\n.pfx-avatar.-color-blue {\n  color: var(--instui-component-avatar-blue-text-color);\n}\n\n.pfx-avatar.-color-blue.-has-inverse-color {\n  background: var(--instui-component-avatar-blue-background-color);\n}\n\n.pfx-avatar.-color-green {\n  color: var(--instui-component-avatar-green-text-color);\n}\n\n.pfx-avatar.-color-green.-has-inverse-color {\n  background: var(--instui-component-avatar-green-background-color);\n}\n\n.pfx-avatar.-color-grey {\n  color: var(--instui-component-avatar-grey-text-color);\n}\n\n.pfx-avatar.-color-grey.-has-inverse-color {\n  background: var(--instui-component-avatar-grey-background-color);\n}\n\n.pfx-avatar.-color-orange {\n  color: var(--instui-component-avatar-orange-text-color);\n}\n\n.pfx-avatar.-color-orange.-has-inverse-color {\n  background: var(--instui-component-avatar-orange-background-color);\n}\n\n.pfx-avatar.-color-red {\n  color: var(--instui-component-avatar-red-text-color);\n}\n\n.pfx-avatar.-color-red.-has-inverse-color {\n  background: var(--instui-component-avatar-red-background-color);\n}\n\n/* ai: always the violet→sea gradient fill with on-colour text (no border). */\n.pfx-avatar.-color-ai {\n  background: linear-gradient(\n    to bottom,\n    var(--instui-component-avatar-ai-top-gradient-color),\n    var(--instui-component-avatar-ai-bottom-gradient-color)\n  );\n  color: var(--instui-component-avatar-text-on-color);\n  border-color: transparent;\n}\n\n/* hasInverseColor: solid fill (default the accent1/blue surface) + on-colour initials, no ring. A\n   `-color-*` companion overrides the fill per colour (that rule is more specific). */\n.pfx-avatar.-has-inverse-color {\n  background: var(--instui-component-avatar-blue-background-color);\n  color: var(--instui-component-avatar-text-on-color);\n  border-color: transparent;\n}\n\n/* showBorder=\"always\": force the ring back on, even over an inverse fill or a photo. */\n.pfx-avatar.-show-border {\n  border-width: var(--instui-component-avatar-border-width-md);\n  border-style: solid;\n  border-color: var(--instui-component-avatar-border-color);\n}\n\n/* A photo: an <img> child fills the chip and covers the initials (image takes priority). */\n.pfx-avatar > img {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n}\n",
-	"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.\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — Ash palette colour.\n * @modifier -color-blue — Blue palette colour.\n * @modifier -color-green — Green palette colour.\n * @modifier -color-grey — Grey palette colour.\n * @modifier -color-orange — Orange palette colour.\n * @modifier -color-red — Red palette colour.\n * @modifier -has-inverse-color — Use the inverse (on-dark) text colour.\n * @modifier -shape-rectangle — Square (rectangular) shape instead of a circle.\n * @modifier -show-border — Add a border ring.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-2xl — Two sizes larger.\n * @modifier -color-accent1 — @deprecated {@link -color-blue}\n * @modifier -color-accent2 — @deprecated {@link -color-green}\n * @modifier -color-accent3 — @deprecated {@link -color-red}\n * @modifier -color-accent4 — @deprecated {@link -color-orange}\n * @modifier -color-accent5 — @deprecated {@link -color-ash}\n * @modifier -color-accent6 — @deprecated {@link -color-grey}\n * @example\n * ```html\n * <span class=\"pfx-avatar instui-me-sm\">DW</span>\n * <span class=\"pfx-avatar -color-ai\">AI</span>\n * ```\n * @related byline — Can host an avatar as its leading hero figure.\n */\n.pfx-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-avatar-size-md);\n  height: var(--instui-component-avatar-size-md);\n  border-radius: 50%;\n  overflow: hidden;\n  background: var(--instui-component-avatar-background-color);\n  color: var(--instui-component-avatar-blue-text-color);\n  border: var(--instui-component-avatar-border-width-sm) solid\n    var(--instui-component-avatar-border-color);\n  font-family: var(--instui-component-avatar-font-family);\n  font-size: var(--instui-component-avatar-font-size-md);\n  font-weight: var(--instui-component-avatar-font-weight);\n}\n\n.pfx-avatar.-shape-rectangle {\n  border-radius: var(--instui-component-avatar-rectangle-radius);\n}\n\n.pfx-avatar.-size-sm {\n  width: var(--instui-component-avatar-size-sm);\n  height: var(--instui-component-avatar-size-sm);\n  font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-2xs {\n  width: var(--instui-component-avatar-size2xs);\n  height: var(--instui-component-avatar-size2xs);\n  font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs {\n  width: var(--instui-component-avatar-size-xs);\n  height: var(--instui-component-avatar-size-xs);\n  font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-lg {\n  width: var(--instui-component-avatar-size-lg);\n  height: var(--instui-component-avatar-size-lg);\n  font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl {\n  width: var(--instui-component-avatar-size-xl);\n  height: var(--instui-component-avatar-size-xl);\n  font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl {\n  width: var(--instui-component-avatar-size2xl);\n  height: var(--instui-component-avatar-size2xl);\n  font-size: var(--instui-component-avatar-font-size2xl);\n}\n\n.pfx-avatar.-color-ash {\n  color: var(--instui-component-avatar-ash-text-color);\n}\n\n.pfx-avatar.-color-ash.-has-inverse-color {\n  background: var(--instui-component-avatar-ash-background-color);\n}\n\n.pfx-avatar.-color-blue {\n  color: var(--instui-component-avatar-blue-text-color);\n}\n\n.pfx-avatar.-color-blue.-has-inverse-color {\n  background: var(--instui-component-avatar-blue-background-color);\n}\n\n.pfx-avatar.-color-green {\n  color: var(--instui-component-avatar-green-text-color);\n}\n\n.pfx-avatar.-color-green.-has-inverse-color {\n  background: var(--instui-component-avatar-green-background-color);\n}\n\n.pfx-avatar.-color-grey {\n  color: var(--instui-component-avatar-grey-text-color);\n}\n\n.pfx-avatar.-color-grey.-has-inverse-color {\n  background: var(--instui-component-avatar-grey-background-color);\n}\n\n.pfx-avatar.-color-orange {\n  color: var(--instui-component-avatar-orange-text-color);\n}\n\n.pfx-avatar.-color-orange.-has-inverse-color {\n  background: var(--instui-component-avatar-orange-background-color);\n}\n\n.pfx-avatar.-color-red {\n  color: var(--instui-component-avatar-red-text-color);\n}\n\n.pfx-avatar.-color-red.-has-inverse-color {\n  background: var(--instui-component-avatar-red-background-color);\n}\n\n/* ai: always the violet→sea gradient fill with on-colour text (no border). */\n.pfx-avatar.-color-ai {\n  background: linear-gradient(\n    to bottom,\n    var(--instui-component-avatar-ai-top-gradient-color),\n    var(--instui-component-avatar-ai-bottom-gradient-color)\n  );\n  color: var(--instui-component-avatar-text-on-color);\n  border-color: transparent;\n}\n\n/* hasInverseColor: solid fill (default the accent1/blue surface) + on-colour initials, no ring. A\n   `-color-*` companion overrides the fill per colour (that rule is more specific). */\n.pfx-avatar.-has-inverse-color {\n  background: var(--instui-component-avatar-blue-background-color);\n  color: var(--instui-component-avatar-text-on-color);\n  border-color: transparent;\n}\n\n/* showBorder=\"always\": force the ring back on, even over an inverse fill or a photo. */\n.pfx-avatar.-show-border {\n  border-width: var(--instui-component-avatar-border-width-md);\n  border-style: solid;\n  border-color: var(--instui-component-avatar-border-color);\n}\n\n/* A photo: an <img> child fills the chip and covers the initials (image takes priority). */\n.pfx-avatar > img {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n}\n"
+	"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;
 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",
@@ -338,14 +383,14 @@ const popover$1 = {
 	"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 progressCircle$1 = {
-	"rebrand": "/**\n * @component progress-circle\n * @summary A circular progress ring driven by a `--value` (0–100) custom property.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; the `--value` custom property drives the arc.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @cssproperty --value <number> — The progress percentage (0–100) that drives the arc; registered with @property so it can transition.\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Give it role=\"img\" and an aria-label stating the percentage, since the ring is drawn in CSS.\n * @compat Registers `--value` with `@property` (so the arc can transition) and paints with CSS `mask` and `conic-gradient`; where `@property` is unsupported the ring still renders but won't animate.\n * @example\n * <span class=\"pfx-progress-circle -size-sm\" role=\"img\" aria-label=\"25 percent\">\n *   <span class=\"value\">25%</span>\n * </span>\n * @related progress — The linear bar form of the same determinate progress.\n */\n/* --value (0–100) drives the arc; registered so the conic-gradient re-evaluates (and can transition). */\n@property --value {\n  syntax: \"<number>\";\n  inherits: true;\n  initial-value: 0;\n}\n.pfx-progress-circle {\n  --value: 0;\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  color: var(--instui-component-progress-circle-color);\n  font-family: var(--instui-component-progress-circle-font-family);\n  font-weight: var(--instui-component-progress-circle-font-weight);\n  line-height: var(--instui-component-progress-circle-line-height);\n}\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: conic-gradient(\n    var(--pantoken-pc-fill) calc(var(--value) * 1%),\n    var(--pantoken-pc-track) 0\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    #0000 calc(100% - var(--pantoken-pc-stroke)),\n    #000 0\n  );\n  mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n}\n.pfx-progress-circle .value {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.pfx-progress-circle.-size-xs {\n  width: var(--instui-component-progress-circle-x-small-size);\n  height: var(--instui-component-progress-circle-x-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n.pfx-progress-circle.-size-sm {\n  width: var(--instui-component-progress-circle-small-size);\n  height: var(--instui-component-progress-circle-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n.pfx-progress-circle.-size-lg {\n  width: var(--instui-component-progress-circle-large-size);\n  height: var(--instui-component-progress-circle-large-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n.pfx-progress-circle.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n.pfx-progress-circle.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n.pfx-progress-circle.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n.pfx-progress-circle.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n.pfx-progress-circle.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n.pfx-progress-circle.-color-primary-inverse {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n  color: var(--instui-component-progress-circle-color-inverse);\n}\n",
-	"canvas": "/**\n * @component progress-circle\n * @summary A circular progress ring driven by a `--value` (0–100) custom property.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; the `--value` custom property drives the arc.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @cssproperty --value <number> — The progress percentage (0–100) that drives the arc; registered with @property so it can transition.\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Give it role=\"img\" and an aria-label stating the percentage, since the ring is drawn in CSS.\n * @compat Registers `--value` with `@property` (so the arc can transition) and paints with CSS `mask` and `conic-gradient`; where `@property` is unsupported the ring still renders but won't animate.\n * @example\n * <span class=\"pfx-progress-circle -size-sm\" role=\"img\" aria-label=\"25 percent\">\n *   <span class=\"value\">25%</span>\n * </span>\n * @related progress — The linear bar form of the same determinate progress.\n */\n/* --value (0–100) drives the arc; registered so the conic-gradient re-evaluates (and can transition). */\n@property --value {\n  syntax: \"<number>\";\n  inherits: true;\n  initial-value: 0;\n}\n.pfx-progress-circle {\n  --value: 0;\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  color: var(--instui-component-progress-circle-color);\n  font-family: var(--instui-component-progress-circle-font-family);\n  font-weight: var(--instui-component-progress-circle-font-weight);\n  line-height: var(--instui-component-progress-circle-line-height);\n}\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: conic-gradient(\n    var(--pantoken-pc-fill) calc(var(--value) * 1%),\n    var(--pantoken-pc-track) 0\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    #0000 calc(100% - var(--pantoken-pc-stroke)),\n    #000 0\n  );\n  mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n}\n.pfx-progress-circle .value {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.pfx-progress-circle.-size-xs {\n  width: var(--instui-component-progress-circle-x-small-size);\n  height: var(--instui-component-progress-circle-x-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n.pfx-progress-circle.-size-sm {\n  width: var(--instui-component-progress-circle-small-size);\n  height: var(--instui-component-progress-circle-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n.pfx-progress-circle.-size-lg {\n  width: var(--instui-component-progress-circle-large-size);\n  height: var(--instui-component-progress-circle-large-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n.pfx-progress-circle.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n.pfx-progress-circle.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n.pfx-progress-circle.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n.pfx-progress-circle.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n.pfx-progress-circle.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n.pfx-progress-circle.-color-primary-inverse {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n  color: var(--instui-component-progress-circle-color-inverse);\n}\n",
-	"canvasHighContrast": "/**\n * @component progress-circle\n * @summary A circular progress ring driven by a `--value` (0–100) custom property.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; the `--value` custom property drives the arc.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @cssproperty --value <number> — The progress percentage (0–100) that drives the arc; registered with @property so it can transition.\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Give it role=\"img\" and an aria-label stating the percentage, since the ring is drawn in CSS.\n * @compat Registers `--value` with `@property` (so the arc can transition) and paints with CSS `mask` and `conic-gradient`; where `@property` is unsupported the ring still renders but won't animate.\n * @example\n * <span class=\"pfx-progress-circle -size-sm\" role=\"img\" aria-label=\"25 percent\">\n *   <span class=\"value\">25%</span>\n * </span>\n * @related progress — The linear bar form of the same determinate progress.\n */\n/* --value (0–100) drives the arc; registered so the conic-gradient re-evaluates (and can transition). */\n@property --value {\n  syntax: \"<number>\";\n  inherits: true;\n  initial-value: 0;\n}\n.pfx-progress-circle {\n  --value: 0;\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--instui-component-progress-circle-medium-size);\n  height: var(--instui-component-progress-circle-medium-size);\n  color: var(--instui-component-progress-circle-color);\n  font-family: var(--instui-component-progress-circle-font-family);\n  font-weight: var(--instui-component-progress-circle-font-weight);\n  line-height: var(--instui-component-progress-circle-line-height);\n}\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: conic-gradient(\n    var(--pantoken-pc-fill) calc(var(--value) * 1%),\n    var(--pantoken-pc-track) 0\n  );\n  -webkit-mask: radial-gradient(\n    farthest-side,\n    #0000 calc(100% - var(--pantoken-pc-stroke)),\n    #000 0\n  );\n  mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n}\n.pfx-progress-circle .value {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.pfx-progress-circle.-size-xs {\n  width: var(--instui-component-progress-circle-x-small-size);\n  height: var(--instui-component-progress-circle-x-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n.pfx-progress-circle.-size-sm {\n  width: var(--instui-component-progress-circle-small-size);\n  height: var(--instui-component-progress-circle-small-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n.pfx-progress-circle.-size-lg {\n  width: var(--instui-component-progress-circle-large-size);\n  height: var(--instui-component-progress-circle-large-size);\n  --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n.pfx-progress-circle.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n.pfx-progress-circle.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n.pfx-progress-circle.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n.pfx-progress-circle.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n.pfx-progress-circle.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n.pfx-progress-circle.-color-primary-inverse {\n  --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n  --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n  color: var(--instui-component-progress-circle-color-inverse);\n}\n"
+	"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;
 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 The value label is a separate sibling element (`.pfx-progress-value`), not a child of the bar.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @accessibility Expose progress via `role=\"progressbar\"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` (or `role=\"img\"` plus `aria-label`), mirroring how progress-circle is labelled.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * <div class=\"pfx-progress -color-brand\">\n *   <div class=\"bar\"></div>\n * </div>\n * @related progress-circle — The circular form of the same determinate progress.\n */\n.pfx-progress {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: var(--instui-component-progress-bar-medium-height);\n  background: var(--instui-component-progress-bar-track-color);\n  /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n  border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n    var(--instui-component-progress-bar-border-color);\n  border-radius: var(--instui-component-progress-bar-border-radius);\n  overflow: hidden;\n}\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n   border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n   the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n  content: \"\";\n  position: absolute;\n  inset-inline: 0;\n  bottom: 0;\n  height: var(--instui-component-progress-bar-track-bottom-border-width);\n  background: var(--instui-component-progress-bar-track-bottom-border-color);\n  pointer-events: none;\n}\n.pfx-progress.-size-xs {\n  height: var(--instui-component-progress-bar-x-small-height);\n}\n.pfx-progress.-size-sm {\n  height: var(--instui-component-progress-bar-small-height);\n}\n.pfx-progress.-size-lg {\n  height: var(--instui-component-progress-bar-large-height);\n}\n@scope (.pfx-progress) {\n  :scope > .bar {\n    height: 100%;\n    background: var(--instui-color-background-brand);\n    border-radius: var(--instui-component-progress-bar-border-radius);\n  }\n  :scope.-should-animate > .bar {\n    transition: width 0.5s ease;\n  }\n}\n.pfx-progress.-color-brand .bar {\n  background: var(--instui-color-background-brand);\n}\n.pfx-progress.-color-info .bar {\n  background: var(--instui-color-background-info);\n}\n.pfx-progress.-color-success .bar {\n  background: var(--instui-color-background-success);\n}\n.pfx-progress.-color-warning .bar {\n  background: var(--instui-color-background-warning);\n}\n.pfx-progress.-color-danger .bar {\n  background: var(--instui-color-background-error);\n}\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n   InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n   wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n  background: var(--instui-component-progress-bar-track-color-inverse);\n  border-color: var(--instui-component-progress-bar-border-color-inverse);\n  color: var(--instui-component-progress-bar-text-color-inverse);\n}\n.pfx-progress.-color-primary-inverse::after {\n  background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n.pfx-progress.-color-primary-inverse .bar {\n  background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n.pfx-progress-value {\n  padding: 0 var(--instui-component-progress-bar-value-padding);\n  color: var(--instui-component-progress-bar-text-color);\n  font-family: var(--instui-component-progress-bar-font-family);\n  font-size: var(--instui-component-progress-bar-medium-value-font-size);\n  font-weight: var(--instui-component-progress-bar-font-weight);\n  line-height: var(--instui-component-progress-bar-line-height);\n}\n.pfx-progress.-color-inverse ~ .pfx-progress-value,\n.pfx-progress-value.-color-inverse {\n  color: var(--instui-component-progress-bar-text-color-inverse);\n}\n",
-	"canvas": "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks The value label is a separate sibling element (`.pfx-progress-value`), not a child of the bar.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @accessibility Expose progress via `role=\"progressbar\"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` (or `role=\"img\"` plus `aria-label`), mirroring how progress-circle is labelled.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * <div class=\"pfx-progress -color-brand\">\n *   <div class=\"bar\"></div>\n * </div>\n * @related progress-circle — The circular form of the same determinate progress.\n */\n.pfx-progress {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: var(--instui-component-progress-bar-medium-height);\n  background: var(--instui-component-progress-bar-track-color);\n  /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n  border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n    var(--instui-component-progress-bar-border-color);\n  border-radius: var(--instui-component-progress-bar-border-radius);\n  overflow: hidden;\n}\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n   border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n   the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n  content: \"\";\n  position: absolute;\n  inset-inline: 0;\n  bottom: 0;\n  height: var(--instui-component-progress-bar-track-bottom-border-width);\n  background: var(--instui-component-progress-bar-track-bottom-border-color);\n  pointer-events: none;\n}\n.pfx-progress.-size-xs {\n  height: var(--instui-component-progress-bar-x-small-height);\n}\n.pfx-progress.-size-sm {\n  height: var(--instui-component-progress-bar-small-height);\n}\n.pfx-progress.-size-lg {\n  height: var(--instui-component-progress-bar-large-height);\n}\n@scope (.pfx-progress) {\n  :scope > .bar {\n    height: 100%;\n    background: var(--instui-color-background-brand);\n    border-radius: var(--instui-component-progress-bar-border-radius);\n  }\n  :scope.-should-animate > .bar {\n    transition: width 0.5s ease;\n  }\n}\n.pfx-progress.-color-brand .bar {\n  background: var(--instui-color-background-brand);\n}\n.pfx-progress.-color-info .bar {\n  background: var(--instui-color-background-info);\n}\n.pfx-progress.-color-success .bar {\n  background: var(--instui-color-background-success);\n}\n.pfx-progress.-color-warning .bar {\n  background: var(--instui-color-background-warning);\n}\n.pfx-progress.-color-danger .bar {\n  background: var(--instui-color-background-error);\n}\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n   InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n   wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n  background: var(--instui-component-progress-bar-track-color-inverse);\n  border-color: var(--instui-component-progress-bar-border-color-inverse);\n  color: var(--instui-component-progress-bar-text-color-inverse);\n}\n.pfx-progress.-color-primary-inverse::after {\n  background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n.pfx-progress.-color-primary-inverse .bar {\n  background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n.pfx-progress-value {\n  padding: 0 var(--instui-component-progress-bar-value-padding);\n  color: var(--instui-component-progress-bar-text-color);\n  font-family: var(--instui-component-progress-bar-font-family);\n  font-size: var(--instui-component-progress-bar-medium-value-font-size);\n  font-weight: var(--instui-component-progress-bar-font-weight);\n  line-height: var(--instui-component-progress-bar-line-height);\n}\n.pfx-progress.-color-inverse ~ .pfx-progress-value,\n.pfx-progress-value.-color-inverse {\n  color: var(--instui-component-progress-bar-text-color-inverse);\n}\n",
-	"canvasHighContrast": "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks The value label is a separate sibling element (`.pfx-progress-value`), not a child of the bar.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @accessibility Expose progress via `role=\"progressbar\"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` (or `role=\"img\"` plus `aria-label`), mirroring how progress-circle is labelled.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * <div class=\"pfx-progress -color-brand\">\n *   <div class=\"bar\"></div>\n * </div>\n * @related progress-circle — The circular form of the same determinate progress.\n */\n.pfx-progress {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: var(--instui-component-progress-bar-medium-height);\n  background: var(--instui-component-progress-bar-track-color);\n  /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n  border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n    var(--instui-component-progress-bar-border-color);\n  border-radius: var(--instui-component-progress-bar-border-radius);\n  overflow: hidden;\n}\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n   border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n   the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n  content: \"\";\n  position: absolute;\n  inset-inline: 0;\n  bottom: 0;\n  height: var(--instui-component-progress-bar-track-bottom-border-width);\n  background: var(--instui-component-progress-bar-track-bottom-border-color);\n  pointer-events: none;\n}\n.pfx-progress.-size-xs {\n  height: var(--instui-component-progress-bar-x-small-height);\n}\n.pfx-progress.-size-sm {\n  height: var(--instui-component-progress-bar-small-height);\n}\n.pfx-progress.-size-lg {\n  height: var(--instui-component-progress-bar-large-height);\n}\n@scope (.pfx-progress) {\n  :scope > .bar {\n    height: 100%;\n    background: var(--instui-color-background-brand);\n    border-radius: var(--instui-component-progress-bar-border-radius);\n  }\n  :scope.-should-animate > .bar {\n    transition: width 0.5s ease;\n  }\n}\n.pfx-progress.-color-brand .bar {\n  background: var(--instui-color-background-brand);\n}\n.pfx-progress.-color-info .bar {\n  background: var(--instui-color-background-info);\n}\n.pfx-progress.-color-success .bar {\n  background: var(--instui-color-background-success);\n}\n.pfx-progress.-color-warning .bar {\n  background: var(--instui-color-background-warning);\n}\n.pfx-progress.-color-danger .bar {\n  background: var(--instui-color-background-error);\n}\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n   InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n   wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n  background: var(--instui-component-progress-bar-track-color-inverse);\n  border-color: var(--instui-component-progress-bar-border-color-inverse);\n  color: var(--instui-component-progress-bar-text-color-inverse);\n}\n.pfx-progress.-color-primary-inverse::after {\n  background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n.pfx-progress.-color-primary-inverse .bar {\n  background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n.pfx-progress-value {\n  padding: 0 var(--instui-component-progress-bar-value-padding);\n  color: var(--instui-component-progress-bar-text-color);\n  font-family: var(--instui-component-progress-bar-font-family);\n  font-size: var(--instui-component-progress-bar-medium-value-font-size);\n  font-weight: var(--instui-component-progress-bar-font-weight);\n  line-height: var(--instui-component-progress-bar-line-height);\n}\n.pfx-progress.-color-inverse ~ .pfx-progress-value,\n.pfx-progress-value.-color-inverse {\n  color: var(--instui-component-progress-bar-text-color-inverse);\n}\n"
+	"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"
 }.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 * @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",
@@ -388,9 +433,9 @@ const table$1 = {
 	"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;
 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 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;
 const tag$1 = {
 	"rebrand": "/**\n * @component tag\n * @summary An inline chip for a keyword or filter.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n.pfx-tag {\n  display: inline-flex;\n  align-items: center;\n  height: var(--instui-component-tag-height-medium);\n  max-width: var(--instui-component-tag-max-width);\n  padding: 0 var(--instui-component-tag-padding-horizontal);\n  background: var(--instui-component-tag-default-background);\n  color: var(--instui-component-tag-default-color);\n  border: var(--instui-component-tag-default-border-width)\n    var(--instui-component-tag-default-border-style)\n    var(--instui-component-tag-default-border-color);\n  border-radius: var(--instui-component-tag-default-border-radius);\n  font-family: var(--instui-component-tag-font-family);\n  font-size: var(--instui-component-tag-font-size-medium);\n}\n.pfx-tag:hover {\n  background: var(--instui-component-tag-default-background-hover);\n}\n.pfx-tag.-size-sm {\n  height: var(--instui-component-tag-height-small);\n  padding: 0 var(--instui-component-tag-padding-horizontal-small);\n  font-size: var(--instui-component-tag-font-size-small);\n}\n.pfx-tag.-size-lg {\n  height: var(--instui-component-tag-height-large);\n  font-size: var(--instui-component-tag-font-size-large);\n}\n.pfx-tag.-inline {\n  gap: var(--instui-spacing-space-xs);\n  background: var(--instui-component-tag-inline-background);\n  color: var(--instui-component-tag-inline-color);\n  border-color: var(--instui-component-tag-inline-border-color);\n  border-radius: var(--instui-component-tag-inline-border-radius);\n  cursor: pointer;\n}\n.pfx-tag.-inline:hover {\n  background: var(--instui-component-tag-inline-background-hover);\n}\n.pfx-tag.-inline::after {\n  content: \"\";\n  flex: none;\n  width: 1em;\n  height: 1em;\n  background: var(--instui-component-tag-inline-icon-color);\n  -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n  mask: var(--instui-icon-x) center / contain no-repeat;\n}\n.pfx-tag.-inline:hover::after {\n  background: var(--instui-component-tag-inline-icon-hover-color);\n}\n/* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n.pfx-tag.-readonly {\n  cursor: default;\n  background: var(--instui-component-tag-default-background);\n}\n.pfx-tag.-readonly.-inline::after {\n  display: none;\n}\n",
@@ -1332,16 +1377,16 @@ const popoverCss = popover.css;
 /** 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$1.replaceAll(SENTINEL, p)
+	css: (p) => `${PROGRESS_NUMERIC_PROPERTIES}\n${progress$1.replaceAll(SENTINEL, p)}\n${progressTransitionRules(p.replace(/-$/u, ""))}`
 });
 /** 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
-/** The `progressCircle` component record: a circular progress ring driven by a `--value` (0–100) custom property. */
+/** The `progressCircle` component record: a circular progress ring driven by current and maximum values. */
 const progressCircle = defineComponent({
 	name: "progress-circle",
-	css: (p) => progressCircle$1.replaceAll(SENTINEL, p)
+	css: (p) => `${PROGRESS_NUMERIC_PROPERTIES}\n${progressCircle$1.replaceAll(SENTINEL, p)}\n${progressCircleTransitionRules(p.replace(/-$/u, ""))}`
 });
 /** Standalone `progressCircle` stylesheet — the prefixed CSS for the progress ring, ready to ship as a `.css` file. */
 const progressCircleCss = progressCircle.css;
@@ -2189,6 +2234,8 @@ const responsiveUtilitiesCss = defineUtility({
 			["lg", "64rem"],
 			["xl", "80rem"]
 		];
+		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");
 		return css`
 /**
  * @utility responsive
@@ -2196,7 +2243,7 @@ const responsiveUtilitiesCss = defineUtility({
  * @summary Responsive visibility: \`.instui-hidden-max-<bp>\` / \`-hidden-min-<bp>\` hide by viewport width; the \`-cq-\` variants react to a \`.instui-container\` ancestor's width instead. Breakpoints \`sm\`/\`md\`/\`lg\`/\`xl\`.
  * @example
  * <div class="instui-hidden-max-sm">Hidden at or below the small breakpoint.</div>
- */${bp.map(([name, w]) => `@media (max-width: ${w}) { .${p}hidden-max-${name} { display: none !important; } }\n@media (min-width: ${w}) { .${p}hidden-min-${name} { display: none !important; } }`).join("\n")}\n.${p}container { container-type: inline-size; }\n${bp.map(([name, w]) => `@container (max-width: ${w}) { .${p}cq-hidden-max-${name} { display: none !important; } }\n@container (min-width: ${w}) { .${p}cq-hidden-min-${name} { display: none !important; } }`).join("\n")}\n`;
+ */${viewport}\n.${p}container { container-type: inline-size; }\n${container}\n`;
 	}
 }).css;
 //#endregion