@pantoken/components 0.5.0 → 0.6.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
+import { ELEVATION_NAMES, FOCUSABLE_SELECTOR, SPACING_AUTO_STEP, SPACING_STEPS, elevationDeclarations, elevationDeclarations as elevationDeclarations$1, focusOutlineDeclarations, focusOutlineDeclarations as focusOutlineDeclarations$1, focusOutlineRules, focusOutlineRules as focusOutlineRules$1 } from "@pantoken/utils";
 import { alpha, darken } from "@pantoken/plugin-colors";
 import { progressTransitionRules } from "@pantoken/plugin-transition/progress";
 import { progressCircleTransitionRules } from "@pantoken/plugin-transition/progress-circle";
-import { 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). */
 const DEPRECATED_ALIAS = /@modifier\s+(-[\w-]+)\s+[—-]\s+@deprecated\s+\{@link\s+\.?(-[\w-]+)\s*\}/gu;
@@ -155,28 +155,58 @@ const PROGRESS_NUMERIC_PROPERTIES = `@property --value {
   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)",
-	none: "var(--instui-component-shared-tokens-spacing-general-space-none)",
-	"2xs": "var(--instui-spacing-space2xs)",
-	xs: "var(--instui-spacing-space-xs)",
-	sm: "var(--instui-spacing-space-sm)",
-	md: "var(--instui-spacing-space-md)",
-	lg: "var(--instui-spacing-space-lg)",
-	xl: "var(--instui-spacing-space-xl)",
-	"2xl": "var(--instui-spacing-space2xl)"
-};
-/** Logical sides (RTL-safe): key → the property suffix appended to `margin`/`padding`. */
-const SPACING_SIDES = {
-	"": "",
-	t: "-block-start",
-	b: "-block-end",
-	s: "-inline-start",
-	e: "-inline-end",
-	x: "-inline",
-	y: "-block"
-};
+/** The pantoken spacing scale (short/long spellings share one CSS value) — re-exported from `@pantoken/utils`. */
+const SPACING_STEPS$1 = SPACING_STEPS;
+/** The `auto` step — margin only, spelled the same both ways. */
+const SPACING_AUTO_STEP$1 = SPACING_AUTO_STEP;
+/** The logical sides (RTL-safe), short + long spellings sharing one CSS suffix. */
+const SPACING_SIDES = [
+	{
+		short: "",
+		long: "",
+		suffix: ""
+	},
+	{
+		short: "t",
+		long: "top",
+		suffix: "-block-start"
+	},
+	{
+		short: "b",
+		long: "bottom",
+		suffix: "-block-end"
+	},
+	{
+		short: "s",
+		long: "start",
+		suffix: "-inline-start"
+	},
+	{
+		short: "e",
+		long: "end",
+		suffix: "-inline-end"
+	},
+	{
+		short: "x",
+		long: "inline",
+		suffix: "-inline"
+	},
+	{
+		short: "y",
+		long: "block",
+		suffix: "-block"
+	}
+];
+/** The two boxed properties the spacing utility generates classes for. */
+const SPACING_PROPERTIES = [{
+	css: "margin",
+	short: "m",
+	long: "margin"
+}, {
+	css: "padding",
+	short: "p",
+	long: "padding"
+}];
 //#endregion
 //#region src/lib/define.ts
 /**
@@ -283,14 +313,14 @@ const billboardByTheme = {
 };
 billboardByTheme.rebrand;
 const breadcrumb$1 = {
-	"rebrand": "/**\n * @component breadcrumb\n * @summary A breadcrumb trail with `/` separators; the last crumb is the current page.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -icon-* — Render a glyph icon in a crumb link (for example, home in the first crumb).\n * @part .item — A crumb; the last one is the current page.\n * @pseudo ::after — Renders the `/` separator after every crumb except the last.\n * @a11y Wrap the trail in `<nav aria-label>` and mark the current page's crumb with `aria-current=\"page\"`.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n *   <span class=\"item\">\n *     <a href=\"#\"><span class=\"pfx-icon -icon-house\"></span> Home</a>\n *   </span>\n *   <span class=\"item\"><a href=\"#\">Guides</a></span>\n *   <span class=\"item\"><a href=\"#\">Components</a></span>\n *   <span class=\"item\" aria-current=\"page\">Breadcrumb</span>\n * </nav>\n * @structure\n * .pfx-breadcrumb {\n *   .item {\n *     a {\n *       [class*=\"-icon-\"]:optional {}\n *     }\n *   }\n * }\n * @related link — Styles each crumb as a link.\n */\n.pfx-breadcrumb {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-breadcrumb-gap-md);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm {\n  gap: var(--instui-component-breadcrumb-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-lg {\n  gap: var(--instui-component-breadcrumb-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n}\n\n.pfx-breadcrumb.-size-sm .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n}\n\n.pfx-breadcrumb.-size-lg .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n}\n\n@scope (.pfx-breadcrumb) {\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope > .item:not(:last-child)::after {\n    content: \"/\";\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n    color: var(--instui-color-text-muted);\n  }\n}\n",
-	"canvas": "/**\n * @component breadcrumb\n * @summary A breadcrumb trail with `/` separators; the last crumb is the current page.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -icon-* — Render a glyph icon in a crumb link (for example, home in the first crumb).\n * @part .item — A crumb; the last one is the current page.\n * @pseudo ::after — Renders the `/` separator after every crumb except the last.\n * @a11y Wrap the trail in `<nav aria-label>` and mark the current page's crumb with `aria-current=\"page\"`.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n *   <span class=\"item\">\n *     <a href=\"#\"><span class=\"pfx-icon -icon-house\"></span> Home</a>\n *   </span>\n *   <span class=\"item\"><a href=\"#\">Guides</a></span>\n *   <span class=\"item\"><a href=\"#\">Components</a></span>\n *   <span class=\"item\" aria-current=\"page\">Breadcrumb</span>\n * </nav>\n * @structure\n * .pfx-breadcrumb {\n *   .item {\n *     a {\n *       [class*=\"-icon-\"]:optional {}\n *     }\n *   }\n * }\n * @related link — Styles each crumb as a link.\n */\n.pfx-breadcrumb {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-breadcrumb-gap-md);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm {\n  gap: var(--instui-component-breadcrumb-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-lg {\n  gap: var(--instui-component-breadcrumb-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n}\n\n.pfx-breadcrumb.-size-sm .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n}\n\n.pfx-breadcrumb.-size-lg .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n}\n\n@scope (.pfx-breadcrumb) {\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope > .item:not(:last-child)::after {\n    content: \"/\";\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n    color: var(--instui-color-text-muted);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component breadcrumb\n * @summary A breadcrumb trail with `/` separators; the last crumb is the current page.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -icon-* — Render a glyph icon in a crumb link (for example, home in the first crumb).\n * @part .item — A crumb; the last one is the current page.\n * @pseudo ::after — Renders the `/` separator after every crumb except the last.\n * @a11y Wrap the trail in `<nav aria-label>` and mark the current page's crumb with `aria-current=\"page\"`.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n *   <span class=\"item\">\n *     <a href=\"#\"><span class=\"pfx-icon -icon-house\"></span> Home</a>\n *   </span>\n *   <span class=\"item\"><a href=\"#\">Guides</a></span>\n *   <span class=\"item\"><a href=\"#\">Components</a></span>\n *   <span class=\"item\" aria-current=\"page\">Breadcrumb</span>\n * </nav>\n * @structure\n * .pfx-breadcrumb {\n *   .item {\n *     a {\n *       [class*=\"-icon-\"]:optional {}\n *     }\n *   }\n * }\n * @related link — Styles each crumb as a link.\n */\n.pfx-breadcrumb {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-breadcrumb-gap-md);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm {\n  gap: var(--instui-component-breadcrumb-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-lg {\n  gap: var(--instui-component-breadcrumb-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n}\n\n.pfx-breadcrumb.-size-sm .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n}\n\n.pfx-breadcrumb.-size-lg .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n}\n\n@scope (.pfx-breadcrumb) {\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope > .item:not(:last-child)::after {\n    content: \"/\";\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n    color: var(--instui-color-text-muted);\n  }\n}\n"
+	"rebrand": "/**\n * @component breadcrumb\n * @summary A breadcrumb trail with `/` separators; the last crumb is the current page.\n * @remarks Sets its own responsive `gap` between crumbs (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -icon-* — Render a glyph icon in a crumb link (for example, home in the first crumb).\n * @part .item — A crumb; the last one is the current page.\n * @pseudo ::after — Renders the `/` separator after every crumb except the last.\n * @a11y Wrap the trail in `<nav aria-label>` and mark the current page's crumb with `aria-current=\"page\"`.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n *   <span class=\"item\">\n *     <a href=\"#\"><span class=\"pfx-icon -icon-house\"></span> Home</a>\n *   </span>\n *   <span class=\"item\"><a href=\"#\">Guides</a></span>\n *   <span class=\"item\"><a href=\"#\">Components</a></span>\n *   <span class=\"item\" aria-current=\"page\">Breadcrumb</span>\n * </nav>\n * @structure\n * .pfx-breadcrumb {\n *   .item {\n *     a {\n *       [class*=\"-icon-\"]:optional {}\n *     }\n *   }\n * }\n * @related link — Styles each crumb as a link.\n */\n.pfx-breadcrumb {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-breadcrumb-gap-md);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm {\n  gap: var(--instui-component-breadcrumb-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-lg {\n  gap: var(--instui-component-breadcrumb-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n}\n\n.pfx-breadcrumb.-size-sm .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n}\n\n.pfx-breadcrumb.-size-lg .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n}\n\n@scope (.pfx-breadcrumb) {\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope > .item:not(:last-child)::after {\n    content: \"/\";\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n    color: var(--instui-color-text-muted);\n  }\n}\n",
+	"canvas": "/**\n * @component breadcrumb\n * @summary A breadcrumb trail with `/` separators; the last crumb is the current page.\n * @remarks Sets its own responsive `gap` between crumbs (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -icon-* — Render a glyph icon in a crumb link (for example, home in the first crumb).\n * @part .item — A crumb; the last one is the current page.\n * @pseudo ::after — Renders the `/` separator after every crumb except the last.\n * @a11y Wrap the trail in `<nav aria-label>` and mark the current page's crumb with `aria-current=\"page\"`.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n *   <span class=\"item\">\n *     <a href=\"#\"><span class=\"pfx-icon -icon-house\"></span> Home</a>\n *   </span>\n *   <span class=\"item\"><a href=\"#\">Guides</a></span>\n *   <span class=\"item\"><a href=\"#\">Components</a></span>\n *   <span class=\"item\" aria-current=\"page\">Breadcrumb</span>\n * </nav>\n * @structure\n * .pfx-breadcrumb {\n *   .item {\n *     a {\n *       [class*=\"-icon-\"]:optional {}\n *     }\n *   }\n * }\n * @related link — Styles each crumb as a link.\n */\n.pfx-breadcrumb {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-breadcrumb-gap-md);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm {\n  gap: var(--instui-component-breadcrumb-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-lg {\n  gap: var(--instui-component-breadcrumb-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n}\n\n.pfx-breadcrumb.-size-sm .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n}\n\n.pfx-breadcrumb.-size-lg .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n}\n\n@scope (.pfx-breadcrumb) {\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope > .item:not(:last-child)::after {\n    content: \"/\";\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n    color: var(--instui-color-text-muted);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component breadcrumb\n * @summary A breadcrumb trail with `/` separators; the last crumb is the current page.\n * @remarks Sets its own responsive `gap` between crumbs (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -icon-* — Render a glyph icon in a crumb link (for example, home in the first crumb).\n * @part .item — A crumb; the last one is the current page.\n * @pseudo ::after — Renders the `/` separator after every crumb except the last.\n * @a11y Wrap the trail in `<nav aria-label>` and mark the current page's crumb with `aria-current=\"page\"`.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n *   <span class=\"item\">\n *     <a href=\"#\"><span class=\"pfx-icon -icon-house\"></span> Home</a>\n *   </span>\n *   <span class=\"item\"><a href=\"#\">Guides</a></span>\n *   <span class=\"item\"><a href=\"#\">Components</a></span>\n *   <span class=\"item\" aria-current=\"page\">Breadcrumb</span>\n * </nav>\n * @structure\n * .pfx-breadcrumb {\n *   .item {\n *     a {\n *       [class*=\"-icon-\"]:optional {}\n *     }\n *   }\n * }\n * @related link — Styles each crumb as a link.\n */\n.pfx-breadcrumb {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-breadcrumb-gap-md);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm {\n  gap: var(--instui-component-breadcrumb-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-lg {\n  gap: var(--instui-component-breadcrumb-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n}\n\n.pfx-breadcrumb.-size-sm .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n}\n\n.pfx-breadcrumb.-size-lg .item:not(:last-child)::after {\n  margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n}\n\n@scope (.pfx-breadcrumb) {\n  :scope a {\n    color: var(--instui-component-link-text-color);\n    text-decoration: none;\n  }\n\n  :scope a [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope a:hover {\n    color: var(--instui-component-link-text-hover-color);\n    text-decoration: underline;\n  }\n\n  :scope > .item:not(:last-child)::after {\n    content: \"/\";\n    margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n    color: var(--instui-color-text-muted);\n  }\n}\n"
 }.rebrand;
 const byline$1 = {
-	"rebrand": "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <div class=\"pfx-byline -size-md\">\n *   <span class=\"pfx-icon -icon-megaphone\"></span>\n *   <div>\n *     <div class=\"title\">What's new</div>\n *     <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n *   </div>\n * </div>\n * @structure\n * .pfx-byline {\n *   [class*=\"-icon-\"]:optional {}\n *   div {\n *     .title {}\n *     .description {}\n *   }\n * }\n */\n.pfx-byline {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-byline-figure-margin);\n  background: var(--instui-component-byline-background);\n  color: var(--instui-component-byline-color);\n  font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n  align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n  align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n   (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n  max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n  max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n  max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n  :scope > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  .title {\n    margin: 0 0 var(--instui-component-byline-title-margin);\n    font-size: var(--instui-component-byline-title-font-size);\n    font-weight: var(--instui-component-byline-title-font-weight);\n    line-height: var(--instui-component-byline-title-line-height);\n  }\n\n  .description {\n    font-size: var(--instui-component-byline-description-font-size);\n    font-weight: var(--instui-component-byline-description-font-weight);\n    line-height: var(--instui-component-byline-description-line-height);\n  }\n}\n",
-	"canvas": "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <div class=\"pfx-byline -size-md\">\n *   <span class=\"pfx-icon -icon-megaphone\"></span>\n *   <div>\n *     <div class=\"title\">What's new</div>\n *     <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n *   </div>\n * </div>\n * @structure\n * .pfx-byline {\n *   [class*=\"-icon-\"]:optional {}\n *   div {\n *     .title {}\n *     .description {}\n *   }\n * }\n */\n.pfx-byline {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-byline-figure-margin);\n  background: var(--instui-component-byline-background);\n  color: var(--instui-component-byline-color);\n  font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n  align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n  align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n   (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n  max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n  max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n  max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n  :scope > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  .title {\n    margin: 0 0 var(--instui-component-byline-title-margin);\n    font-size: var(--instui-component-byline-title-font-size);\n    font-weight: var(--instui-component-byline-title-font-weight);\n    line-height: var(--instui-component-byline-title-line-height);\n  }\n\n  .description {\n    font-size: var(--instui-component-byline-description-font-size);\n    font-weight: var(--instui-component-byline-description-font-weight);\n    line-height: var(--instui-component-byline-description-line-height);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <div class=\"pfx-byline -size-md\">\n *   <span class=\"pfx-icon -icon-megaphone\"></span>\n *   <div>\n *     <div class=\"title\">What's new</div>\n *     <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n *   </div>\n * </div>\n * @structure\n * .pfx-byline {\n *   [class*=\"-icon-\"]:optional {}\n *   div {\n *     .title {}\n *     .description {}\n *   }\n * }\n */\n.pfx-byline {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-byline-figure-margin);\n  background: var(--instui-component-byline-background);\n  color: var(--instui-component-byline-color);\n  font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n  align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n  align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n   (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n  max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n  max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n  max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n  :scope > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  .title {\n    margin: 0 0 var(--instui-component-byline-title-margin);\n    font-size: var(--instui-component-byline-title-font-size);\n    font-weight: var(--instui-component-byline-title-font-weight);\n    line-height: var(--instui-component-byline-title-line-height);\n  }\n\n  .description {\n    font-size: var(--instui-component-byline-description-font-size);\n    font-weight: var(--instui-component-byline-description-font-weight);\n    line-height: var(--instui-component-byline-description-line-height);\n  }\n}\n"
+	"rebrand": "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @remarks Sets its own `gap` between the figure and the text block; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <div class=\"pfx-byline -size-md\">\n *   <span class=\"pfx-icon -icon-megaphone\"></span>\n *   <div>\n *     <div class=\"title\">What's new</div>\n *     <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n *   </div>\n * </div>\n * @structure\n * .pfx-byline {\n *   [class*=\"-icon-\"]:optional {}\n *   div {\n *     .title {}\n *     .description {}\n *   }\n * }\n */\n.pfx-byline {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-byline-figure-margin);\n  background: var(--instui-component-byline-background);\n  color: var(--instui-component-byline-color);\n  font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n  align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n  align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n   (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n  max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n  max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n  max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n  :scope > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  .title {\n    margin: 0 0 var(--instui-component-byline-title-margin);\n    font-size: var(--instui-component-byline-title-font-size);\n    font-weight: var(--instui-component-byline-title-font-weight);\n    line-height: var(--instui-component-byline-title-line-height);\n  }\n\n  .description {\n    font-size: var(--instui-component-byline-description-font-size);\n    font-weight: var(--instui-component-byline-description-font-weight);\n    line-height: var(--instui-component-byline-description-line-height);\n  }\n}\n",
+	"canvas": "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @remarks Sets its own `gap` between the figure and the text block; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <div class=\"pfx-byline -size-md\">\n *   <span class=\"pfx-icon -icon-megaphone\"></span>\n *   <div>\n *     <div class=\"title\">What's new</div>\n *     <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n *   </div>\n * </div>\n * @structure\n * .pfx-byline {\n *   [class*=\"-icon-\"]:optional {}\n *   div {\n *     .title {}\n *     .description {}\n *   }\n * }\n */\n.pfx-byline {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-byline-figure-margin);\n  background: var(--instui-component-byline-background);\n  color: var(--instui-component-byline-color);\n  font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n  align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n  align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n   (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n  max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n  max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n  max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n  :scope > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  .title {\n    margin: 0 0 var(--instui-component-byline-title-margin);\n    font-size: var(--instui-component-byline-title-font-size);\n    font-weight: var(--instui-component-byline-title-font-weight);\n    line-height: var(--instui-component-byline-title-line-height);\n  }\n\n  .description {\n    font-size: var(--instui-component-byline-description-font-size);\n    font-weight: var(--instui-component-byline-description-font-weight);\n    line-height: var(--instui-component-byline-description-line-height);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @remarks Sets its own `gap` between the figure and the text block; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <div class=\"pfx-byline -size-md\">\n *   <span class=\"pfx-icon -icon-megaphone\"></span>\n *   <div>\n *     <div class=\"title\">What's new</div>\n *     <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n *   </div>\n * </div>\n * @structure\n * .pfx-byline {\n *   [class*=\"-icon-\"]:optional {}\n *   div {\n *     .title {}\n *     .description {}\n *   }\n * }\n */\n.pfx-byline {\n  display: flex;\n  align-items: center;\n  gap: var(--instui-component-byline-figure-margin);\n  background: var(--instui-component-byline-background);\n  color: var(--instui-component-byline-color);\n  font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n  align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n  align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n   (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n  max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n  max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n  max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n  :scope > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  .title {\n    margin: 0 0 var(--instui-component-byline-title-margin);\n    font-size: var(--instui-component-byline-title-font-size);\n    font-weight: var(--instui-component-byline-title-font-weight);\n    line-height: var(--instui-component-byline-title-line-height);\n  }\n\n  .description {\n    font-size: var(--instui-component-byline-description-font-size);\n    font-weight: var(--instui-component-byline-description-font-weight);\n    line-height: var(--instui-component-byline-description-line-height);\n  }\n}\n"
 }.rebrand;
 const calendar$1 = {
 	"rebrand": "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @part .day — A day cell; `-today`, `-selected`, and `-outside-month` mark its state.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n *   <div class=\"nav\">\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n *     <strong>March 2026</strong>\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n *   </div>\n *   <div class=\"grid\">\n *     <span class=\"weekday\">Su</span>\n *     <span class=\"weekday\">Mo</span>\n *     <span class=\"weekday\">Tu</span>\n *     <span class=\"weekday\">We</span>\n *     <span class=\"weekday\">Th</span>\n *     <span class=\"weekday\">Fr</span>\n *     <span class=\"weekday\">Sa</span>\n *     <span class=\"day -outside-month\">23</span>\n *     <span class=\"day -outside-month\">24</span>\n *     <span class=\"day -outside-month\">25</span>\n *     <span class=\"day -outside-month\">26</span>\n *     <span class=\"day -outside-month\">27</span>\n *     <span class=\"day -outside-month\">28</span>\n *     <span class=\"day\">1</span>\n *     <span class=\"day\">2</span>\n *     <span class=\"day\">3</span>\n *     <span class=\"day\">4</span>\n *     <span class=\"day\">5</span>\n *     <span class=\"day\">6</span>\n *     <span class=\"day -today\">7</span>\n *     <span class=\"day\">8</span>\n *     <span class=\"day\">9</span>\n *     <span class=\"day\">10</span>\n *     <span class=\"day\">11</span>\n *     <span class=\"day -selected\">12</span>\n *     <span class=\"day\">13</span>\n *     <span class=\"day\">14</span>\n *     <span class=\"day\">15</span>\n *   </div>\n * </div>\n * @structure\n * .pfx-calendar {\n *   .nav {\n *     .pfx-button {}\n *     strong {}\n *   }\n *   .grid {\n *     .weekday {}\n *     .day {}\n *   }\n * }\n */\n.pfx-calendar {\n  display: inline-block;\n  text-align: center;\n  background: var(--instui-component-calendar-background);\n  color: var(--instui-component-calendar-color);\n  font-family: var(--instui-component-calendar-font-family);\n  font-size: var(--instui-component-calendar-font-size);\n  font-weight: var(--instui-component-calendar-font-weight);\n  line-height: var(--instui-component-calendar-line-height);\n}\n@scope (.pfx-calendar) {\n  /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n   only spaces the row below itself, so margin is block-end only — no inline inset). */\n  :scope > .nav {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-block-end: var(--instui-component-calendar-nav-margin);\n  }\n  /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n   off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n   whose day table spaces cells with the browser-default border-spacing in both directions. */\n  :scope > .grid {\n    display: grid;\n    grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n    justify-content: center;\n    gap: var(--instui-spacing-space2xs);\n  }\n  .weekday,\n  .day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n  }\n  .weekday {\n    font-weight: var(--instui-font-weight-interactive);\n  }\n  .day {\n    font-size: var(--instui-component-calendar-day-font-size);\n    color: var(--instui-component-calendar-day-color);\n    background: var(--instui-component-calendar-day-background);\n    cursor: pointer;\n  }\n  .day.-outside-month {\n    color: var(--instui-component-calendar-day-outside-month-color);\n  }\n  .day.-today {\n    background: var(--instui-component-calendar-day-today-background);\n    color: var(--instui-component-calendar-day-today-color);\n    border-radius: var(--instui-component-calendar-day-today-border-radius);\n  }\n  .day.-selected {\n    background: var(--instui-component-calendar-day-selected-background);\n    color: var(--instui-component-calendar-day-selected-color);\n    border-radius: var(--instui-component-calendar-day-selected-border-radius);\n  }\n}\n",
@@ -298,9 +328,9 @@ const calendar$1 = {
 	"canvasHighContrast": "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @part .day — A day cell; `-today`, `-selected`, and `-outside-month` mark its state.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n *   <div class=\"nav\">\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n *     <strong>March 2026</strong>\n *     <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n *   </div>\n *   <div class=\"grid\">\n *     <span class=\"weekday\">Su</span>\n *     <span class=\"weekday\">Mo</span>\n *     <span class=\"weekday\">Tu</span>\n *     <span class=\"weekday\">We</span>\n *     <span class=\"weekday\">Th</span>\n *     <span class=\"weekday\">Fr</span>\n *     <span class=\"weekday\">Sa</span>\n *     <span class=\"day -outside-month\">23</span>\n *     <span class=\"day -outside-month\">24</span>\n *     <span class=\"day -outside-month\">25</span>\n *     <span class=\"day -outside-month\">26</span>\n *     <span class=\"day -outside-month\">27</span>\n *     <span class=\"day -outside-month\">28</span>\n *     <span class=\"day\">1</span>\n *     <span class=\"day\">2</span>\n *     <span class=\"day\">3</span>\n *     <span class=\"day\">4</span>\n *     <span class=\"day\">5</span>\n *     <span class=\"day\">6</span>\n *     <span class=\"day -today\">7</span>\n *     <span class=\"day\">8</span>\n *     <span class=\"day\">9</span>\n *     <span class=\"day\">10</span>\n *     <span class=\"day\">11</span>\n *     <span class=\"day -selected\">12</span>\n *     <span class=\"day\">13</span>\n *     <span class=\"day\">14</span>\n *     <span class=\"day\">15</span>\n *   </div>\n * </div>\n * @structure\n * .pfx-calendar {\n *   .nav {\n *     .pfx-button {}\n *     strong {}\n *   }\n *   .grid {\n *     .weekday {}\n *     .day {}\n *   }\n * }\n */\n.pfx-calendar {\n  display: inline-block;\n  text-align: center;\n  background: var(--instui-component-calendar-background);\n  color: var(--instui-component-calendar-color);\n  font-family: var(--instui-component-calendar-font-family);\n  font-size: var(--instui-component-calendar-font-size);\n  font-weight: var(--instui-component-calendar-font-weight);\n  line-height: var(--instui-component-calendar-line-height);\n}\n@scope (.pfx-calendar) {\n  /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n   only spaces the row below itself, so margin is block-end only — no inline inset). */\n  :scope > .nav {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-block-end: var(--instui-component-calendar-nav-margin);\n  }\n  /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n   off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n   whose day table spaces cells with the browser-default border-spacing in both directions. */\n  :scope > .grid {\n    display: grid;\n    grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n    justify-content: center;\n    gap: var(--instui-spacing-space2xs);\n  }\n  .weekday,\n  .day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n  }\n  .weekday {\n    font-weight: var(--instui-font-weight-interactive);\n  }\n  .day {\n    font-size: var(--instui-component-calendar-day-font-size);\n    color: var(--instui-component-calendar-day-color);\n    background: var(--instui-component-calendar-day-background);\n    cursor: pointer;\n  }\n  .day.-outside-month {\n    color: var(--instui-component-calendar-day-outside-month-color);\n  }\n  .day.-today {\n    background: var(--instui-component-calendar-day-today-background);\n    color: var(--instui-component-calendar-day-today-color);\n    border-radius: var(--instui-component-calendar-day-today-border-radius);\n  }\n  .day.-selected {\n    background: var(--instui-component-calendar-day-selected-background);\n    color: var(--instui-component-calendar-day-selected-color);\n    border-radius: var(--instui-component-calendar-day-selected-border-radius);\n  }\n}\n"
 }.rebrand;
 const checkbox$1 = {
-	"rebrand": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox instui-display-block instui-mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope.-required .asterisk {\n    color: var(--instui-component-checkbox-asterisk-color);\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
-	"canvas": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox instui-display-block instui-mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope.-required .asterisk {\n    color: var(--instui-component-checkbox-asterisk-color);\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
-	"canvasHighContrast": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox instui-display-block instui-mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope.-required .asterisk {\n    color: var(--instui-component-checkbox-asterisk-color);\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n"
+	"rebrand": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox instui-display-block instui-mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope.-required .asterisk {\n    color: var(--instui-component-checkbox-asterisk-color);\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
+	"canvas": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox instui-display-block instui-mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope.-required .asterisk {\n    color: var(--instui-component-checkbox-asterisk-color);\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
+	"canvasHighContrast": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox instui-display-block instui-mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope.-required .asterisk {\n    color: var(--instui-component-checkbox-asterisk-color);\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n"
 }.rebrand;
 const closeButton$1 = {
 	"rebrand": "/**\n * @component close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n.pfx-close-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1;\n  min-height: var(--instui-component-base-button-medium-height);\n  padding: var(--instui-spacing-space-xs);\n  border: 0;\n  background: transparent;\n  border-radius: var(--instui-component-base-button-border-radius);\n  color: var(--instui-color-text-interactive-action-secondary-base);\n  cursor: pointer;\n}\n.pfx-close-button::before {\n  content: \"\";\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n  -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n  mask: var(--instui-icon-x) center / contain no-repeat;\n}\n.pfx-close-button:hover {\n  background: var(--instui-color-background-interactive-action-tertiary-hover);\n}\n.pfx-close-button:active {\n  background: var(--instui-color-background-interactive-action-tertiary-active);\n}\n.pfx-close-button.-size-sm {\n  min-height: var(--instui-component-base-button-small-height);\n}\n.pfx-close-button.-size-lg {\n  min-height: var(--instui-component-base-button-large-height);\n}\n.pfx-close-button.-color-inverse {\n  color: var(--instui-component-base-button-primary-inverse-ghost-color);\n}\n",
@@ -318,19 +348,19 @@ const fileDrop$1 = {
 	"canvasHighContrast": "/**\n * @component file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n *   <span class=\"pfx-icon -icon-cloud-upload\"></span>\n *   <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n *   <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n *   <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n *   [class*=\"-icon-\"]:optional {}\n *   .pfx-text {\n *     strong {}\n *   }\n *   .pfx-text {}\n *   input {}\n * }\n */\n.pfx-file-drop {\n  display: block;\n  text-align: center;\n  padding: var(--instui-spacing-space-lg);\n  color: var(--instui-color-text-base);\n  background: var(--instui-component-file-drop-background-color);\n  border: var(--instui-component-file-drop-border-width)\n    var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n  border-radius: var(--instui-component-file-drop-border-radius);\n}\n\n.pfx-file-drop:hover,\n.pfx-file-drop.-hover {\n  border-color: var(--instui-component-file-drop-hover-border-color);\n}\n\n.pfx-file-drop.-accepted {\n  border-color: var(--instui-component-file-drop-accepted-color);\n}\n\n.pfx-file-drop.-rejected {\n  border-color: var(--instui-component-file-drop-rejected-color);\n}\n\n.pfx-file-drop > [class*=\"-icon-\"] {\n  line-height: 1;\n}\n"
 }.rebrand;
 const formFieldGroup$1 = {
-	"rebrand": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n *   <legend>Shipping address</legend>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">First name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">Last name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">City</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">State</span>\n *     <span class=\"controls\">\n *       <select class=\"pfx-simple-select\">\n *         <option>CA</option>\n *         <option>NY</option>\n *         <option>TX</option>\n *       </select>\n *     </span>\n *   </label>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n *   </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n *   legend {}\n *   .pfx-form-field {}\n *   .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n.pfx-form-field-group > legend {\n  grid-column: 1 / -1;\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-form-field-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n.pfx-form-field-group.-row-spacing-none {\n  row-gap: 0;\n}\n.pfx-form-field-group.-row-spacing-small {\n  row-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-row-spacing-medium {\n  row-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-row-spacing-large {\n  row-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-col-spacing-none {\n  column-gap: 0;\n}\n.pfx-form-field-group.-col-spacing-small {\n  column-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-col-spacing-medium {\n  column-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-col-spacing-large {\n  column-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-v-align-top {\n  align-items: start;\n}\n.pfx-form-field-group.-v-align-middle {\n  align-items: center;\n}\n.pfx-form-field-group.-v-align-bottom {\n  align-items: end;\n}\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n   label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n   just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n  .pfx-form-field-group.-layout-aligned {\n    grid-template-columns: auto 1fr;\n    align-items: center;\n  }\n  .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n    display: grid;\n    grid-column: 1 / -1;\n    grid-template-columns: subgrid;\n    grid-template-areas: \"label controls\" \". messages\";\n    align-items: center;\n  }\n}\n",
-	"canvas": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n *   <legend>Shipping address</legend>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">First name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">Last name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">City</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">State</span>\n *     <span class=\"controls\">\n *       <select class=\"pfx-simple-select\">\n *         <option>CA</option>\n *         <option>NY</option>\n *         <option>TX</option>\n *       </select>\n *     </span>\n *   </label>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n *   </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n *   legend {}\n *   .pfx-form-field {}\n *   .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n.pfx-form-field-group > legend {\n  grid-column: 1 / -1;\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-form-field-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n.pfx-form-field-group.-row-spacing-none {\n  row-gap: 0;\n}\n.pfx-form-field-group.-row-spacing-small {\n  row-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-row-spacing-medium {\n  row-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-row-spacing-large {\n  row-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-col-spacing-none {\n  column-gap: 0;\n}\n.pfx-form-field-group.-col-spacing-small {\n  column-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-col-spacing-medium {\n  column-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-col-spacing-large {\n  column-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-v-align-top {\n  align-items: start;\n}\n.pfx-form-field-group.-v-align-middle {\n  align-items: center;\n}\n.pfx-form-field-group.-v-align-bottom {\n  align-items: end;\n}\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n   label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n   just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n  .pfx-form-field-group.-layout-aligned {\n    grid-template-columns: auto 1fr;\n    align-items: center;\n  }\n  .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n    display: grid;\n    grid-column: 1 / -1;\n    grid-template-columns: subgrid;\n    grid-template-areas: \"label controls\" \". messages\";\n    align-items: center;\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n *   <legend>Shipping address</legend>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">First name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">Last name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">City</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">State</span>\n *     <span class=\"controls\">\n *       <select class=\"pfx-simple-select\">\n *         <option>CA</option>\n *         <option>NY</option>\n *         <option>TX</option>\n *       </select>\n *     </span>\n *   </label>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n *   </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n *   legend {}\n *   .pfx-form-field {}\n *   .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n.pfx-form-field-group > legend {\n  grid-column: 1 / -1;\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-form-field-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n.pfx-form-field-group.-row-spacing-none {\n  row-gap: 0;\n}\n.pfx-form-field-group.-row-spacing-small {\n  row-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-row-spacing-medium {\n  row-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-row-spacing-large {\n  row-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-col-spacing-none {\n  column-gap: 0;\n}\n.pfx-form-field-group.-col-spacing-small {\n  column-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-col-spacing-medium {\n  column-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-col-spacing-large {\n  column-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-v-align-top {\n  align-items: start;\n}\n.pfx-form-field-group.-v-align-middle {\n  align-items: center;\n}\n.pfx-form-field-group.-v-align-bottom {\n  align-items: end;\n}\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n   label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n   just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n  .pfx-form-field-group.-layout-aligned {\n    grid-template-columns: auto 1fr;\n    align-items: center;\n  }\n  .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n    display: grid;\n    grid-column: 1 / -1;\n    grid-template-columns: subgrid;\n    grid-template-areas: \"label controls\" \". messages\";\n    align-items: center;\n  }\n}\n"
+	"rebrand": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @remarks Sets its own `gap` between fields, tunable with the `-col-spacing-*`/`-row-spacing-*` modifiers below — prefer those over chaining a generic `-gap-*` spacing utility modifier, which overrides the built-in value outright.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n *   <legend>Shipping address</legend>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">First name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">Last name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">City</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">State</span>\n *     <span class=\"controls\">\n *       <select class=\"pfx-simple-select\">\n *         <option>CA</option>\n *         <option>NY</option>\n *         <option>TX</option>\n *       </select>\n *     </span>\n *   </label>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n *   </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n *   legend {}\n *   .pfx-form-field {}\n *   .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.pfx-form-field-group > legend {\n  grid-column: 1 / -1;\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-form-field-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n\n.pfx-form-field-group.-row-spacing-none {\n  row-gap: 0;\n}\n\n.pfx-form-field-group.-row-spacing-small {\n  row-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-row-spacing-medium {\n  row-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-row-spacing-large {\n  row-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-col-spacing-none {\n  column-gap: 0;\n}\n\n.pfx-form-field-group.-col-spacing-small {\n  column-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-col-spacing-medium {\n  column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-col-spacing-large {\n  column-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field-group.-v-align-middle {\n  align-items: center;\n}\n\n.pfx-form-field-group.-v-align-bottom {\n  align-items: end;\n}\n\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n   label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n   just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n  .pfx-form-field-group.-layout-aligned {\n    grid-template-columns: auto 1fr;\n    align-items: center;\n  }\n\n  .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n    display: grid;\n    grid-column: 1 / -1;\n    grid-template-columns: subgrid;\n    grid-template-areas: \"label controls\" \". messages\";\n    align-items: center;\n  }\n}\n",
+	"canvas": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @remarks Sets its own `gap` between fields, tunable with the `-col-spacing-*`/`-row-spacing-*` modifiers below — prefer those over chaining a generic `-gap-*` spacing utility modifier, which overrides the built-in value outright.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n *   <legend>Shipping address</legend>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">First name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">Last name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">City</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">State</span>\n *     <span class=\"controls\">\n *       <select class=\"pfx-simple-select\">\n *         <option>CA</option>\n *         <option>NY</option>\n *         <option>TX</option>\n *       </select>\n *     </span>\n *   </label>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n *   </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n *   legend {}\n *   .pfx-form-field {}\n *   .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.pfx-form-field-group > legend {\n  grid-column: 1 / -1;\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-form-field-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n\n.pfx-form-field-group.-row-spacing-none {\n  row-gap: 0;\n}\n\n.pfx-form-field-group.-row-spacing-small {\n  row-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-row-spacing-medium {\n  row-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-row-spacing-large {\n  row-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-col-spacing-none {\n  column-gap: 0;\n}\n\n.pfx-form-field-group.-col-spacing-small {\n  column-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-col-spacing-medium {\n  column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-col-spacing-large {\n  column-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field-group.-v-align-middle {\n  align-items: center;\n}\n\n.pfx-form-field-group.-v-align-bottom {\n  align-items: end;\n}\n\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n   label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n   just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n  .pfx-form-field-group.-layout-aligned {\n    grid-template-columns: auto 1fr;\n    align-items: center;\n  }\n\n  .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n    display: grid;\n    grid-column: 1 / -1;\n    grid-template-columns: subgrid;\n    grid-template-areas: \"label controls\" \". messages\";\n    align-items: center;\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @remarks Sets its own `gap` between fields, tunable with the `-col-spacing-*`/`-row-spacing-*` modifiers below — prefer those over chaining a generic `-gap-*` spacing utility modifier, which overrides the built-in value outright.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n *   <legend>Shipping address</legend>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">First name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">Last name</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">City</span>\n *     <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n *   </label>\n *   <label class=\"pfx-form-field\">\n *     <span class=\"label\">State</span>\n *     <span class=\"controls\">\n *       <select class=\"pfx-simple-select\">\n *         <option>CA</option>\n *         <option>NY</option>\n *         <option>TX</option>\n *       </select>\n *     </span>\n *   </label>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n *   </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n *   legend {}\n *   .pfx-form-field {}\n *   .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.pfx-form-field-group > legend {\n  grid-column: 1 / -1;\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-form-field-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n\n.pfx-form-field-group.-row-spacing-none {\n  row-gap: 0;\n}\n\n.pfx-form-field-group.-row-spacing-small {\n  row-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-row-spacing-medium {\n  row-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-row-spacing-large {\n  row-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-col-spacing-none {\n  column-gap: 0;\n}\n\n.pfx-form-field-group.-col-spacing-small {\n  column-gap: var(--instui-spacing-space-sm);\n}\n\n.pfx-form-field-group.-col-spacing-medium {\n  column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-form-field-group.-col-spacing-large {\n  column-gap: var(--instui-spacing-space-lg);\n}\n\n.pfx-form-field-group.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field-group.-v-align-middle {\n  align-items: center;\n}\n\n.pfx-form-field-group.-v-align-bottom {\n  align-items: end;\n}\n\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n   label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n   just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n  .pfx-form-field-group.-layout-aligned {\n    grid-template-columns: auto 1fr;\n    align-items: center;\n  }\n\n  .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n    display: grid;\n    grid-column: 1 / -1;\n    grid-template-columns: subgrid;\n    grid-template-areas: \"label controls\" \". messages\";\n    align-items: center;\n  }\n}\n"
 }.rebrand;
 const formFieldMessages$1 = {
-	"rebrand": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
-	"canvas": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
-	"canvasHighContrast": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"
+	"rebrand": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
+	"canvas": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n",
+	"canvasHighContrast": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field-message {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-family: var(--instui-component-form-field-message-font-family);\n  font-size: var(--instui-component-form-field-message-font-size);\n  font-weight: var(--instui-component-form-field-message-font-weight);\n  line-height: var(--instui-component-form-field-message-line-height);\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-hint {\n  color: var(--instui-component-form-field-message-hint-text-color);\n}\n\n.pfx-form-field-message.-type-error {\n  color: var(--instui-component-form-field-message-error-text-color);\n}\n\n.pfx-form-field-message.-type-success {\n  color: var(--instui-component-form-field-message-success-text-color);\n}\n\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n  content: \"\";\n  flex: none;\n  inline-size: 1em;\n  block-size: 1em;\n  background: currentColor;\n}\n\n.pfx-form-field-message.-type-error::before {\n  -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n\n.pfx-form-field-message.-type-success::before {\n  -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n\n/* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n.pfx-form-field-message.-type-screenreader-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"
 }.rebrand;
 const formField$1 = {
-	"rebrand": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n *   <span class=\"label\">Email address</span>\n *   <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *     <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n *   </div>\n * </label>\n * @structure\n * .pfx-form-field {\n *   .label {}\n *   .controls {\n *     .pfx-text-input {}\n *   }\n *   .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n}\n@scope (.pfx-form-field) {\n  :scope > .label {\n    grid-area: label;\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n  :scope > .controls {\n    grid-area: controls;\n  }\n}\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n  grid-area: messages;\n}\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n   (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n   control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n  display: none;\n}\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n  display: inline-flex;\n}\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n.pfx-form-field.-layout-inline {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"label controls\" \". messages\";\n  align-items: center;\n  column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n",
-	"canvas": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n *   <span class=\"label\">Email address</span>\n *   <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *     <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n *   </div>\n * </label>\n * @structure\n * .pfx-form-field {\n *   .label {}\n *   .controls {\n *     .pfx-text-input {}\n *   }\n *   .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n}\n@scope (.pfx-form-field) {\n  :scope > .label {\n    grid-area: label;\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n  :scope > .controls {\n    grid-area: controls;\n  }\n}\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n  grid-area: messages;\n}\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n   (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n   control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n  display: none;\n}\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n  display: inline-flex;\n}\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n.pfx-form-field.-layout-inline {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"label controls\" \". messages\";\n  align-items: center;\n  column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n",
-	"canvasHighContrast": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n *   <span class=\"label\">Email address</span>\n *   <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *     <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n *   </div>\n * </label>\n * @structure\n * .pfx-form-field {\n *   .label {}\n *   .controls {\n *     .pfx-text-input {}\n *   }\n *   .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n}\n@scope (.pfx-form-field) {\n  :scope > .label {\n    grid-area: label;\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n  :scope > .controls {\n    grid-area: controls;\n  }\n}\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n  grid-area: messages;\n}\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n   (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n   control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n  display: none;\n}\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n  display: inline-flex;\n}\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n.pfx-form-field.-layout-inline {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"label controls\" \". messages\";\n  align-items: center;\n  column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n"
+	"rebrand": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n *   <span class=\"label\">Email address</span>\n *   <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *     <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n *   </div>\n * </label>\n * @structure\n * .pfx-form-field {\n *   .label {}\n *   .controls {\n *     .pfx-text-input {}\n *   }\n *   .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n  :scope > .label {\n    grid-area: label;\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n\n  :scope > .controls {\n    grid-area: controls;\n  }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n  grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n   (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n   control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n  display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n  display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"label controls\" \". messages\";\n  align-items: center;\n  column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n",
+	"canvas": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n *   <span class=\"label\">Email address</span>\n *   <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *     <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n *   </div>\n * </label>\n * @structure\n * .pfx-form-field {\n *   .label {}\n *   .controls {\n *     .pfx-text-input {}\n *   }\n *   .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n  :scope > .label {\n    grid-area: label;\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n\n  :scope > .controls {\n    grid-area: controls;\n  }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n  grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n   (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n   control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n  display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n  display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"label controls\" \". messages\";\n  align-items: center;\n  column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n",
+	"canvasHighContrast": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n *   <span class=\"label\">Email address</span>\n *   <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *     <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n *   </div>\n * </label>\n * @structure\n * .pfx-form-field {\n *   .label {}\n *   .controls {\n *     .pfx-text-input {}\n *   }\n *   .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n  :scope > .label {\n    grid-area: label;\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n\n  :scope > .controls {\n    grid-area: controls;\n  }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n  grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n   (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n   control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n  display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n  display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"label controls\" \". messages\";\n  align-items: center;\n  column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n"
 }.rebrand;
 const img$1 = {
 	"rebrand": "/**\n * @component img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n.pfx-img {\n  display: inline-block;\n  max-inline-size: 100%;\n  block-size: auto;\n  --pantoken-img-filter: none;\n  filter: var(--pantoken-img-filter);\n  transition: filter var(--instui-component-img-effect-transition-duration) ease;\n}\n.pfx-img.-display-block {\n  display: block;\n}\n/* constrain: fill a sized box (the consumer sets width/height). */\n.pfx-img.-constrain-cover {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n}\n.pfx-img.-constrain-contain {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: contain;\n}\n/* Effects compose through the custom property, so grayscale + blur can apply together. */\n.pfx-img.-with-grayscale {\n  --pantoken-img-filter: grayscale(1);\n}\n.pfx-img.-with-blur {\n  --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n}\n.pfx-img.-with-grayscale.-with-blur {\n  --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n}\n",
@@ -343,14 +373,14 @@ const inPlaceEdit$1 = {
 	"canvasHighContrast": "/**\n * @component in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n.pfx-in-place-edit {\n  display: inline-block;\n  min-inline-size: 2rem;\n  padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n  border: var(--instui-component-text-input-border-width) solid transparent;\n  border-radius: var(--instui-component-text-input-border-radius);\n  color: var(--instui-color-text-base);\n  font: inherit;\n  cursor: text;\n}\n/* Hover affordance: it's editable. */\n.pfx-in-place-edit:hover {\n  background: var(--instui-color-background-muted);\n}\n/* Focus = edit mode: input chrome + the focus ring. */\n.pfx-in-place-edit:focus {\n  background: var(--instui-component-text-input-background-color);\n  border-color: var(--instui-component-text-input-border-color);\n  outline: none;\n}\n.pfx-in-place-edit:focus-visible {\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n.pfx-in-place-edit.-readonly {\n  cursor: default;\n}\n.pfx-in-place-edit.-readonly:hover {\n  background: transparent;\n}\n"
 }.rebrand;
 const link$1 = {
-	"rebrand": "/**\n * @component link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links.\n */\n.pfx-link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-link-gap-md);\n  color: var(--instui-component-link-text-color);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n  font-weight: var(--instui-component-link-font-weight);\n  line-height: var(--instui-component-link-line-height-md);\n  text-decoration: var(--instui-component-link-text-decoration-outside-text);\n  cursor: pointer;\n}\n.pfx-link:hover {\n  color: var(--instui-component-link-text-hover-color);\n}\n.pfx-link[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-text-disabled-color);\n  cursor: not-allowed;\n}\n.pfx-link.-size-sm {\n  gap: var(--instui-component-link-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n  line-height: var(--instui-component-link-line-height-sm);\n}\n.pfx-link.-size-lg {\n  gap: var(--instui-component-link-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n  line-height: var(--instui-component-link-line-height-lg);\n}\n.pfx-link.-color-inverse {\n  color: var(--instui-component-link-on-color-text-color);\n}\n.pfx-link.-color-inverse:hover {\n  color: var(--instui-component-link-on-color-text-hover-color);\n}\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-on-color-text-disabled-color);\n}\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n  display: inline;\n  font-family: var(--instui-component-link-inline-link-medium-font-family);\n  font-size: var(--instui-component-link-inline-link-medium-font-size);\n  font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n  line-height: var(--instui-component-link-inline-link-medium-line-height);\n  text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n.pfx-link.-inline.-sm {\n  font-size: var(--instui-component-link-inline-link-small-font-size);\n  font-weight: var(--instui-component-link-inline-link-small-font-weight);\n  line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n.pfx-link.-inline.-lg {\n  font-size: var(--instui-component-link-inline-link-large-font-size);\n  font-weight: var(--instui-component-link-inline-link-large-font-weight);\n  line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n.pfx-link.-unstyled {\n  color: var(--instui-component-link-unstyled-text-color);\n  text-decoration: none;\n}\n",
-	"canvas": "/**\n * @component link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links.\n */\n.pfx-link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-link-gap-md);\n  color: var(--instui-component-link-text-color);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n  font-weight: var(--instui-component-link-font-weight);\n  line-height: var(--instui-component-link-line-height-md);\n  text-decoration: var(--instui-component-link-text-decoration-outside-text);\n  cursor: pointer;\n}\n.pfx-link:hover {\n  color: var(--instui-component-link-text-hover-color);\n}\n.pfx-link[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-text-disabled-color);\n  cursor: not-allowed;\n}\n.pfx-link.-size-sm {\n  gap: var(--instui-component-link-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n  line-height: var(--instui-component-link-line-height-sm);\n}\n.pfx-link.-size-lg {\n  gap: var(--instui-component-link-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n  line-height: var(--instui-component-link-line-height-lg);\n}\n.pfx-link.-color-inverse {\n  color: var(--instui-component-link-on-color-text-color);\n}\n.pfx-link.-color-inverse:hover {\n  color: var(--instui-component-link-on-color-text-hover-color);\n}\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-on-color-text-disabled-color);\n}\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n  display: inline;\n  font-family: var(--instui-component-link-inline-link-medium-font-family);\n  font-size: var(--instui-component-link-inline-link-medium-font-size);\n  font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n  line-height: var(--instui-component-link-inline-link-medium-line-height);\n  text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n.pfx-link.-inline.-sm {\n  font-size: var(--instui-component-link-inline-link-small-font-size);\n  font-weight: var(--instui-component-link-inline-link-small-font-weight);\n  line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n.pfx-link.-inline.-lg {\n  font-size: var(--instui-component-link-inline-link-large-font-size);\n  font-weight: var(--instui-component-link-inline-link-large-font-weight);\n  line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n.pfx-link.-unstyled {\n  color: var(--instui-component-link-unstyled-text-color);\n  text-decoration: none;\n}\n",
-	"canvasHighContrast": "/**\n * @component link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links.\n */\n.pfx-link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-link-gap-md);\n  color: var(--instui-component-link-text-color);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n  font-weight: var(--instui-component-link-font-weight);\n  line-height: var(--instui-component-link-line-height-md);\n  text-decoration: var(--instui-component-link-text-decoration-outside-text);\n  cursor: pointer;\n}\n.pfx-link:hover {\n  color: var(--instui-component-link-text-hover-color);\n}\n.pfx-link[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-text-disabled-color);\n  cursor: not-allowed;\n}\n.pfx-link.-size-sm {\n  gap: var(--instui-component-link-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n  line-height: var(--instui-component-link-line-height-sm);\n}\n.pfx-link.-size-lg {\n  gap: var(--instui-component-link-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n  line-height: var(--instui-component-link-line-height-lg);\n}\n.pfx-link.-color-inverse {\n  color: var(--instui-component-link-on-color-text-color);\n}\n.pfx-link.-color-inverse:hover {\n  color: var(--instui-component-link-on-color-text-hover-color);\n}\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-on-color-text-disabled-color);\n}\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n  display: inline;\n  font-family: var(--instui-component-link-inline-link-medium-font-family);\n  font-size: var(--instui-component-link-inline-link-medium-font-size);\n  font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n  line-height: var(--instui-component-link-inline-link-medium-line-height);\n  text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n.pfx-link.-inline.-sm {\n  font-size: var(--instui-component-link-inline-link-small-font-size);\n  font-weight: var(--instui-component-link-inline-link-small-font-weight);\n  line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n.pfx-link.-inline.-lg {\n  font-size: var(--instui-component-link-inline-link-large-font-size);\n  font-weight: var(--instui-component-link-inline-link-large-font-weight);\n  line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n.pfx-link.-unstyled {\n  color: var(--instui-component-link-unstyled-text-color);\n  text-decoration: none;\n}\n"
+	"rebrand": "/**\n * @component link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @remarks Sets its own responsive `gap` between an icon and its text (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links.\n */\n.pfx-link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-link-gap-md);\n  color: var(--instui-component-link-text-color);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n  font-weight: var(--instui-component-link-font-weight);\n  line-height: var(--instui-component-link-line-height-md);\n  text-decoration: var(--instui-component-link-text-decoration-outside-text);\n  cursor: pointer;\n}\n\n.pfx-link:hover {\n  color: var(--instui-component-link-text-hover-color);\n}\n\n.pfx-link[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-text-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-link.-size-sm {\n  gap: var(--instui-component-link-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n  line-height: var(--instui-component-link-line-height-sm);\n}\n\n.pfx-link.-size-lg {\n  gap: var(--instui-component-link-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n  line-height: var(--instui-component-link-line-height-lg);\n}\n\n.pfx-link.-color-inverse {\n  color: var(--instui-component-link-on-color-text-color);\n}\n\n.pfx-link.-color-inverse:hover {\n  color: var(--instui-component-link-on-color-text-hover-color);\n}\n\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-on-color-text-disabled-color);\n}\n\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n  display: inline;\n  font-family: var(--instui-component-link-inline-link-medium-font-family);\n  font-size: var(--instui-component-link-inline-link-medium-font-size);\n  font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n  line-height: var(--instui-component-link-inline-link-medium-line-height);\n  text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n\n.pfx-link.-inline.-sm {\n  font-size: var(--instui-component-link-inline-link-small-font-size);\n  font-weight: var(--instui-component-link-inline-link-small-font-weight);\n  line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n\n.pfx-link.-inline.-lg {\n  font-size: var(--instui-component-link-inline-link-large-font-size);\n  font-weight: var(--instui-component-link-inline-link-large-font-weight);\n  line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n\n.pfx-link.-unstyled {\n  color: var(--instui-component-link-unstyled-text-color);\n  text-decoration: none;\n}\n",
+	"canvas": "/**\n * @component link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @remarks Sets its own responsive `gap` between an icon and its text (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links.\n */\n.pfx-link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-link-gap-md);\n  color: var(--instui-component-link-text-color);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n  font-weight: var(--instui-component-link-font-weight);\n  line-height: var(--instui-component-link-line-height-md);\n  text-decoration: var(--instui-component-link-text-decoration-outside-text);\n  cursor: pointer;\n}\n\n.pfx-link:hover {\n  color: var(--instui-component-link-text-hover-color);\n}\n\n.pfx-link[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-text-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-link.-size-sm {\n  gap: var(--instui-component-link-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n  line-height: var(--instui-component-link-line-height-sm);\n}\n\n.pfx-link.-size-lg {\n  gap: var(--instui-component-link-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n  line-height: var(--instui-component-link-line-height-lg);\n}\n\n.pfx-link.-color-inverse {\n  color: var(--instui-component-link-on-color-text-color);\n}\n\n.pfx-link.-color-inverse:hover {\n  color: var(--instui-component-link-on-color-text-hover-color);\n}\n\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-on-color-text-disabled-color);\n}\n\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n  display: inline;\n  font-family: var(--instui-component-link-inline-link-medium-font-family);\n  font-size: var(--instui-component-link-inline-link-medium-font-size);\n  font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n  line-height: var(--instui-component-link-inline-link-medium-line-height);\n  text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n\n.pfx-link.-inline.-sm {\n  font-size: var(--instui-component-link-inline-link-small-font-size);\n  font-weight: var(--instui-component-link-inline-link-small-font-weight);\n  line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n\n.pfx-link.-inline.-lg {\n  font-size: var(--instui-component-link-inline-link-large-font-size);\n  font-weight: var(--instui-component-link-inline-link-large-font-weight);\n  line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n\n.pfx-link.-unstyled {\n  color: var(--instui-component-link-unstyled-text-color);\n  text-decoration: none;\n}\n",
+	"canvasHighContrast": "/**\n * @component link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @remarks Sets its own responsive `gap` between an icon and its text (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links.\n */\n.pfx-link {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-link-gap-md);\n  color: var(--instui-component-link-text-color);\n  font-family: var(--instui-component-link-font-family);\n  font-size: var(--instui-component-link-font-size-md);\n  font-weight: var(--instui-component-link-font-weight);\n  line-height: var(--instui-component-link-line-height-md);\n  text-decoration: var(--instui-component-link-text-decoration-outside-text);\n  cursor: pointer;\n}\n\n.pfx-link:hover {\n  color: var(--instui-component-link-text-hover-color);\n}\n\n.pfx-link[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-text-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-link.-size-sm {\n  gap: var(--instui-component-link-gap-sm);\n  font-size: var(--instui-component-link-font-size-sm);\n  line-height: var(--instui-component-link-line-height-sm);\n}\n\n.pfx-link.-size-lg {\n  gap: var(--instui-component-link-gap-lg);\n  font-size: var(--instui-component-link-font-size-lg);\n  line-height: var(--instui-component-link-line-height-lg);\n}\n\n.pfx-link.-color-inverse {\n  color: var(--instui-component-link-on-color-text-color);\n}\n\n.pfx-link.-color-inverse:hover {\n  color: var(--instui-component-link-on-color-text-hover-color);\n}\n\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-on-color-text-disabled-color);\n}\n\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n  display: inline;\n  font-family: var(--instui-component-link-inline-link-medium-font-family);\n  font-size: var(--instui-component-link-inline-link-medium-font-size);\n  font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n  line-height: var(--instui-component-link-inline-link-medium-line-height);\n  text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n\n.pfx-link.-inline.-sm {\n  font-size: var(--instui-component-link-inline-link-small-font-size);\n  font-weight: var(--instui-component-link-inline-link-small-font-weight);\n  line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n\n.pfx-link.-inline.-lg {\n  font-size: var(--instui-component-link-inline-link-large-font-size);\n  font-weight: var(--instui-component-link-inline-link-large-font-weight);\n  line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n\n.pfx-link.-unstyled {\n  color: var(--instui-component-link-unstyled-text-color);\n  text-decoration: none;\n}\n"
 }.rebrand;
 const list$1 = {
-	"rebrand": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @modifier -ordered — Ordered-list numbering.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -delimiter-solid — Separate items with a solid rule.\n * @modifier -delimiter-dashed — Separate items with a dashed rule.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n * @structure\n * .pfx-list {\n *   li {}\n * }\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n.pfx-list > li {\n  margin: var(--instui-component-list-item-spacing-medium) 0;\n}\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n.pfx-list.-size-sm > li {\n  margin: var(--instui-component-list-item-spacing-small) 0;\n}\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n.pfx-list.-size-lg > li {\n  margin: var(--instui-component-list-item-spacing-large) 0;\n}\n.pfx-list.-ordered > li::marker {\n  font-weight: var(--instui-component-list-ordered-number-font-weight);\n}\n.pfx-list.-ordered > li {\n  padding-inline-start: var(--instui-component-list-ordered-number-margin);\n}\n.pfx-list.-delimiter-solid > li + li {\n  border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n    var(--instui-component-list-item-delimiter-solid-border-style)\n    var(--instui-component-list-item-delimiter-solid-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n.pfx-list.-delimiter-dashed > li + li {\n  border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n    var(--instui-component-list-item-delimiter-dashed-border-style)\n    var(--instui-component-list-item-delimiter-dashed-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n  list-style: none;\n  padding-inline-start: 0;\n}\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--instui-component-list-item-spacing-medium);\n  list-style: none;\n  padding-inline-start: 0;\n}\n.pfx-list.-inline > li {\n  margin: 0;\n}\n",
-	"canvas": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @modifier -ordered — Ordered-list numbering.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -delimiter-solid — Separate items with a solid rule.\n * @modifier -delimiter-dashed — Separate items with a dashed rule.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n * @structure\n * .pfx-list {\n *   li {}\n * }\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n.pfx-list > li {\n  margin: var(--instui-component-list-item-spacing-medium) 0;\n}\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n.pfx-list.-size-sm > li {\n  margin: var(--instui-component-list-item-spacing-small) 0;\n}\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n.pfx-list.-size-lg > li {\n  margin: var(--instui-component-list-item-spacing-large) 0;\n}\n.pfx-list.-ordered > li::marker {\n  font-weight: var(--instui-component-list-ordered-number-font-weight);\n}\n.pfx-list.-ordered > li {\n  padding-inline-start: var(--instui-component-list-ordered-number-margin);\n}\n.pfx-list.-delimiter-solid > li + li {\n  border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n    var(--instui-component-list-item-delimiter-solid-border-style)\n    var(--instui-component-list-item-delimiter-solid-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n.pfx-list.-delimiter-dashed > li + li {\n  border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n    var(--instui-component-list-item-delimiter-dashed-border-style)\n    var(--instui-component-list-item-delimiter-dashed-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n  list-style: none;\n  padding-inline-start: 0;\n}\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--instui-component-list-item-spacing-medium);\n  list-style: none;\n  padding-inline-start: 0;\n}\n.pfx-list.-inline > li {\n  margin: 0;\n}\n",
-	"canvasHighContrast": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @modifier -ordered — Ordered-list numbering.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -delimiter-solid — Separate items with a solid rule.\n * @modifier -delimiter-dashed — Separate items with a dashed rule.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n * @structure\n * .pfx-list {\n *   li {}\n * }\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n.pfx-list > li {\n  margin: var(--instui-component-list-item-spacing-medium) 0;\n}\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n.pfx-list.-size-sm > li {\n  margin: var(--instui-component-list-item-spacing-small) 0;\n}\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n.pfx-list.-size-lg > li {\n  margin: var(--instui-component-list-item-spacing-large) 0;\n}\n.pfx-list.-ordered > li::marker {\n  font-weight: var(--instui-component-list-ordered-number-font-weight);\n}\n.pfx-list.-ordered > li {\n  padding-inline-start: var(--instui-component-list-ordered-number-margin);\n}\n.pfx-list.-delimiter-solid > li + li {\n  border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n    var(--instui-component-list-item-delimiter-solid-border-style)\n    var(--instui-component-list-item-delimiter-solid-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n.pfx-list.-delimiter-dashed > li + li {\n  border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n    var(--instui-component-list-item-delimiter-dashed-border-style)\n    var(--instui-component-list-item-delimiter-dashed-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n  list-style: none;\n  padding-inline-start: 0;\n}\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--instui-component-list-item-spacing-medium);\n  list-style: none;\n  padding-inline-start: 0;\n}\n.pfx-list.-inline > li {\n  margin: 0;\n}\n"
+	"rebrand": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @remarks Sets its own `padding-inline-start` for list indentation; chaining a `-p*`/`-padding*` spacing utility modifier overrides that built-in value.\n * @modifier -ordered — Ordered-list numbering.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -delimiter-solid — Separate items with a solid rule.\n * @modifier -delimiter-dashed — Separate items with a dashed rule.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n * @structure\n * .pfx-list {\n *   li {}\n * }\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n\n.pfx-list > li {\n  margin: var(--instui-component-list-item-spacing-medium) 0;\n}\n\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n\n.pfx-list.-size-sm > li {\n  margin: var(--instui-component-list-item-spacing-small) 0;\n}\n\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n\n.pfx-list.-size-lg > li {\n  margin: var(--instui-component-list-item-spacing-large) 0;\n}\n\n.pfx-list.-ordered > li::marker {\n  font-weight: var(--instui-component-list-ordered-number-font-weight);\n}\n\n.pfx-list.-ordered > li {\n  padding-inline-start: var(--instui-component-list-ordered-number-margin);\n}\n\n.pfx-list.-delimiter-solid > li + li {\n  border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n    var(--instui-component-list-item-delimiter-solid-border-style)\n    var(--instui-component-list-item-delimiter-solid-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n\n.pfx-list.-delimiter-dashed > li + li {\n  border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n    var(--instui-component-list-item-delimiter-dashed-border-style)\n    var(--instui-component-list-item-delimiter-dashed-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--instui-component-list-item-spacing-medium);\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n.pfx-list.-inline > li {\n  margin: 0;\n}\n",
+	"canvas": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @remarks Sets its own `padding-inline-start` for list indentation; chaining a `-p*`/`-padding*` spacing utility modifier overrides that built-in value.\n * @modifier -ordered — Ordered-list numbering.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -delimiter-solid — Separate items with a solid rule.\n * @modifier -delimiter-dashed — Separate items with a dashed rule.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n * @structure\n * .pfx-list {\n *   li {}\n * }\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n\n.pfx-list > li {\n  margin: var(--instui-component-list-item-spacing-medium) 0;\n}\n\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n\n.pfx-list.-size-sm > li {\n  margin: var(--instui-component-list-item-spacing-small) 0;\n}\n\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n\n.pfx-list.-size-lg > li {\n  margin: var(--instui-component-list-item-spacing-large) 0;\n}\n\n.pfx-list.-ordered > li::marker {\n  font-weight: var(--instui-component-list-ordered-number-font-weight);\n}\n\n.pfx-list.-ordered > li {\n  padding-inline-start: var(--instui-component-list-ordered-number-margin);\n}\n\n.pfx-list.-delimiter-solid > li + li {\n  border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n    var(--instui-component-list-item-delimiter-solid-border-style)\n    var(--instui-component-list-item-delimiter-solid-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n\n.pfx-list.-delimiter-dashed > li + li {\n  border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n    var(--instui-component-list-item-delimiter-dashed-border-style)\n    var(--instui-component-list-item-delimiter-dashed-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--instui-component-list-item-spacing-medium);\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n.pfx-list.-inline > li {\n  margin: 0;\n}\n",
+	"canvasHighContrast": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @remarks Sets its own `padding-inline-start` for list indentation; chaining a `-p*`/`-padding*` spacing utility modifier overrides that built-in value.\n * @modifier -ordered — Ordered-list numbering.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -delimiter-solid — Separate items with a solid rule.\n * @modifier -delimiter-dashed — Separate items with a dashed rule.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @example\n * <ul class=\"pfx-list\">\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </ul>\n * @structure\n * .pfx-list {\n *   li {}\n * }\n */\n.pfx-list {\n  color: var(--instui-component-list-item-color);\n  font-family: var(--instui-component-list-item-font-family);\n  font-size: var(--instui-component-list-item-font-size-medium);\n  font-weight: var(--instui-component-list-item-font-weight);\n  line-height: var(--instui-component-list-item-line-height);\n  padding-inline-start: var(--instui-component-list-list-padding);\n}\n\n.pfx-list > li {\n  margin: var(--instui-component-list-item-spacing-medium) 0;\n}\n\n.pfx-list.-size-sm {\n  font-size: var(--instui-component-list-item-font-size-small);\n}\n\n.pfx-list.-size-sm > li {\n  margin: var(--instui-component-list-item-spacing-small) 0;\n}\n\n.pfx-list.-size-lg {\n  font-size: var(--instui-component-list-item-font-size-large);\n}\n\n.pfx-list.-size-lg > li {\n  margin: var(--instui-component-list-item-spacing-large) 0;\n}\n\n.pfx-list.-ordered > li::marker {\n  font-weight: var(--instui-component-list-ordered-number-font-weight);\n}\n\n.pfx-list.-ordered > li {\n  padding-inline-start: var(--instui-component-list-ordered-number-margin);\n}\n\n.pfx-list.-delimiter-solid > li + li {\n  border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n    var(--instui-component-list-item-delimiter-solid-border-style)\n    var(--instui-component-list-item-delimiter-solid-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n\n.pfx-list.-delimiter-dashed > li + li {\n  border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n    var(--instui-component-list-item-delimiter-dashed-border-style)\n    var(--instui-component-list-item-delimiter-dashed-border-color);\n  padding-top: var(--instui-component-list-item-spacing-medium);\n}\n\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--instui-component-list-item-spacing-medium);\n  list-style: none;\n  padding-inline-start: 0;\n}\n\n.pfx-list.-inline > li {\n  margin: 0;\n}\n"
 }.rebrand;
 const menu$1 = {
 	"rebrand": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-menu\">\n *   <div class=\"group\">Actions</div>\n *   <div class=\"item\">Edit</div>\n *   <div class=\"item -active\">Duplicate</div>\n *   <div class=\"separator\"></div>\n *   <div class=\"item\">Delete</div>\n * </div>\n * ```\n * @structure\n * .pfx-menu {\n *   .group {}\n *   .item {}\n *   .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n.pfx-menu {\n  min-width: var(--instui-component-menu-min-width);\n  max-width: var(--instui-component-menu-max-width);\n  background: var(--instui-component-menu-item-background);\n  border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-spacing-space-xs) 0;\n}\n\n@scope (.pfx-menu) {\n  :scope > .item {\n    display: block;\n    padding: var(--instui-component-menu-item-padding-vertical)\n      var(--instui-component-menu-item-padding-horizontal);\n    color: var(--instui-component-menu-item-label-color);\n    font-family: var(--instui-component-menu-item-font-family);\n    font-size: var(--instui-component-menu-item-font-size);\n    font-weight: var(--instui-component-menu-item-font-weight);\n    line-height: var(--instui-component-menu-item-line-height);\n    cursor: pointer;\n  }\n\n  /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n  :scope > .item.-disabled {\n    opacity: var(--instui-opacity-disabled);\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :scope > .item:hover,\n  :scope > .item.-highlighted {\n    background: var(--instui-component-menu-item-highlighted-background);\n    color: var(--instui-component-menu-item-highlighted-label-color);\n  }\n\n  :scope > .item.-active,\n  :scope > .item[aria-checked=\"true\"] {\n    background: var(--instui-component-menu-item-active-background);\n    color: var(--instui-component-menu-item-active-label-color);\n  }\n\n  :scope > .item.-active:hover,\n  :scope > .item[aria-checked=\"true\"]:hover {\n    background: var(--instui-component-menu-item-selected-highlighted-background);\n  }\n\n  /* Secondary line inside an item (a description or shortcut). */\n  .item-info {\n    color: var(--instui-component-menu-item-label-info-color);\n  }\n\n  :scope > .item:hover .item-info,\n  :scope > .item.-highlighted .item-info {\n    color: var(--instui-component-menu-item-highlighted-label-info-color);\n  }\n\n  /* A labelled group of items. */\n  :scope > .group {\n    padding: var(--instui-component-menu-group-padding-vertical)\n      var(--instui-component-menu-group-padding-horizontal);\n    background: var(--instui-component-menu-group-background);\n    color: var(--instui-component-menu-group-color);\n    font-family: var(--instui-component-menu-group-font-family);\n    font-size: var(--instui-component-menu-group-font-size);\n    font-weight: var(--instui-component-menu-group-font-weight);\n  }\n\n  :scope > .separator {\n    height: var(--instui-component-menu-separator-height);\n    background: var(--instui-component-menu-separator-background);\n    margin: var(--instui-component-menu-separator-margin-vertical)\n      var(--instui-component-menu-separator-margin-horizontal);\n  }\n}\n",
@@ -358,9 +388,9 @@ const menu$1 = {
 	"canvasHighContrast": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-menu\">\n *   <div class=\"group\">Actions</div>\n *   <div class=\"item\">Edit</div>\n *   <div class=\"item -active\">Duplicate</div>\n *   <div class=\"separator\"></div>\n *   <div class=\"item\">Delete</div>\n * </div>\n * ```\n * @structure\n * .pfx-menu {\n *   .group {}\n *   .item {}\n *   .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n.pfx-menu {\n  min-width: var(--instui-component-menu-min-width);\n  max-width: var(--instui-component-menu-max-width);\n  background: var(--instui-component-menu-item-background);\n  border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-spacing-space-xs) 0;\n}\n\n@scope (.pfx-menu) {\n  :scope > .item {\n    display: block;\n    padding: var(--instui-component-menu-item-padding-vertical)\n      var(--instui-component-menu-item-padding-horizontal);\n    color: var(--instui-component-menu-item-label-color);\n    font-family: var(--instui-component-menu-item-font-family);\n    font-size: var(--instui-component-menu-item-font-size);\n    font-weight: var(--instui-component-menu-item-font-weight);\n    line-height: var(--instui-component-menu-item-line-height);\n    cursor: pointer;\n  }\n\n  /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n  :scope > .item.-disabled {\n    opacity: var(--instui-opacity-disabled);\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :scope > .item:hover,\n  :scope > .item.-highlighted {\n    background: var(--instui-component-menu-item-highlighted-background);\n    color: var(--instui-component-menu-item-highlighted-label-color);\n  }\n\n  :scope > .item.-active,\n  :scope > .item[aria-checked=\"true\"] {\n    background: var(--instui-component-menu-item-active-background);\n    color: var(--instui-component-menu-item-active-label-color);\n  }\n\n  :scope > .item.-active:hover,\n  :scope > .item[aria-checked=\"true\"]:hover {\n    background: var(--instui-component-menu-item-selected-highlighted-background);\n  }\n\n  /* Secondary line inside an item (a description or shortcut). */\n  .item-info {\n    color: var(--instui-component-menu-item-label-info-color);\n  }\n\n  :scope > .item:hover .item-info,\n  :scope > .item.-highlighted .item-info {\n    color: var(--instui-component-menu-item-highlighted-label-info-color);\n  }\n\n  /* A labelled group of items. */\n  :scope > .group {\n    padding: var(--instui-component-menu-group-padding-vertical)\n      var(--instui-component-menu-group-padding-horizontal);\n    background: var(--instui-component-menu-group-background);\n    color: var(--instui-component-menu-group-color);\n    font-family: var(--instui-component-menu-group-font-family);\n    font-size: var(--instui-component-menu-group-font-size);\n    font-weight: var(--instui-component-menu-group-font-weight);\n  }\n\n  :scope > .separator {\n    height: var(--instui-component-menu-separator-height);\n    background: var(--instui-component-menu-separator-background);\n    margin: var(--instui-component-menu-separator-margin-vertical)\n      var(--instui-component-menu-separator-margin-horizontal);\n  }\n}\n"
 }.rebrand;
 const metric$1 = {
-	"rebrand": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n *   <span class=\"value\">1,284</span>\n *   <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n *   .value {}\n *   .label {}\n * }\n */\n.pfx-metric {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--instui-component-metric-gap-texts);\n  padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n@scope (.pfx-metric) {\n  :scope > .value {\n    color: var(--instui-component-metric-value-color);\n    font-family: var(--instui-component-metric-value-font-family);\n    font-size: var(--instui-component-metric-value-font-size);\n    font-weight: var(--instui-component-metric-value-font-weight);\n    line-height: var(--instui-component-metric-value-line-height);\n  }\n  :scope > .label {\n    color: var(--instui-component-metric-label-color);\n    font-family: var(--instui-component-metric-label-font-family);\n    font-size: var(--instui-component-metric-label-font-size);\n    font-weight: var(--instui-component-metric-label-font-weight);\n    line-height: var(--instui-component-metric-label-line-height);\n  }\n}\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n   actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n   covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n  align-items: flex-start;\n  text-align: start;\n}\n.pfx-metric.-text-align-center {\n  align-items: center;\n  text-align: center;\n}\n.pfx-metric.-text-align-end {\n  align-items: flex-end;\n  text-align: end;\n}\n",
-	"canvas": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n *   <span class=\"value\">1,284</span>\n *   <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n *   .value {}\n *   .label {}\n * }\n */\n.pfx-metric {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--instui-component-metric-gap-texts);\n  padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n@scope (.pfx-metric) {\n  :scope > .value {\n    color: var(--instui-component-metric-value-color);\n    font-family: var(--instui-component-metric-value-font-family);\n    font-size: var(--instui-component-metric-value-font-size);\n    font-weight: var(--instui-component-metric-value-font-weight);\n    line-height: var(--instui-component-metric-value-line-height);\n  }\n  :scope > .label {\n    color: var(--instui-component-metric-label-color);\n    font-family: var(--instui-component-metric-label-font-family);\n    font-size: var(--instui-component-metric-label-font-size);\n    font-weight: var(--instui-component-metric-label-font-weight);\n    line-height: var(--instui-component-metric-label-line-height);\n  }\n}\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n   actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n   covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n  align-items: flex-start;\n  text-align: start;\n}\n.pfx-metric.-text-align-center {\n  align-items: center;\n  text-align: center;\n}\n.pfx-metric.-text-align-end {\n  align-items: flex-end;\n  text-align: end;\n}\n",
-	"canvasHighContrast": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n *   <span class=\"value\">1,284</span>\n *   <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n *   .value {}\n *   .label {}\n * }\n */\n.pfx-metric {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--instui-component-metric-gap-texts);\n  padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n@scope (.pfx-metric) {\n  :scope > .value {\n    color: var(--instui-component-metric-value-color);\n    font-family: var(--instui-component-metric-value-font-family);\n    font-size: var(--instui-component-metric-value-font-size);\n    font-weight: var(--instui-component-metric-value-font-weight);\n    line-height: var(--instui-component-metric-value-line-height);\n  }\n  :scope > .label {\n    color: var(--instui-component-metric-label-color);\n    font-family: var(--instui-component-metric-label-font-family);\n    font-size: var(--instui-component-metric-label-font-size);\n    font-weight: var(--instui-component-metric-label-font-weight);\n    line-height: var(--instui-component-metric-label-line-height);\n  }\n}\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n   actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n   covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n  align-items: flex-start;\n  text-align: start;\n}\n.pfx-metric.-text-align-center {\n  align-items: center;\n  text-align: center;\n}\n.pfx-metric.-text-align-end {\n  align-items: flex-end;\n  text-align: end;\n}\n"
+	"rebrand": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @remarks Sets its own `gap` between the value and label, and its own horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n *   <span class=\"value\">1,284</span>\n *   <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n *   .value {}\n *   .label {}\n * }\n */\n.pfx-metric {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--instui-component-metric-gap-texts);\n  padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n\n@scope (.pfx-metric) {\n  :scope > .value {\n    color: var(--instui-component-metric-value-color);\n    font-family: var(--instui-component-metric-value-font-family);\n    font-size: var(--instui-component-metric-value-font-size);\n    font-weight: var(--instui-component-metric-value-font-weight);\n    line-height: var(--instui-component-metric-value-line-height);\n  }\n\n  :scope > .label {\n    color: var(--instui-component-metric-label-color);\n    font-family: var(--instui-component-metric-label-font-family);\n    font-size: var(--instui-component-metric-label-font-size);\n    font-weight: var(--instui-component-metric-label-font-weight);\n    line-height: var(--instui-component-metric-label-line-height);\n  }\n}\n\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n   actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n   covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n  align-items: flex-start;\n  text-align: start;\n}\n\n.pfx-metric.-text-align-center {\n  align-items: center;\n  text-align: center;\n}\n\n.pfx-metric.-text-align-end {\n  align-items: flex-end;\n  text-align: end;\n}\n",
+	"canvas": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @remarks Sets its own `gap` between the value and label, and its own horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n *   <span class=\"value\">1,284</span>\n *   <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n *   .value {}\n *   .label {}\n * }\n */\n.pfx-metric {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--instui-component-metric-gap-texts);\n  padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n\n@scope (.pfx-metric) {\n  :scope > .value {\n    color: var(--instui-component-metric-value-color);\n    font-family: var(--instui-component-metric-value-font-family);\n    font-size: var(--instui-component-metric-value-font-size);\n    font-weight: var(--instui-component-metric-value-font-weight);\n    line-height: var(--instui-component-metric-value-line-height);\n  }\n\n  :scope > .label {\n    color: var(--instui-component-metric-label-color);\n    font-family: var(--instui-component-metric-label-font-family);\n    font-size: var(--instui-component-metric-label-font-size);\n    font-weight: var(--instui-component-metric-label-font-weight);\n    line-height: var(--instui-component-metric-label-line-height);\n  }\n}\n\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n   actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n   covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n  align-items: flex-start;\n  text-align: start;\n}\n\n.pfx-metric.-text-align-center {\n  align-items: center;\n  text-align: center;\n}\n\n.pfx-metric.-text-align-end {\n  align-items: flex-end;\n  text-align: end;\n}\n",
+	"canvasHighContrast": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @remarks Sets its own `gap` between the value and label, and its own horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n *   <span class=\"value\">1,284</span>\n *   <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n *   .value {}\n *   .label {}\n * }\n */\n.pfx-metric {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--instui-component-metric-gap-texts);\n  padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n\n@scope (.pfx-metric) {\n  :scope > .value {\n    color: var(--instui-component-metric-value-color);\n    font-family: var(--instui-component-metric-value-font-family);\n    font-size: var(--instui-component-metric-value-font-size);\n    font-weight: var(--instui-component-metric-value-font-weight);\n    line-height: var(--instui-component-metric-value-line-height);\n  }\n\n  :scope > .label {\n    color: var(--instui-component-metric-label-color);\n    font-family: var(--instui-component-metric-label-font-family);\n    font-size: var(--instui-component-metric-label-font-size);\n    font-weight: var(--instui-component-metric-label-font-weight);\n    line-height: var(--instui-component-metric-label-line-height);\n  }\n}\n\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n   actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n   covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n  align-items: flex-start;\n  text-align: start;\n}\n\n.pfx-metric.-text-align-center {\n  align-items: center;\n  text-align: center;\n}\n\n.pfx-metric.-text-align-end {\n  align-items: flex-end;\n  text-align: end;\n}\n"
 }.rebrand;
 const modal$1 = {
 	"rebrand": "/**\n * @component modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body).\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body.\n * @part .header — The title row.\n * @part .body — The content region (a lone <img> goes full-bleed).\n * @part .footer — The actions row.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n *   <div class=\"header\"><strong>Small</strong></div>\n *   <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n *   <div class=\"footer\">\n *     <button class=\"pfx-button\">Close</button>\n *   </div>\n * </dialog>\n * @structure\n * .pfx-modal.-size-sm {\n *   .header {\n *     strong {}\n *   }\n *   .body {\n *     code {}\n *   }\n *   .footer {\n *     .pfx-button {}\n *   }\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n.pfx-modal {\n  max-width: var(--instui-component-modal-medium-max-width);\n  background: var(--instui-component-modal-background-color);\n  color: var(--instui-component-modal-text-color);\n  border: var(--instui-component-modal-border-width) solid\n    var(--instui-component-modal-border-color);\n  border-radius: var(--instui-component-modal-border-radius);\n  font-family: var(--instui-component-modal-font-family);\n  overflow: hidden;\n  /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n  box-shadow: var(--instui-elevation-topmost);\n}\n/* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n   no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n   optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\ndialog.pfx-modal {\n  margin: auto;\n  padding: 0;\n}\ndialog.pfx-modal::backdrop {\n  background: var(--instui-component-mask-background-color);\n}\ndialog.pfx-modal.-blur::backdrop {\n  backdrop-filter: blur(0.5rem);\n}\n.pfx-modal.-size-sm {\n  max-width: var(--instui-component-modal-small-max-width);\n}\n.pfx-modal.-size-lg {\n  max-width: var(--instui-component-modal-large-max-width);\n}\n.pfx-modal.-size-auto {\n  max-width: none;\n  min-width: var(--instui-component-modal-auto-min-width);\n}\n/* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n   inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n   `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n   at the viewport edge. */\n.pfx-modal.-size-fullscreen {\n  position: fixed;\n  inset: 0;\n  width: auto;\n  height: auto;\n  max-width: none;\n  max-height: none;\n  margin: 0;\n  border-radius: 0;\n}\n/* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n   stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n.pfx-modal.-overflow-fit {\n  display: flex;\n  flex-direction: column;\n  max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n}\n.pfx-modal.-color-inverse {\n  background: var(--instui-component-modal-inverse-background-color);\n  color: var(--instui-component-modal-inverse-text-color);\n  border-color: var(--instui-component-modal-inverse-border-color);\n}\n@scope (.pfx-modal) {\n  :scope.-overflow-fit > .body {\n    overflow-y: auto;\n  }\n  :scope > .header {\n    padding: var(--instui-component-modal-header-padding);\n    background: var(--instui-component-modal-header-background-color);\n    border-bottom: var(--instui-component-modal-header-border-width) solid\n      var(--instui-component-modal-header-border-color);\n  }\n  :scope > .body {\n    padding: var(--instui-component-modal-body-padding);\n  }\n  /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n   modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n  :scope > .body:has(> img) {\n    padding: 0;\n  }\n  :scope > .body:has(> img) img {\n    display: block;\n    width: 100%;\n  }\n  :scope > .footer {\n    padding: var(--instui-component-modal-footer-padding);\n    background: var(--instui-component-modal-footer-background-color);\n    border-top: var(--instui-component-modal-footer-border-width) solid\n      var(--instui-component-modal-footer-border-color);\n    border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n      var(--instui-component-modal-footer-border-radius);\n  }\n  :scope.-density-compact > .header {\n    padding: var(--instui-component-modal-header-padding-compact);\n  }\n  :scope.-density-compact > .body {\n    padding: var(--instui-component-modal-body-padding-compact);\n  }\n  :scope.-density-compact > .footer {\n    padding: var(--instui-component-modal-footer-padding-compact);\n  }\n  :scope.-color-inverse > .header {\n    background: var(--instui-component-modal-header-inverse-background-color);\n    border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n  }\n  :scope.-color-inverse > .body {\n    background: var(--instui-component-modal-body-inverse-background-color);\n  }\n  :scope.-color-inverse > .footer {\n    background: var(--instui-component-modal-footer-inverse-background-color);\n    border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n  }\n}\n",
@@ -368,9 +398,9 @@ const modal$1 = {
 	"canvasHighContrast": "/**\n * @component modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body).\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body.\n * @part .header — The title row.\n * @part .body — The content region (a lone <img> goes full-bleed).\n * @part .footer — The actions row.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n *   <div class=\"header\"><strong>Small</strong></div>\n *   <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n *   <div class=\"footer\">\n *     <button class=\"pfx-button\">Close</button>\n *   </div>\n * </dialog>\n * @structure\n * .pfx-modal.-size-sm {\n *   .header {\n *     strong {}\n *   }\n *   .body {\n *     code {}\n *   }\n *   .footer {\n *     .pfx-button {}\n *   }\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n.pfx-modal {\n  max-width: var(--instui-component-modal-medium-max-width);\n  background: var(--instui-component-modal-background-color);\n  color: var(--instui-component-modal-text-color);\n  border: var(--instui-component-modal-border-width) solid\n    var(--instui-component-modal-border-color);\n  border-radius: var(--instui-component-modal-border-radius);\n  font-family: var(--instui-component-modal-font-family);\n  overflow: hidden;\n  /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n  box-shadow: var(--instui-elevation-topmost);\n}\n/* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n   no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n   optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\ndialog.pfx-modal {\n  margin: auto;\n  padding: 0;\n}\ndialog.pfx-modal::backdrop {\n  background: var(--instui-component-mask-background-color);\n}\ndialog.pfx-modal.-blur::backdrop {\n  backdrop-filter: blur(0.5rem);\n}\n.pfx-modal.-size-sm {\n  max-width: var(--instui-component-modal-small-max-width);\n}\n.pfx-modal.-size-lg {\n  max-width: var(--instui-component-modal-large-max-width);\n}\n.pfx-modal.-size-auto {\n  max-width: none;\n  min-width: var(--instui-component-modal-auto-min-width);\n}\n/* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n   inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n   `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n   at the viewport edge. */\n.pfx-modal.-size-fullscreen {\n  position: fixed;\n  inset: 0;\n  width: auto;\n  height: auto;\n  max-width: none;\n  max-height: none;\n  margin: 0;\n  border-radius: 0;\n}\n/* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n   stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n.pfx-modal.-overflow-fit {\n  display: flex;\n  flex-direction: column;\n  max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n}\n.pfx-modal.-color-inverse {\n  background: var(--instui-component-modal-inverse-background-color);\n  color: var(--instui-component-modal-inverse-text-color);\n  border-color: var(--instui-component-modal-inverse-border-color);\n}\n@scope (.pfx-modal) {\n  :scope.-overflow-fit > .body {\n    overflow-y: auto;\n  }\n  :scope > .header {\n    padding: var(--instui-component-modal-header-padding);\n    background: var(--instui-component-modal-header-background-color);\n    border-bottom: var(--instui-component-modal-header-border-width) solid\n      var(--instui-component-modal-header-border-color);\n  }\n  :scope > .body {\n    padding: var(--instui-component-modal-body-padding);\n  }\n  /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n   modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n  :scope > .body:has(> img) {\n    padding: 0;\n  }\n  :scope > .body:has(> img) img {\n    display: block;\n    width: 100%;\n  }\n  :scope > .footer {\n    padding: var(--instui-component-modal-footer-padding);\n    background: var(--instui-component-modal-footer-background-color);\n    border-top: var(--instui-component-modal-footer-border-width) solid\n      var(--instui-component-modal-footer-border-color);\n    border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n      var(--instui-component-modal-footer-border-radius);\n  }\n  :scope.-density-compact > .header {\n    padding: var(--instui-component-modal-header-padding-compact);\n  }\n  :scope.-density-compact > .body {\n    padding: var(--instui-component-modal-body-padding-compact);\n  }\n  :scope.-density-compact > .footer {\n    padding: var(--instui-component-modal-footer-padding-compact);\n  }\n  :scope.-color-inverse > .header {\n    background: var(--instui-component-modal-header-inverse-background-color);\n    border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n  }\n  :scope.-color-inverse > .body {\n    background: var(--instui-component-modal-body-inverse-background-color);\n  }\n  :scope.-color-inverse > .footer {\n    background: var(--instui-component-modal-footer-inverse-background-color);\n    border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n  }\n}\n"
 }.rebrand;
 const pagination$1 = {
-	"rebrand": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @part .page — A page link or button; the current page carries `[aria-current]`.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate current\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n *   <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n *   <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n *   <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n *   <a class=\"page\" href=\"#\">2</a>\n *   <a class=\"page\" href=\"#\">3</a>\n *   <span class=\"ellipsis\">…</span>\n *   <a class=\"page\" href=\"#\">12</a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n *   .arrow {\n *     [class*=\"-icon-\"]:optional {}\n *   }\n *   .page {}\n *   .ellipsis {}\n * }\n */\n.pfx-pagination {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-pagination-page-indicator-gap);\n  font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n  /* A page number or a nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .page,\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .page:hover,\n  :scope > .arrow:hover {\n    background: var(--instui-color-background-muted);\n    color: var(--instui-color-text-interactive-navigation-primary-hover);\n  }\n\n  /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n\n  /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n",
-	"canvas": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @part .page — A page link or button; the current page carries `[aria-current]`.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate current\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n *   <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n *   <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n *   <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n *   <a class=\"page\" href=\"#\">2</a>\n *   <a class=\"page\" href=\"#\">3</a>\n *   <span class=\"ellipsis\">…</span>\n *   <a class=\"page\" href=\"#\">12</a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n *   .arrow {\n *     [class*=\"-icon-\"]:optional {}\n *   }\n *   .page {}\n *   .ellipsis {}\n * }\n */\n.pfx-pagination {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-pagination-page-indicator-gap);\n  font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n  /* A page number or a nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .page,\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .page:hover,\n  :scope > .arrow:hover {\n    background: var(--instui-color-background-muted);\n    color: var(--instui-color-text-interactive-navigation-primary-hover);\n  }\n\n  /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n\n  /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n",
-	"canvasHighContrast": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @part .page — A page link or button; the current page carries `[aria-current]`.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate current\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n *   <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n *   <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n *   <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n *   <a class=\"page\" href=\"#\">2</a>\n *   <a class=\"page\" href=\"#\">3</a>\n *   <span class=\"ellipsis\">…</span>\n *   <a class=\"page\" href=\"#\">12</a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n *   .arrow {\n *     [class*=\"-icon-\"]:optional {}\n *   }\n *   .page {}\n *   .ellipsis {}\n * }\n */\n.pfx-pagination {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-pagination-page-indicator-gap);\n  font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n  /* A page number or a nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .page,\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .page:hover,\n  :scope > .arrow:hover {\n    background: var(--instui-color-background-muted);\n    color: var(--instui-color-text-interactive-navigation-primary-hover);\n  }\n\n  /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n\n  /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n"
+	"rebrand": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @remarks Sets its own `gap` between page controls; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @part .page — A page link or button; the current page carries `[aria-current]`.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate current\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n *   <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n *   <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n *   <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n *   <a class=\"page\" href=\"#\">2</a>\n *   <a class=\"page\" href=\"#\">3</a>\n *   <span class=\"ellipsis\">…</span>\n *   <a class=\"page\" href=\"#\">12</a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n *   .arrow {\n *     [class*=\"-icon-\"]:optional {}\n *   }\n *   .page {}\n *   .ellipsis {}\n * }\n */\n.pfx-pagination {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-pagination-page-indicator-gap);\n  font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n  /* A page number or a nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .page,\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .page:hover,\n  :scope > .arrow:hover {\n    background: var(--instui-color-background-muted);\n    color: var(--instui-color-text-interactive-navigation-primary-hover);\n  }\n\n  /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n\n  /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n",
+	"canvas": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @remarks Sets its own `gap` between page controls; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @part .page — A page link or button; the current page carries `[aria-current]`.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate current\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n *   <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n *   <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n *   <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n *   <a class=\"page\" href=\"#\">2</a>\n *   <a class=\"page\" href=\"#\">3</a>\n *   <span class=\"ellipsis\">…</span>\n *   <a class=\"page\" href=\"#\">12</a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n *   .arrow {\n *     [class*=\"-icon-\"]:optional {}\n *   }\n *   .page {}\n *   .ellipsis {}\n * }\n */\n.pfx-pagination {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-pagination-page-indicator-gap);\n  font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n  /* A page number or a nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .page,\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .page:hover,\n  :scope > .arrow:hover {\n    background: var(--instui-color-background-muted);\n    color: var(--instui-color-text-interactive-navigation-primary-hover);\n  }\n\n  /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n\n  /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n",
+	"canvasHighContrast": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @remarks Sets its own `gap` between page controls; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @part .page — A page link or button; the current page carries `[aria-current]`.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate current\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n *   <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n *   <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n *   <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n *   <a class=\"page\" href=\"#\">2</a>\n *   <a class=\"page\" href=\"#\">3</a>\n *   <span class=\"ellipsis\">…</span>\n *   <a class=\"page\" href=\"#\">12</a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n *   <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n *   .arrow {\n *     [class*=\"-icon-\"]:optional {}\n *   }\n *   .page {}\n *   .ellipsis {}\n * }\n */\n.pfx-pagination {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--instui-component-pagination-page-indicator-gap);\n  font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n  /* A page number or a nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n  :scope > .page,\n  :scope > .arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    min-block-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    color: var(--instui-color-text-interactive-navigation-primary-base);\n    background: transparent;\n    border: var(--instui-border-width-md) solid transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    font: inherit;\n    font-weight: var(--instui-font-weight-interactive);\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  :scope > .arrow [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .page:hover,\n  :scope > .arrow:hover {\n    background: var(--instui-color-background-muted);\n    color: var(--instui-color-text-interactive-navigation-primary-hover);\n  }\n\n  /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n  :scope > .page[aria-current],\n  :scope > .page.-current {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n    border-color: var(--instui-color-background-interactive-action-primary-base);\n  }\n\n  :scope > .page[aria-current]:hover,\n  :scope > .page.-current:hover {\n    background: var(--instui-color-background-interactive-action-primary-hover);\n    border-color: var(--instui-color-background-interactive-action-primary-hover);\n    color: var(--instui-color-text-interactive-action-primary-base);\n  }\n\n  /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n  :scope > .arrow:disabled,\n  :scope > .arrow[aria-disabled=\"true\"] {\n    color: var(--instui-color-text-muted);\n    background: transparent;\n    opacity: var(--instui-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* The truncation ellipsis — inert text. */\n  :scope > .ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    color: var(--instui-color-text-muted);\n  }\n\n  /* variant=\"input\" label (\"Page … of N\"). */\n  :scope > .page-input-label {\n    color: var(--instui-component-pagination-page-input-label-color);\n  }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n  gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n  inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n"
 }.rebrand;
 const pill$1 = {
 	"rebrand": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"instui-display-flex\" style=\"gap: 12px;\">\n *   <span class=\"instui-pill -color-success -icon-check\">Published</span>\n *   <span class=\"instui-pill\">Draft</span>\n *   <span class=\"instui-pill -color-info\">In review</span>\n *   <span class=\"instui-pill -color-warning\">Stale</span>\n *   <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n.pfx-pill {\n  display: inline-flex;\n  align-items: center;\n  height: var(--instui-component-pill-height);\n  max-width: var(--instui-component-pill-max-width);\n  padding: 0 var(--instui-component-pill-padding-horizontal);\n  background: var(--instui-component-pill-background-color);\n  color: var(--instui-component-pill-base-text-color);\n  border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n    var(--instui-component-pill-base-border-color);\n  border-radius: var(--instui-component-pill-border-radius);\n  font-family: var(--instui-component-pill-font-family);\n  font-size: var(--instui-component-pill-text-font-size);\n  font-weight: var(--instui-component-pill-text-font-weight);\n  line-height: var(--instui-component-pill-line-height);\n}\n\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n   inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n  inline-size: var(--instui-font-size-text-xs);\n  block-size: var(--instui-font-size-text-xs);\n  margin-inline-end: 0.375rem;\n}\n\n.pfx-pill.-color-info {\n  color: var(--instui-component-pill-info-text-color);\n  border-color: var(--instui-component-pill-info-border-color);\n}\n\n.pfx-pill.-color-success {\n  color: var(--instui-component-pill-success-text-color);\n  border-color: var(--instui-component-pill-success-border-color);\n}\n\n.pfx-pill.-color-warning {\n  color: var(--instui-component-pill-warning-text-color);\n  border-color: var(--instui-component-pill-warning-border-color);\n}\n\n.pfx-pill.-color-danger {\n  color: var(--instui-component-pill-error-text-color);\n  border-color: var(--instui-component-pill-error-border-color);\n}\n\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n  font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n",
@@ -393,14 +423,14 @@ const progress$1 = {
 	"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",
-	"canvas": "/**\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",
-	"canvasHighContrast": "/**\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"
+	"rebrand": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @remarks Sets its own `gap` between radios; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n  * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n *   legend {}\n *   .pfx-radio.-variant-toggle {\n *     input {}\n *   }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.pfx-radio-input-group > legend {\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-radio-input-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n  flex-flow: row wrap;\n  align-items: center;\n  column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n  flex-basis: 100%;\n}\n\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n   no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n   own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n   isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n  flex-flow: row wrap;\n  align-items: center;\n  gap: 0;\n}\n\n.pfx-radio-input-group.-variant-toggle > legend {\n  flex-basis: 100%;\n}\n\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n  z-index: 1;\n}\n",
+	"canvas": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @remarks Sets its own `gap` between radios; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n  * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n *   legend {}\n *   .pfx-radio.-variant-toggle {\n *     input {}\n *   }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.pfx-radio-input-group > legend {\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-radio-input-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n  flex-flow: row wrap;\n  align-items: center;\n  column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n  flex-basis: 100%;\n}\n\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n   no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n   own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n   isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n  flex-flow: row wrap;\n  align-items: center;\n  gap: 0;\n}\n\n.pfx-radio-input-group.-variant-toggle > legend {\n  flex-basis: 100%;\n}\n\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n  z-index: 1;\n}\n",
+	"canvasHighContrast": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @remarks Sets its own `gap` between radios; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n  * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n *   legend {}\n *   .pfx-radio.-variant-toggle {\n *     input {}\n *   }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.pfx-radio-input-group > legend {\n  padding: 0;\n  margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-radio-input-group.-required > legend::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n  flex-flow: row wrap;\n  align-items: center;\n  column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n  flex-basis: 100%;\n}\n\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n   no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n   own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n   isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n  flex-flow: row wrap;\n  align-items: center;\n  gap: 0;\n}\n\n.pfx-radio-input-group.-variant-toggle > legend {\n  flex-basis: 100%;\n}\n\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n  z-index: 1;\n}\n"
 }.rebrand;
 const radio$1 = {
-	"rebrand": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-radio-input-gap);\n  color: var(--instui-component-radio-input-label-base-color);\n  font-family: var(--instui-component-radio-input-font-family);\n  font-size: var(--instui-component-radio-input-font-size-md);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  line-height: var(--instui-component-radio-input-line-height-md);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-radio-input-control-size-md);\n  height: var(--instui-component-radio-input-control-size-md);\n  margin-block: var(--instui-component-radio-input-control-vertical-margin);\n  border: var(--instui-component-radio-input-border-width) solid\n    var(--instui-component-radio-input-border-color);\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-background-color);\n  cursor: pointer;\n  transition:\n    border-color 0.15s ease,\n    background-color 0.15s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n  content: \"\";\n  width: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-border-selected-color);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n  border-color: var(--instui-component-radio-input-border-hover-color);\n  background: var(--instui-component-radio-input-background-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n  border-color: var(--instui-component-radio-input-border-selected-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n  transform: scale(1);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n  border-color: var(--instui-component-radio-input-border-disabled-color);\n  background: var(--instui-component-radio-input-background-disabled-color);\n  cursor: not-allowed;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n  color: var(--instui-component-radio-input-label-disabled-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n  color: var(--instui-component-radio-input-label-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n  font-size: var(--instui-component-radio-input-font-size-lg);\n  line-height: var(--instui-component-radio-input-line-height-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-lg);\n  height: var(--instui-component-radio-input-control-size-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n  color: var(--instui-component-radio-input-label-readonly-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n  border-color: var(--instui-component-radio-input-border-readonly-color);\n  background: var(--instui-component-radio-input-background-readonly-color);\n}\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n   uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n   NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n   rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n   one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n  position: relative;\n  justify-content: center;\n  gap: 0;\n  height: var(--instui-component-radio-input-toggle-medium-height);\n  padding-inline: 0.875rem;\n  border-radius: var(--instui-component-radio-input-toggle-border-radius);\n  background: transparent;\n  color: var(--instui-component-radio-input-label-base-color);\n  font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n.pfx-radio.-variant-toggle.-context-off {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n.pfx-radio.-variant-toggle.-context-success {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n.pfx-radio.-variant-toggle.-context-danger {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n.pfx-radio.-variant-toggle.-context-warning {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n  background: var(--pantoken-rt-fill);\n  color: var(--instui-component-radio-input-toggle-handle-text);\n  box-shadow: var(--instui-elevation-depth1);\n}\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n  text-decoration: underline;\n}\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n  content: \"\";\n  position: absolute;\n  inset: -0.25rem;\n  border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n  pointer-events: none;\n}\n.pfx-radio.-variant-toggle:has(input:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.pfx-radio.-variant-toggle.-size-sm {\n  height: var(--instui-component-radio-input-toggle-small-height);\n  font-size: var(--instui-component-radio-input-toggle-small-font-size);\n  padding-inline: 0.5rem;\n}\n.pfx-radio.-variant-toggle.-size-lg {\n  height: var(--instui-component-radio-input-toggle-large-height);\n  font-size: var(--instui-component-radio-input-toggle-large-font-size);\n  padding-inline: 1rem;\n}\n",
-	"canvas": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-radio-input-gap);\n  color: var(--instui-component-radio-input-label-base-color);\n  font-family: var(--instui-component-radio-input-font-family);\n  font-size: var(--instui-component-radio-input-font-size-md);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  line-height: var(--instui-component-radio-input-line-height-md);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-radio-input-control-size-md);\n  height: var(--instui-component-radio-input-control-size-md);\n  margin-block: var(--instui-component-radio-input-control-vertical-margin);\n  border: var(--instui-component-radio-input-border-width) solid\n    var(--instui-component-radio-input-border-color);\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-background-color);\n  cursor: pointer;\n  transition:\n    border-color 0.15s ease,\n    background-color 0.15s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n  content: \"\";\n  width: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-border-selected-color);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n  border-color: var(--instui-component-radio-input-border-hover-color);\n  background: var(--instui-component-radio-input-background-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n  border-color: var(--instui-component-radio-input-border-selected-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n  transform: scale(1);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n  border-color: var(--instui-component-radio-input-border-disabled-color);\n  background: var(--instui-component-radio-input-background-disabled-color);\n  cursor: not-allowed;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n  color: var(--instui-component-radio-input-label-disabled-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n  color: var(--instui-component-radio-input-label-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n  font-size: var(--instui-component-radio-input-font-size-lg);\n  line-height: var(--instui-component-radio-input-line-height-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-lg);\n  height: var(--instui-component-radio-input-control-size-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n  color: var(--instui-component-radio-input-label-readonly-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n  border-color: var(--instui-component-radio-input-border-readonly-color);\n  background: var(--instui-component-radio-input-background-readonly-color);\n}\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n   uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n   NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n   rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n   one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n  position: relative;\n  justify-content: center;\n  gap: 0;\n  height: var(--instui-component-radio-input-toggle-medium-height);\n  padding-inline: 0.875rem;\n  border-radius: var(--instui-component-radio-input-toggle-border-radius);\n  background: transparent;\n  color: var(--instui-component-radio-input-label-base-color);\n  font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n.pfx-radio.-variant-toggle.-context-off {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n.pfx-radio.-variant-toggle.-context-success {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n.pfx-radio.-variant-toggle.-context-danger {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n.pfx-radio.-variant-toggle.-context-warning {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n  background: var(--pantoken-rt-fill);\n  color: var(--instui-component-radio-input-toggle-handle-text);\n  box-shadow: var(--instui-elevation-depth1);\n}\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n  text-decoration: underline;\n}\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n  content: \"\";\n  position: absolute;\n  inset: -0.25rem;\n  border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n  pointer-events: none;\n}\n.pfx-radio.-variant-toggle:has(input:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.pfx-radio.-variant-toggle.-size-sm {\n  height: var(--instui-component-radio-input-toggle-small-height);\n  font-size: var(--instui-component-radio-input-toggle-small-font-size);\n  padding-inline: 0.5rem;\n}\n.pfx-radio.-variant-toggle.-size-lg {\n  height: var(--instui-component-radio-input-toggle-large-height);\n  font-size: var(--instui-component-radio-input-toggle-large-font-size);\n  padding-inline: 1rem;\n}\n",
-	"canvasHighContrast": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-radio-input-gap);\n  color: var(--instui-component-radio-input-label-base-color);\n  font-family: var(--instui-component-radio-input-font-family);\n  font-size: var(--instui-component-radio-input-font-size-md);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  line-height: var(--instui-component-radio-input-line-height-md);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-radio-input-control-size-md);\n  height: var(--instui-component-radio-input-control-size-md);\n  margin-block: var(--instui-component-radio-input-control-vertical-margin);\n  border: var(--instui-component-radio-input-border-width) solid\n    var(--instui-component-radio-input-border-color);\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-background-color);\n  cursor: pointer;\n  transition:\n    border-color 0.15s ease,\n    background-color 0.15s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n  content: \"\";\n  width: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-border-selected-color);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n  border-color: var(--instui-component-radio-input-border-hover-color);\n  background: var(--instui-component-radio-input-background-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n  border-color: var(--instui-component-radio-input-border-selected-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n  transform: scale(1);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n  border-color: var(--instui-component-radio-input-border-disabled-color);\n  background: var(--instui-component-radio-input-background-disabled-color);\n  cursor: not-allowed;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n  color: var(--instui-component-radio-input-label-disabled-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n  color: var(--instui-component-radio-input-label-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n  font-size: var(--instui-component-radio-input-font-size-lg);\n  line-height: var(--instui-component-radio-input-line-height-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-lg);\n  height: var(--instui-component-radio-input-control-size-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n  color: var(--instui-component-radio-input-label-readonly-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n  border-color: var(--instui-component-radio-input-border-readonly-color);\n  background: var(--instui-component-radio-input-background-readonly-color);\n}\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n   uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n   NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n   rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n   one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n  position: relative;\n  justify-content: center;\n  gap: 0;\n  height: var(--instui-component-radio-input-toggle-medium-height);\n  padding-inline: 0.875rem;\n  border-radius: var(--instui-component-radio-input-toggle-border-radius);\n  background: transparent;\n  color: var(--instui-component-radio-input-label-base-color);\n  font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n.pfx-radio.-variant-toggle.-context-off {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n.pfx-radio.-variant-toggle.-context-success {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n.pfx-radio.-variant-toggle.-context-danger {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n.pfx-radio.-variant-toggle.-context-warning {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n  background: var(--pantoken-rt-fill);\n  color: var(--instui-component-radio-input-toggle-handle-text);\n  box-shadow: var(--instui-elevation-depth1);\n}\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n  text-decoration: underline;\n}\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n  content: \"\";\n  position: absolute;\n  inset: -0.25rem;\n  border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n  pointer-events: none;\n}\n.pfx-radio.-variant-toggle:has(input:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.pfx-radio.-variant-toggle.-size-sm {\n  height: var(--instui-component-radio-input-toggle-small-height);\n  font-size: var(--instui-component-radio-input-toggle-small-font-size);\n  padding-inline: 0.5rem;\n}\n.pfx-radio.-variant-toggle.-size-lg {\n  height: var(--instui-component-radio-input-toggle-large-height);\n  font-size: var(--instui-component-radio-input-toggle-large-font-size);\n  padding-inline: 1rem;\n}\n"
+	"rebrand": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @remarks Sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-radio-input-gap);\n  color: var(--instui-component-radio-input-label-base-color);\n  font-family: var(--instui-component-radio-input-font-family);\n  font-size: var(--instui-component-radio-input-font-size-md);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  line-height: var(--instui-component-radio-input-line-height-md);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-radio-input-control-size-md);\n  height: var(--instui-component-radio-input-control-size-md);\n  margin-block: var(--instui-component-radio-input-control-vertical-margin);\n  border: var(--instui-component-radio-input-border-width) solid\n    var(--instui-component-radio-input-border-color);\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-background-color);\n  cursor: pointer;\n  transition:\n    border-color 0.15s ease,\n    background-color 0.15s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n  content: \"\";\n  width: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-border-selected-color);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n  border-color: var(--instui-component-radio-input-border-hover-color);\n  background: var(--instui-component-radio-input-background-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n  border-color: var(--instui-component-radio-input-border-selected-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n  transform: scale(1);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n  border-color: var(--instui-component-radio-input-border-disabled-color);\n  background: var(--instui-component-radio-input-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n  color: var(--instui-component-radio-input-label-disabled-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n  color: var(--instui-component-radio-input-label-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n  font-size: var(--instui-component-radio-input-font-size-lg);\n  line-height: var(--instui-component-radio-input-line-height-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-lg);\n  height: var(--instui-component-radio-input-control-size-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n  color: var(--instui-component-radio-input-label-readonly-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n  border-color: var(--instui-component-radio-input-border-readonly-color);\n  background: var(--instui-component-radio-input-background-readonly-color);\n}\n\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n   uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n   NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n   rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n   one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n  position: relative;\n  justify-content: center;\n  gap: 0;\n  height: var(--instui-component-radio-input-toggle-medium-height);\n  padding-inline: 0.875rem;\n  border-radius: var(--instui-component-radio-input-toggle-border-radius);\n  background: transparent;\n  color: var(--instui-component-radio-input-label-base-color);\n  font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-radio.-variant-toggle.-context-off {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n\n.pfx-radio.-variant-toggle.-context-success {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-radio.-variant-toggle.-context-danger {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n\n.pfx-radio.-variant-toggle.-context-warning {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n  background: var(--pantoken-rt-fill);\n  color: var(--instui-component-radio-input-toggle-handle-text);\n  box-shadow: var(--instui-elevation-depth1);\n}\n\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n  text-decoration: underline;\n}\n\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n  content: \"\";\n  position: absolute;\n  inset: -0.25rem;\n  border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n  pointer-events: none;\n}\n\n.pfx-radio.-variant-toggle:has(input:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.pfx-radio.-variant-toggle.-size-sm {\n  height: var(--instui-component-radio-input-toggle-small-height);\n  font-size: var(--instui-component-radio-input-toggle-small-font-size);\n  padding-inline: 0.5rem;\n}\n\n.pfx-radio.-variant-toggle.-size-lg {\n  height: var(--instui-component-radio-input-toggle-large-height);\n  font-size: var(--instui-component-radio-input-toggle-large-font-size);\n  padding-inline: 1rem;\n}\n",
+	"canvas": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @remarks Sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-radio-input-gap);\n  color: var(--instui-component-radio-input-label-base-color);\n  font-family: var(--instui-component-radio-input-font-family);\n  font-size: var(--instui-component-radio-input-font-size-md);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  line-height: var(--instui-component-radio-input-line-height-md);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-radio-input-control-size-md);\n  height: var(--instui-component-radio-input-control-size-md);\n  margin-block: var(--instui-component-radio-input-control-vertical-margin);\n  border: var(--instui-component-radio-input-border-width) solid\n    var(--instui-component-radio-input-border-color);\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-background-color);\n  cursor: pointer;\n  transition:\n    border-color 0.15s ease,\n    background-color 0.15s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n  content: \"\";\n  width: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-border-selected-color);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n  border-color: var(--instui-component-radio-input-border-hover-color);\n  background: var(--instui-component-radio-input-background-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n  border-color: var(--instui-component-radio-input-border-selected-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n  transform: scale(1);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n  border-color: var(--instui-component-radio-input-border-disabled-color);\n  background: var(--instui-component-radio-input-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n  color: var(--instui-component-radio-input-label-disabled-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n  color: var(--instui-component-radio-input-label-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n  font-size: var(--instui-component-radio-input-font-size-lg);\n  line-height: var(--instui-component-radio-input-line-height-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-lg);\n  height: var(--instui-component-radio-input-control-size-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n  color: var(--instui-component-radio-input-label-readonly-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n  border-color: var(--instui-component-radio-input-border-readonly-color);\n  background: var(--instui-component-radio-input-background-readonly-color);\n}\n\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n   uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n   NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n   rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n   one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n  position: relative;\n  justify-content: center;\n  gap: 0;\n  height: var(--instui-component-radio-input-toggle-medium-height);\n  padding-inline: 0.875rem;\n  border-radius: var(--instui-component-radio-input-toggle-border-radius);\n  background: transparent;\n  color: var(--instui-component-radio-input-label-base-color);\n  font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-radio.-variant-toggle.-context-off {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n\n.pfx-radio.-variant-toggle.-context-success {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-radio.-variant-toggle.-context-danger {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n\n.pfx-radio.-variant-toggle.-context-warning {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n  background: var(--pantoken-rt-fill);\n  color: var(--instui-component-radio-input-toggle-handle-text);\n  box-shadow: var(--instui-elevation-depth1);\n}\n\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n  text-decoration: underline;\n}\n\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n  content: \"\";\n  position: absolute;\n  inset: -0.25rem;\n  border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n  pointer-events: none;\n}\n\n.pfx-radio.-variant-toggle:has(input:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.pfx-radio.-variant-toggle.-size-sm {\n  height: var(--instui-component-radio-input-toggle-small-height);\n  font-size: var(--instui-component-radio-input-toggle-small-font-size);\n  padding-inline: 0.5rem;\n}\n\n.pfx-radio.-variant-toggle.-size-lg {\n  height: var(--instui-component-radio-input-toggle-large-height);\n  font-size: var(--instui-component-radio-input-toggle-large-font-size);\n  padding-inline: 1rem;\n}\n",
+	"canvasHighContrast": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @remarks Sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-radio-input-gap);\n  color: var(--instui-component-radio-input-label-base-color);\n  font-family: var(--instui-component-radio-input-font-family);\n  font-size: var(--instui-component-radio-input-font-size-md);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  line-height: var(--instui-component-radio-input-line-height-md);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-radio-input-control-size-md);\n  height: var(--instui-component-radio-input-control-size-md);\n  margin-block: var(--instui-component-radio-input-control-vertical-margin);\n  border: var(--instui-component-radio-input-border-width) solid\n    var(--instui-component-radio-input-border-color);\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-background-color);\n  cursor: pointer;\n  transition:\n    border-color 0.15s ease,\n    background-color 0.15s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n  content: \"\";\n  width: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-md) - 2 *\n      var(--instui-component-radio-input-checked-inset-md)\n  );\n  border-radius: 50%;\n  background: var(--instui-component-radio-input-border-selected-color);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n  border-color: var(--instui-component-radio-input-border-hover-color);\n  background: var(--instui-component-radio-input-background-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n  border-color: var(--instui-component-radio-input-border-selected-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n  transform: scale(1);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n  border-color: var(--instui-component-radio-input-border-disabled-color);\n  background: var(--instui-component-radio-input-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n  color: var(--instui-component-radio-input-label-disabled-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n  color: var(--instui-component-radio-input-label-hover-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-sm) - 2 *\n      var(--instui-component-radio-input-checked-inset-sm)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n  font-size: var(--instui-component-radio-input-font-size-lg);\n  line-height: var(--instui-component-radio-input-line-height-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n  width: var(--instui-component-radio-input-control-size-lg);\n  height: var(--instui-component-radio-input-control-size-lg);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n  width: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n  height: calc(\n    var(--instui-component-radio-input-control-size-lg) - 2 *\n      var(--instui-component-radio-input-checked-inset-lg)\n  );\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n  color: var(--instui-component-radio-input-label-readonly-color);\n}\n\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n  border-color: var(--instui-component-radio-input-border-readonly-color);\n  background: var(--instui-component-radio-input-background-readonly-color);\n}\n\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n   uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n   NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n   rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n   one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n  position: relative;\n  justify-content: center;\n  gap: 0;\n  height: var(--instui-component-radio-input-toggle-medium-height);\n  padding-inline: 0.875rem;\n  border-radius: var(--instui-component-radio-input-toggle-border-radius);\n  background: transparent;\n  color: var(--instui-component-radio-input-label-base-color);\n  font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background-color 0.15s ease,\n    color 0.15s ease;\n}\n\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.pfx-radio.-variant-toggle.-context-off {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n\n.pfx-radio.-variant-toggle.-context-success {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-radio.-variant-toggle.-context-danger {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n\n.pfx-radio.-variant-toggle.-context-warning {\n  --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n  background: var(--pantoken-rt-fill);\n  color: var(--instui-component-radio-input-toggle-handle-text);\n  box-shadow: var(--instui-elevation-depth1);\n}\n\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n  text-decoration: underline;\n}\n\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n  content: \"\";\n  position: absolute;\n  inset: -0.25rem;\n  border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n  pointer-events: none;\n}\n\n.pfx-radio.-variant-toggle:has(input:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.pfx-radio.-variant-toggle.-size-sm {\n  height: var(--instui-component-radio-input-toggle-small-height);\n  font-size: var(--instui-component-radio-input-toggle-small-font-size);\n  padding-inline: 0.5rem;\n}\n\n.pfx-radio.-variant-toggle.-size-lg {\n  height: var(--instui-component-radio-input-toggle-large-height);\n  font-size: var(--instui-component-radio-input-toggle-large-font-size);\n  padding-inline: 1rem;\n}\n"
 }.rebrand;
 const rangeInput$1 = {
 	"rebrand": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n  -webkit-appearance: none;\n  appearance: none;\n  inline-size: 100%;\n  min-inline-size: var(--instui-component-range-input-min-width);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-webkit-slider-runnable-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-moz-range-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n  outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n     the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n  align-self: center;\n  margin-inline-start: 0.5rem;\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-component-range-input-value-medium-padding);\n  font-family: var(--instui-component-range-input-value-font-family);\n  font-size: var(--instui-component-range-input-value-medium-font-size);\n  font-weight: var(--instui-component-range-input-value-font-weight);\n  line-height: 1;\n}\n.pfx-range-input-value::before {\n  content: \"\";\n  position: absolute;\n  inset-inline-start: -0.375rem;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  border-block: 0.375rem solid transparent;\n  border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n  border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n  padding: var(--instui-component-range-input-value-small-padding);\n  font-size: var(--instui-component-range-input-value-small-font-size);\n  line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n  padding: var(--instui-component-range-input-value-large-padding);\n  font-size: var(--instui-component-range-input-value-large-font-size);\n  line-height: var(--instui-component-range-input-value-large-line-height);\n}\n",
@@ -408,9 +438,9 @@ const rangeInput$1 = {
 	"canvasHighContrast": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n  -webkit-appearance: none;\n  appearance: none;\n  inline-size: 100%;\n  min-inline-size: var(--instui-component-range-input-min-width);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-webkit-slider-runnable-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n/* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n.pfx-range-input::-moz-range-track {\n  block-size: 0.25rem;\n  background: var(--instui-component-range-input-track-background);\n  border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n  border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n  inline-size: var(--instui-component-range-input-handle-size);\n  block-size: var(--instui-component-range-input-handle-size);\n  background: var(--instui-component-range-input-handle-background);\n  border: var(--instui-component-range-input-handle-border-size) solid\n    var(--instui-component-range-input-handle-border-color);\n  border-radius: 50%;\n  box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n  outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n  background: var(--instui-component-range-input-handle-focus-background);\n  box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n    var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n     the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n  align-self: center;\n  margin-inline-start: 0.5rem;\n  background: var(--instui-color-background-inverse);\n  color: var(--instui-color-text-inverse);\n  border-radius: var(--instui-border-radius-md);\n  padding: var(--instui-component-range-input-value-medium-padding);\n  font-family: var(--instui-component-range-input-value-font-family);\n  font-size: var(--instui-component-range-input-value-medium-font-size);\n  font-weight: var(--instui-component-range-input-value-font-weight);\n  line-height: 1;\n}\n.pfx-range-input-value::before {\n  content: \"\";\n  position: absolute;\n  inset-inline-start: -0.375rem;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  border-block: 0.375rem solid transparent;\n  border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n  border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n  padding: var(--instui-component-range-input-value-small-padding);\n  font-size: var(--instui-component-range-input-value-small-font-size);\n  line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n  padding: var(--instui-component-range-input-value-large-padding);\n  font-size: var(--instui-component-range-input-value-large-font-size);\n  line-height: var(--instui-component-range-input-value-large-line-height);\n}\n"
 }.rebrand;
 const rating$1 = {
-	"rebrand": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n *   <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n *   <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n *   [class*=\"-icon-\"] {}\n *   .label {}\n * }\n */\n.pfx-rating {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-rating-icon-icon-margin);\n  font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n  color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n  font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n  font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n  /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n  .-icon-star-solid {\n    color: var(--instui-component-rating-icon-icon-filled-color);\n  }\n\n  /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n  :scope > .label {\n    margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n    color: var(--instui-color-text-base);\n    font-family: var(--instui-font-family-base);\n    font-size: var(--instui-font-size-text-base);\n  }\n}\n",
-	"canvas": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n *   <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n *   <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n *   [class*=\"-icon-\"] {}\n *   .label {}\n * }\n */\n.pfx-rating {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-rating-icon-icon-margin);\n  font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n  color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n  font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n  font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n  /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n  .-icon-star-solid {\n    color: var(--instui-component-rating-icon-icon-filled-color);\n  }\n\n  /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n  :scope > .label {\n    margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n    color: var(--instui-color-text-base);\n    font-family: var(--instui-font-family-base);\n    font-size: var(--instui-font-size-text-base);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n *   <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n *   <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n *   [class*=\"-icon-\"] {}\n *   .label {}\n * }\n */\n.pfx-rating {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-rating-icon-icon-margin);\n  font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n  color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n  font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n  font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n  /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n  .-icon-star-solid {\n    color: var(--instui-component-rating-icon-icon-filled-color);\n  }\n\n  /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n  :scope > .label {\n    margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n    color: var(--instui-color-text-base);\n    font-family: var(--instui-font-family-base);\n    font-size: var(--instui-font-size-text-base);\n  }\n}\n"
+	"rebrand": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @remarks Sets its own `gap` between star glyphs; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n *   <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n *   <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n *   [class*=\"-icon-\"] {}\n *   .label {}\n * }\n */\n.pfx-rating {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-rating-icon-icon-margin);\n  font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n  color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n  font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n  font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n  /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n  .-icon-star-solid {\n    color: var(--instui-component-rating-icon-icon-filled-color);\n  }\n\n  /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n  :scope > .label {\n    margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n    color: var(--instui-color-text-base);\n    font-family: var(--instui-font-family-base);\n    font-size: var(--instui-font-size-text-base);\n  }\n}\n",
+	"canvas": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @remarks Sets its own `gap` between star glyphs; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n *   <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n *   <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n *   [class*=\"-icon-\"] {}\n *   .label {}\n * }\n */\n.pfx-rating {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-rating-icon-icon-margin);\n  font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n  color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n  font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n  font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n  /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n  .-icon-star-solid {\n    color: var(--instui-component-rating-icon-icon-filled-color);\n  }\n\n  /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n  :scope > .label {\n    margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n    color: var(--instui-color-text-base);\n    font-family: var(--instui-font-family-base);\n    font-size: var(--instui-font-size-text-base);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @remarks Sets its own `gap` between star glyphs; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n *   <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n *   <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n *   [class*=\"-icon-\"] {}\n *   .label {}\n * }\n */\n.pfx-rating {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-rating-icon-icon-margin);\n  font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n  color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n  font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n  font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n  /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n  .-icon-star-solid {\n    color: var(--instui-component-rating-icon-icon-filled-color);\n  }\n\n  /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n  :scope > .label {\n    margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n    color: var(--instui-color-text-base);\n    font-family: var(--instui-font-family-base);\n    font-size: var(--instui-font-size-text-base);\n  }\n}\n"
 }.rebrand;
 const select = {
 	"rebrand": "/* Experimental: CSS Customizable Select (`appearance: base-select`, Chrome 135+, not yet Baseline).\n   Enhances .pfx-simple-select; degrades to the plain control where unsupported. */\n@supports (appearance: base-select) {\n  .pfx-simple-select,\n  .pfx-simple-select::picker(select) {\n    appearance: base-select;\n  }\n  /* Keep simple-select's own background-image caret; hide the UA-generated picker icon. */\n  .pfx-simple-select::picker-icon {\n    display: none;\n  }\n  .pfx-simple-select::picker(select) {\n    border: var(--instui-component-select-popover-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-border-radius-lg);\n    box-shadow: var(--instui-elevation-topmost);\n    background-color: var(--instui-component-options-item-background);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n  }\n  .pfx-simple-select option {\n    padding: var(--instui-component-options-item-padding-vertical)\n      var(--instui-component-options-item-padding-horizontal);\n    background-color: var(--instui-component-options-item-background);\n    color: var(--instui-component-options-item-color);\n    font-family: var(--instui-component-options-item-font-family);\n    font-weight: var(--instui-component-options-item-font-weight);\n    font-size: var(--instui-component-options-item-font-size);\n    line-height: var(--instui-component-options-item-line-height);\n    cursor: pointer;\n  }\n  /* Hide the UA checkmark; the selected row gets our own trailing check via background-image. */\n  .pfx-simple-select option::checkmark {\n    display: none;\n  }\n  .pfx-simple-select option:hover,\n  .pfx-simple-select option:focus {\n    background-color: var(--instui-component-options-item-highlighted-background);\n    color: var(--instui-component-options-item-highlighted-label-color);\n    outline: none;\n  }\n  .pfx-simple-select option:checked {\n    background-color: var(--instui-component-options-item-selected-background);\n    color: var(--instui-component-options-item-selected-label-color);\n    font-weight: var(--instui-component-options-item-font-weight-selected);\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right var(--instui-component-options-item-padding-horizontal) center;\n    background-size: 1rem 1rem;\n    padding-inline-end: calc(var(--instui-component-options-item-padding-horizontal) + 1.5rem);\n  }\n}\n",
@@ -418,9 +448,9 @@ const select = {
 	"canvasHighContrast": "/* Experimental: CSS Customizable Select (`appearance: base-select`, Chrome 135+, not yet Baseline).\n   Enhances .pfx-simple-select; degrades to the plain control where unsupported. */\n@supports (appearance: base-select) {\n  .pfx-simple-select,\n  .pfx-simple-select::picker(select) {\n    appearance: base-select;\n  }\n  /* Keep simple-select's own background-image caret; hide the UA-generated picker icon. */\n  .pfx-simple-select::picker-icon {\n    display: none;\n  }\n  .pfx-simple-select::picker(select) {\n    border: var(--instui-component-select-popover-border-width) solid\n      var(--instui-component-text-input-border-color);\n    border-radius: var(--instui-border-radius-lg);\n    box-shadow: var(--instui-elevation-topmost);\n    background-color: var(--instui-component-options-item-background);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n  }\n  .pfx-simple-select option {\n    padding: var(--instui-component-options-item-padding-vertical)\n      var(--instui-component-options-item-padding-horizontal);\n    background-color: var(--instui-component-options-item-background);\n    color: var(--instui-component-options-item-color);\n    font-family: var(--instui-component-options-item-font-family);\n    font-weight: var(--instui-component-options-item-font-weight);\n    font-size: var(--instui-component-options-item-font-size);\n    line-height: var(--instui-component-options-item-line-height);\n    cursor: pointer;\n  }\n  /* Hide the UA checkmark; the selected row gets our own trailing check via background-image. */\n  .pfx-simple-select option::checkmark {\n    display: none;\n  }\n  .pfx-simple-select option:hover,\n  .pfx-simple-select option:focus {\n    background-color: var(--instui-component-options-item-highlighted-background);\n    color: var(--instui-component-options-item-highlighted-label-color);\n    outline: none;\n  }\n  .pfx-simple-select option:checked {\n    background-color: var(--instui-component-options-item-selected-background);\n    color: var(--instui-component-options-item-selected-label-color);\n    font-weight: var(--instui-component-options-item-font-weight-selected);\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right var(--instui-component-options-item-padding-horizontal) center;\n    background-size: 1rem 1rem;\n    padding-inline-end: calc(var(--instui-component-options-item-padding-horizontal) + 1.5rem);\n  }\n}\n"
 }.rebrand;
 const sideNavBar$1 = {
-	"rebrand": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @modifier -minimized — Collapse to icons only (labels hidden).\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .item — A navigation entry; `-selected` marks the active one.\n * @part .label — An item's text label; hidden when the rail is minimized.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n * @structure\n * .pfx-side-nav-bar {\n *   .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n@scope (.pfx-side-nav-bar) {\n  :scope > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n",
-	"canvas": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @modifier -minimized — Collapse to icons only (labels hidden).\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .item — A navigation entry; `-selected` marks the active one.\n * @part .label — An item's text label; hidden when the rail is minimized.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n * @structure\n * .pfx-side-nav-bar {\n *   .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n@scope (.pfx-side-nav-bar) {\n  :scope > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n",
-	"canvasHighContrast": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @modifier -minimized — Collapse to icons only (labels hidden).\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .item — A navigation entry; `-selected` marks the active one.\n * @part .label — An item's text label; hidden when the rail is minimized.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n * @structure\n * .pfx-side-nav-bar {\n *   .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n@scope (.pfx-side-nav-bar) {\n  :scope > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n"
+	"rebrand": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @remarks Sets its own `gap` between nav items and its own `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -minimized — Collapse to icons only (labels hidden).\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .item — A navigation entry; `-selected` marks the active one.\n * @part .label — An item's text label; hidden when the rail is minimized.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n * @structure\n * .pfx-side-nav-bar {\n *   .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n@scope (.pfx-side-nav-bar) {\n  :scope > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n",
+	"canvas": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @remarks Sets its own `gap` between nav items and its own `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -minimized — Collapse to icons only (labels hidden).\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .item — A navigation entry; `-selected` marks the active one.\n * @part .label — An item's text label; hidden when the rail is minimized.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n * @structure\n * .pfx-side-nav-bar {\n *   .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n@scope (.pfx-side-nav-bar) {\n  :scope > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n",
+	"canvasHighContrast": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @remarks Sets its own `gap` between nav items and its own `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.\n * @modifier -minimized — Collapse to icons only (labels hidden).\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .item — A navigation entry; `-selected` marks the active one.\n * @part .label — An item's text label; hidden when the rail is minimized.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n *   <a class=\"item -selected\" href=\"#\">\n *     <span class=\"pfx-icon -icon-house\"></span>\n *     <span class=\"label\">Home</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-inbox\"></span>\n *     <span class=\"label\">Inbox</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-calendar\"></span>\n *     <span class=\"label\">Calendar</span>\n *   </a>\n *   <a class=\"item\" href=\"#\">\n *     <span class=\"pfx-icon -icon-settings\"></span>\n *     <span class=\"label\">Settings</span>\n *   </a>\n * </nav>\n * @structure\n * .pfx-side-nav-bar {\n *   .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n.pfx-side-nav-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--instui-component-side-nav-bar-content-gap);\n  padding: var(--instui-component-side-nav-bar-content-margin);\n  box-sizing: border-box;\n  inline-size: fit-content;\n  /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n  block-size: 100%;\n  min-block-size: 100%;\n  background: var(--instui-component-side-nav-bar-background-color);\n  color: var(--instui-component-side-nav-bar-font-color);\n  font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n@scope (.pfx-side-nav-bar) {\n  :scope > .item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--instui-spacing-space2xs);\n    padding: var(--instui-component-side-nav-bar-item-content-padding);\n    min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n    color: var(--instui-component-side-nav-bar-item-font-color);\n    background: var(--instui-component-side-nav-bar-item-background-color);\n    border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n    font-size: var(--instui-component-side-nav-bar-item-font-size);\n    font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n    line-height: var(--instui-component-side-nav-bar-item-line-height);\n    text-align: center;\n    text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n    cursor: pointer;\n  }\n\n  :scope > .item [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n\n  :scope > .item:hover {\n    background: var(--instui-component-side-nav-bar-item-hover-background-color);\n  }\n\n  :scope > .item.-selected {\n    background: var(--instui-component-side-nav-bar-item-selected-background-color);\n    color: var(--instui-component-side-nav-bar-item-selected-font-color);\n  }\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n  inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n  display: none;\n}\n"
 }.rebrand;
 const spinner$1 = {
 	"rebrand": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n *   <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.pfx-spinner {\n  display: inline-block;\n  width: var(--instui-component-spinner-spinner-size-md);\n  height: var(--instui-component-spinner-spinner-size-md);\n  border: var(--instui-component-spinner-stroke-width-md) solid\n    var(--instui-component-spinner-track-color);\n  border-top-color: var(--instui-component-spinner-color);\n  border-radius: 50%;\n  animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n\n.pfx-spinner.-size-xs {\n  width: var(--instui-component-spinner-spinner-size-xs);\n  height: var(--instui-component-spinner-spinner-size-xs);\n  border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n  width: var(--instui-component-spinner-spinner-size-sm);\n  height: var(--instui-component-spinner-spinner-size-sm);\n  border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n  width: var(--instui-component-spinner-spinner-size-lg);\n  height: var(--instui-component-spinner-spinner-size-lg);\n  border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n\n.pfx-spinner.-color-inverse {\n  border-top-color: var(--instui-component-spinner-inverse-color);\n}\n",
@@ -438,9 +468,9 @@ const tabs$1 = {
 	"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",
-	"canvas": "/**\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",
-	"canvasHighContrast": "/**\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"
+	"rebrand": "/**\n * @component tag\n * @summary An inline chip for a keyword or filter.\n * @remarks Sets its own horizontal `padding` (`-size-sm`/`-size-lg` scale it); chaining a `-p-*`/`-padding-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n.pfx-tag {\n  display: inline-flex;\n  align-items: center;\n  height: var(--instui-component-tag-height-medium);\n  max-width: var(--instui-component-tag-max-width);\n  padding: 0 var(--instui-component-tag-padding-horizontal);\n  background: var(--instui-component-tag-default-background);\n  color: var(--instui-component-tag-default-color);\n  border: var(--instui-component-tag-default-border-width)\n    var(--instui-component-tag-default-border-style)\n    var(--instui-component-tag-default-border-color);\n  border-radius: var(--instui-component-tag-default-border-radius);\n  font-family: var(--instui-component-tag-font-family);\n  font-size: var(--instui-component-tag-font-size-medium);\n}\n\n.pfx-tag:hover {\n  background: var(--instui-component-tag-default-background-hover);\n}\n\n.pfx-tag.-size-sm {\n  height: var(--instui-component-tag-height-small);\n  padding: 0 var(--instui-component-tag-padding-horizontal-small);\n  font-size: var(--instui-component-tag-font-size-small);\n}\n\n.pfx-tag.-size-lg {\n  height: var(--instui-component-tag-height-large);\n  font-size: var(--instui-component-tag-font-size-large);\n}\n\n.pfx-tag.-inline {\n  gap: var(--instui-spacing-space-xs);\n  background: var(--instui-component-tag-inline-background);\n  color: var(--instui-component-tag-inline-color);\n  border-color: var(--instui-component-tag-inline-border-color);\n  border-radius: var(--instui-component-tag-inline-border-radius);\n  cursor: pointer;\n}\n\n.pfx-tag.-inline:hover {\n  background: var(--instui-component-tag-inline-background-hover);\n}\n\n.pfx-tag.-inline::after {\n  content: \"\";\n  flex: none;\n  width: 1em;\n  height: 1em;\n  background: var(--instui-component-tag-inline-icon-color);\n  -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n  mask: var(--instui-icon-x) center / contain no-repeat;\n}\n\n.pfx-tag.-inline:hover::after {\n  background: var(--instui-component-tag-inline-icon-hover-color);\n}\n\n/* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n.pfx-tag.-readonly {\n  cursor: default;\n  background: var(--instui-component-tag-default-background);\n}\n\n.pfx-tag.-readonly.-inline::after {\n  display: none;\n}\n",
+	"canvas": "/**\n * @component tag\n * @summary An inline chip for a keyword or filter.\n * @remarks Sets its own horizontal `padding` (`-size-sm`/`-size-lg` scale it); chaining a `-p-*`/`-padding-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n.pfx-tag {\n  display: inline-flex;\n  align-items: center;\n  height: var(--instui-component-tag-height-medium);\n  max-width: var(--instui-component-tag-max-width);\n  padding: 0 var(--instui-component-tag-padding-horizontal);\n  background: var(--instui-component-tag-default-background);\n  color: var(--instui-component-tag-default-color);\n  border: var(--instui-component-tag-default-border-width)\n    var(--instui-component-tag-default-border-style)\n    var(--instui-component-tag-default-border-color);\n  border-radius: var(--instui-component-tag-default-border-radius);\n  font-family: var(--instui-component-tag-font-family);\n  font-size: var(--instui-component-tag-font-size-medium);\n}\n\n.pfx-tag:hover {\n  background: var(--instui-component-tag-default-background-hover);\n}\n\n.pfx-tag.-size-sm {\n  height: var(--instui-component-tag-height-small);\n  padding: 0 var(--instui-component-tag-padding-horizontal-small);\n  font-size: var(--instui-component-tag-font-size-small);\n}\n\n.pfx-tag.-size-lg {\n  height: var(--instui-component-tag-height-large);\n  font-size: var(--instui-component-tag-font-size-large);\n}\n\n.pfx-tag.-inline {\n  gap: var(--instui-spacing-space-xs);\n  background: var(--instui-component-tag-inline-background);\n  color: var(--instui-component-tag-inline-color);\n  border-color: var(--instui-component-tag-inline-border-color);\n  border-radius: var(--instui-component-tag-inline-border-radius);\n  cursor: pointer;\n}\n\n.pfx-tag.-inline:hover {\n  background: var(--instui-component-tag-inline-background-hover);\n}\n\n.pfx-tag.-inline::after {\n  content: \"\";\n  flex: none;\n  width: 1em;\n  height: 1em;\n  background: var(--instui-component-tag-inline-icon-color);\n  -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n  mask: var(--instui-icon-x) center / contain no-repeat;\n}\n\n.pfx-tag.-inline:hover::after {\n  background: var(--instui-component-tag-inline-icon-hover-color);\n}\n\n/* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n.pfx-tag.-readonly {\n  cursor: default;\n  background: var(--instui-component-tag-default-background);\n}\n\n.pfx-tag.-readonly.-inline::after {\n  display: none;\n}\n",
+	"canvasHighContrast": "/**\n * @component tag\n * @summary An inline chip for a keyword or filter.\n * @remarks Sets its own horizontal `padding` (`-size-sm`/`-size-lg` scale it); chaining a `-p-*`/`-padding-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n.pfx-tag {\n  display: inline-flex;\n  align-items: center;\n  height: var(--instui-component-tag-height-medium);\n  max-width: var(--instui-component-tag-max-width);\n  padding: 0 var(--instui-component-tag-padding-horizontal);\n  background: var(--instui-component-tag-default-background);\n  color: var(--instui-component-tag-default-color);\n  border: var(--instui-component-tag-default-border-width)\n    var(--instui-component-tag-default-border-style)\n    var(--instui-component-tag-default-border-color);\n  border-radius: var(--instui-component-tag-default-border-radius);\n  font-family: var(--instui-component-tag-font-family);\n  font-size: var(--instui-component-tag-font-size-medium);\n}\n\n.pfx-tag:hover {\n  background: var(--instui-component-tag-default-background-hover);\n}\n\n.pfx-tag.-size-sm {\n  height: var(--instui-component-tag-height-small);\n  padding: 0 var(--instui-component-tag-padding-horizontal-small);\n  font-size: var(--instui-component-tag-font-size-small);\n}\n\n.pfx-tag.-size-lg {\n  height: var(--instui-component-tag-height-large);\n  font-size: var(--instui-component-tag-font-size-large);\n}\n\n.pfx-tag.-inline {\n  gap: var(--instui-spacing-space-xs);\n  background: var(--instui-component-tag-inline-background);\n  color: var(--instui-component-tag-inline-color);\n  border-color: var(--instui-component-tag-inline-border-color);\n  border-radius: var(--instui-component-tag-inline-border-radius);\n  cursor: pointer;\n}\n\n.pfx-tag.-inline:hover {\n  background: var(--instui-component-tag-inline-background-hover);\n}\n\n.pfx-tag.-inline::after {\n  content: \"\";\n  flex: none;\n  width: 1em;\n  height: 1em;\n  background: var(--instui-component-tag-inline-icon-color);\n  -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n  mask: var(--instui-icon-x) center / contain no-repeat;\n}\n\n.pfx-tag.-inline:hover::after {\n  background: var(--instui-component-tag-inline-icon-hover-color);\n}\n\n/* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n.pfx-tag.-readonly {\n  cursor: default;\n  background: var(--instui-component-tag-default-background);\n}\n\n.pfx-tag.-readonly.-inline::after {\n  display: none;\n}\n"
 }.rebrand;
 const text$1 = {
 	"rebrand": "/**\n * @component text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — AI-accent text colour.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * <span class=\"pfx-text -size-xs\">x-small text</span>\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n */\n.pfx-text {\n  font-family: var(--instui-component-text-content-font-family);\n  color: var(--instui-component-text-base-color);\n  font-size: var(--instui-component-text-font-size-medium);\n  font-weight: var(--instui-component-text-font-weight-normal);\n  line-height: var(--instui-component-text-content-line-height);\n}\n.pfx-text.-size-xs {\n  font-size: var(--instui-component-text-font-size-x-small);\n}\n.pfx-text.-size-sm {\n  font-size: var(--instui-component-text-font-size-small);\n}\n.pfx-text.-size-lg {\n  font-size: var(--instui-component-text-font-size-large);\n}\n.pfx-text.-size-xl {\n  font-size: var(--instui-component-text-font-size-x-large);\n}\n.pfx-text.-weight-bold {\n  font-weight: var(--instui-component-text-font-weight-bold);\n}\n.pfx-text.-style-italic {\n  font-style: italic;\n}\n.pfx-text.-color-secondary {\n  color: var(--instui-component-text-muted-color);\n}\n.pfx-text.-color-brand {\n  color: var(--instui-component-text-primary-color);\n}\n.pfx-text.-color-success {\n  color: var(--instui-component-text-success-color);\n}\n.pfx-text.-color-danger {\n  color: var(--instui-component-text-error-color);\n}\n.pfx-text.-color-warning {\n  color: var(--instui-component-text-warning-color);\n}\n.pfx-text.-color-primary-inverse {\n  color: var(--instui-component-text-inverse-color);\n}\n.pfx-text.-color-ai {\n  color: var(--instui-component-text-ai-color);\n  background: var(--instui-component-text-ai-background-color);\n}\n.pfx-text.-variant-description-page {\n  font-size: var(--instui-component-text-description-page-font-size);\n  line-height: var(--instui-component-text-description-page-line-height);\n}\n.pfx-text.-variant-description-section {\n  font-size: var(--instui-component-text-description-section-font-size);\n  line-height: var(--instui-component-text-description-section-line-height);\n}\n.pfx-text.-variant-content-small {\n  font-size: var(--instui-component-text-content-small-font-size);\n  line-height: var(--instui-component-text-content-small-line-height);\n}\n.pfx-text.-variant-legend {\n  font-size: var(--instui-component-text-legend-font-size);\n  line-height: var(--instui-component-text-legend-line-height);\n}\n.pfx-text.-transform-uppercase {\n  text-transform: uppercase;\n}\n.pfx-text.-transform-lowercase {\n  text-transform: lowercase;\n}\n.pfx-text.-transform-capitalize {\n  text-transform: capitalize;\n}\n",
@@ -592,7 +622,7 @@ const button = defineComponent({
 /**
  * @component button
  * @summary An accessible action control, styled from the token palette; primary by default.
- * @remarks The AI variants layer two gradients — a padding-box fill and a border-box stroke — for their frame, and \`-color-ai-secondary\` can't paint gradient text and a fill at once, so its centre stays transparent at rest and fills on hover or active. Ghost hover and active derive a low-opacity, slightly-darkened brand wash rather than using the raw hover-background tokens, which would print same-colour-on-same-colour text.
+ * @remarks The AI variants layer two gradients — a padding-box fill and a border-box stroke — for their frame, and \`-color-ai-secondary\` can't paint gradient text and a fill at once, so its centre stays transparent at rest and fills on hover or active. Ghost hover and active derive a low-opacity, slightly-darkened brand wash rather than using the raw hover-background tokens, which would print same-colour-on-same-colour text. Also sets its own icon/label \`gap\` and horizontal \`padding\`; chaining a \`-gap-*\`/\`-p-*\`/\`-padding-*\` spacing utility modifier overrides those built-in values.
  * @modifier -color-secondary — A lower-emphasis secondary action.
  * @modifier -color-tertiary — A text-style action (no fill or border until hover).
  * @modifier -color-danger — A destructive action.
@@ -2014,8 +2044,16 @@ function selectCss(options = {}) {
 	const prefix = options.prefix || "";
 	return wrap("select", prefix, select.replaceAll(SENTINEL, ns(prefix)));
 }
-/** The View utility as a standalone, header-wrapped stylesheet. */
-const viewCss = defineUtility({
+//#endregion
+//#region src/utilities/view.ts
+/**
+* The View primitive utility — InstUI's `View` as a neutral box with key-value modifiers for its
+* visual props (background, border, radius, shadow, display, position, overflow, cursor).
+*
+* @module
+*/
+/** The View utility — a neutral box with key-value modifiers for its visual props (background, border, radius, shadow, display, position, overflow, cursor). */
+const view = defineUtility({
 	name: "view",
 	css: (p) => {
 		const rule = (mod, decls) => `.${p}view.-${mod} { ${decls} }`;
@@ -2156,47 +2194,119 @@ const viewCss = defineUtility({
  */
 ${rules.join("\n")}`;
 	}
-}).css;
+});
+/** The View utility as a standalone, header-wrapped stylesheet. */
+const viewCss = view.css;
 //#endregion
 //#region src/utilities/spacing.ts
 /**
-* The spacing utilities — margin/padding classes on the pantoken spacing scale, with logical sides.
+* The spacing utilities — margin/padding classes on the pantoken spacing scale, with logical sides,
+* each in a short spelling (`-mb-sm`) and a fully long, word-spelled one (`-margin-bottom-small`).
 *
 * @module
 */
-const COMPONENT_CLASS_NAMES = COMPONENTS.filter((entry) => entry.kind === "component").map((entry) => entry.name);
+/** Every component base class, plus `view` — the chainable bases a spacing modifier can attach to. */
+const SPACING_ALIAS_TARGETS = [...COMPONENTS.filter((entry) => entry.kind === "component").map((entry) => entry.name), view.name];
+/** The steps a boxed property takes — margin also gets `auto`. */
+const stepsFor = (property) => property.css === "margin" ? [...SPACING_STEPS$1, SPACING_AUTO_STEP$1] : SPACING_STEPS$1;
+/**
+* `[key, value]` pairs for the short/legacy loop below: one per step's short key, plus a `none` twin
+* for the zero step (both `-m-0` and `-m-none` have shipped since before the long spelling existed).
+*/
+const legacyStepEntries = (steps) => steps.flatMap((step) => step.short === "0" ? [[step.short, step.value], [step.long, step.value]] : [[step.short, step.value]]);
+const selectorsFor = (p, modifier) => SPACING_ALIAS_TARGETS.map((name) => `.${p}${name}.${modifier}`);
+/**
+* Short spellings (`-m-sm`) and the legacy long-property-word twin (`-margin-sm`) — concatenated
+* side, short step. Unchanged shape from before the long spelling existed.
+*/
+function shortAndLegacyRules(p) {
+	const rules = [];
+	for (const property of SPACING_PROPERTIES) {
+		const stepEntries = legacyStepEntries(stepsFor(property));
+		for (const letter of [property.short, property.long]) for (const side of SPACING_SIDES) for (const [step, value] of stepEntries) {
+			const modifier = `-${letter}${side.short}-${step}`;
+			const selectors = [`.${p}${letter}${side.short}-${step}`, ...selectorsFor(p, modifier)];
+			rules.push(`${selectors.join(", ")} { ${property.css}${side.suffix}: ${value}; }`);
+		}
+	}
+	return rules;
+}
+/**
+* Fully long, dash-separated spellings — property word, side word, and step word all spelled out
+* (`-margin-bottom-small`). A handful of these collide with a "no side" legacy long selector above
+* (e.g. `-margin-none`, `-margin-auto`) — harmless duplicate rules, not worth special-casing.
+*/
+function fullyLongRules(p) {
+	const rules = [];
+	for (const property of SPACING_PROPERTIES) for (const side of SPACING_SIDES) for (const step of stepsFor(property)) {
+		const sidePart = side.long ? `${side.long}-` : "";
+		const name = `${property.long}-${sidePart}${step.long}`;
+		const modifier = `-${name}`;
+		const selectors = [`.${p}${name}`, ...selectorsFor(p, modifier)];
+		rules.push(`${selectors.join(", ")} { ${property.css}${side.suffix}: ${step.value}; }`);
+	}
+	return rules;
+}
 /** The spacing utilities as a standalone, header-wrapped stylesheet. */
 const spacingUtilitiesCss = defineUtility({
 	name: "spacing",
 	css: (p) => {
-		const rules = [];
-		const componentAliases = (modifier) => COMPONENT_CLASS_NAMES.map((name) => `.${p}${name}.${modifier}`);
-		for (const [prop, letters, steps] of [[
-			"margin",
-			["m", "margin"],
-			{
-				...SPACING_STEPS,
-				auto: "auto"
-			}
-		], [
-			"padding",
-			["p", "padding"],
-			SPACING_STEPS
-		]]) for (const letter of letters) for (const [side, suffix] of Object.entries(SPACING_SIDES)) for (const [step, value] of Object.entries(steps)) {
-			const modifier = `-${letter}${side}-${step}`;
-			const selectors = [`.${p}${letter}${side}-${step}`, ...componentAliases(modifier)];
-			rules.push(`${selectors.join(", ")} { ${prop}${suffix}: ${value}; }`);
-		}
+		const rules = [...shortAndLegacyRules(p), ...fullyLongRules(p)];
 		return css`/**
  * @utility spacing
  * @class .instui-p-md
- * @summary Margin and padding utilities — \`.instui-m<side>-<step>\` and \`.instui-p<side>-<step>\` on the spacing scale (sides \`t\`/\`b\`/\`s\`/\`e\`/\`x\`/\`y\` or none; margin also takes \`auto\`). Every utility also has a component-attached alias modifier (for example \`-mb-sm\` on any \`.instui-<component>\`).
+ * @global
+ * @summary Margin and padding utilities — \`.instui-m<side>-<step>\` / \`.instui-margin-<side>-<step>\` and \`.instui-p<side>-<step>\` / \`.instui-padding-<side>-<step>\` on the spacing scale (sides \`t\`/\`b\`/\`s\`/\`e\`/\`x\`/\`y\` or none, spelled short or fully long — for example \`-mb-sm\` and \`-margin-bottom-small\` are the same rule; margin also takes \`auto\`). Every utility also has a component-attached alias modifier (for example \`-mb-sm\` on any \`.instui-<component>\` or \`.instui-view\`).
+ * @demo self:spacing
  * @example
  * <div class="instui-p-md instui-mt-lg">Padded box with a large top margin.</div>
  */
 ${rules.join("\n")}`;
 	}
 }).css;
+//#endregion
+//#region src/utilities/gap.ts
+/**
+* The gap utility — `gap` classes on the pantoken spacing scale, short (`-gap-sm`) and long
+* (`-gap-small`) spellings of the same rule.
+*
+* @module
+*/
+/** `[key, value]` pairs for every step's short and long key, deduped (e.g. `"0"` and `"none"` both present). */
+const STEP_ENTRIES = (() => {
+	const map = /* @__PURE__ */ new Map();
+	for (const step of SPACING_STEPS$1) {
+		map.set(step.short, step.value);
+		map.set(step.long, step.value);
+	}
+	return [...map];
+})();
+/** The gap utility as a standalone, header-wrapped stylesheet. */
+const gapCss = defineUtility({
+	name: "gap",
+	css: (p) => {
+		const rules = [];
+		const componentAliases = (modifier) => SPACING_ALIAS_TARGETS.map((name) => `.${p}${name}.${modifier}`);
+		for (const [step, value] of STEP_ENTRIES) {
+			const modifier = `-gap-${step}`;
+			const selectors = [`.${p}gap-${step}`, ...componentAliases(modifier)];
+			rules.push(`${selectors.join(", ")} { gap: ${value}; }`);
+		}
+		return css`/**
+ * @utility gap
+ * @class .instui-gap-md
+ * @global
+ * @summary Flex/grid \`gap\` utilities on the spacing scale, short (\`-gap-sm\`) or long (\`-gap-small\`) spelling. Every utility also has a component-attached alias modifier (for example \`-gap-sm\` on any \`.instui-<component>\` or \`.instui-view\`) — components that already set their own \`gap\` from a component-specific token may have it overridden by this alias.
+ * @demo self:gap
+ * @example
+ * <div class="instui-display-flex instui-gap-sm">
+ *   <span>One</span>
+ *   <span>Two</span>
+ * </div>
+ */
+${rules.join("\n")}`;
+	}
+}).css;
 /** The layout utilities as a standalone, header-wrapped stylesheet. */
 const layoutUtilitiesCss = defineUtility({
 	name: "layout",
@@ -2308,7 +2418,7 @@ function iconGlyphsCss(names, options = {}) {
 *   (`<button class="instui-button">`), for the InstUI look outside a component framework. The
 *   `--instui-elevation-*` shadow scale ({@link elevationCss}) leads this sheet, since enough
 *   components float that shadows are an intrinsic design attribute rather than an add-on.
-* - **Utilities** ({@link viewCss}, {@link spacingUtilitiesCss}, {@link layoutUtilitiesCss}, plus a
+* - **Utilities** ({@link viewCss}, {@link spacingUtilitiesCss}, {@link gapCss}, {@link layoutUtilitiesCss}, plus a
 *   curated semantic-colour/token set) — an opt-in layer of cross-cutting classes. The generic
 *   token→class emitters (`colorUtilitiesCss`, `tokenUtilitiesCss`) live in `@pantoken/utils`; this
 *   package feeds them the curated *semantic* names, while `@pantoken/plugin-primitives` feeds the raw
@@ -2356,4 +2466,4 @@ function componentsCss(options = {}) {
 	return `/* InstUI component styles (@pantoken/components) — prefix: ${prefix} */\n${COMPONENTS.map((d) => d.rules(ns(prefix), options).trim()).join("\n\n")}\n`;
 }
 //#endregion
-export { DEFAULT_PREFIX, ELEVATION_NAMES, FOCUSABLE_SELECTOR, alertCss, avatarCss, badgeCss, baseCss, billboardCss, breadcrumbCss, buttonCss, bylineCss, calendarCss, checkboxCss, closeButtonCss, componentsCss, contextViewCss, elevationCss, elevationDeclarations, fileDropCss, focusOutlineCss, focusOutlineDeclarations, focusOutlineRules, formFieldCss, formFieldGroupCss, formFieldMessagesCss, headingCss, iconCss, iconGlyphsCss, imgCss, inPlaceEditCss, inputGroupCss, layoutUtilitiesCss, linkCss, listCss, maskCss, menuCss, metricCss, modalCss, numberInputCss, paginationCss, pillCss, popoverCss, progressCircleCss, progressCss, proseCss, radioCss, radioInputGroupCss, rangeInputCss, ratingCss, responsiveUtilitiesCss, screenReaderContentCss, selectCss, sideNavBarCss, simpleSelectCss, spacingUtilitiesCss, spinnerCss, tableCss, tabsCss, tagCss, textAreaCss, textCss, textInputCss, toggleDetailsCss, toggleGroupCss, tooltipCss, trayCss, treeBrowserCss, truncateCss, viewCss };
+export { DEFAULT_PREFIX, ELEVATION_NAMES, FOCUSABLE_SELECTOR, alertCss, avatarCss, badgeCss, baseCss, billboardCss, breadcrumbCss, buttonCss, bylineCss, calendarCss, checkboxCss, closeButtonCss, componentsCss, contextViewCss, elevationCss, elevationDeclarations, fileDropCss, focusOutlineCss, focusOutlineDeclarations, focusOutlineRules, formFieldCss, formFieldGroupCss, formFieldMessagesCss, gapCss, headingCss, iconCss, iconGlyphsCss, imgCss, inPlaceEditCss, inputGroupCss, layoutUtilitiesCss, linkCss, listCss, maskCss, menuCss, metricCss, modalCss, numberInputCss, paginationCss, pillCss, popoverCss, progressCircleCss, progressCss, proseCss, radioCss, radioInputGroupCss, rangeInputCss, ratingCss, responsiveUtilitiesCss, screenReaderContentCss, selectCss, sideNavBarCss, simpleSelectCss, spacingUtilitiesCss, spinnerCss, tableCss, tabsCss, tagCss, textAreaCss, textCss, textInputCss, toggleDetailsCss, toggleGroupCss, tooltipCss, trayCss, treeBrowserCss, truncateCss, viewCss };