@pantoken/components 1.0.1 → 1.0.3

package/dist/index.mjs

@@ -307,9 +307,9 @@ const badge$1 = {
 	"canvasHighContrast": "/**\n * @component badge\n * @selector .pfx-badge\n * @summary A small count or status dot placed over a target's corner.\n * @modifier -color-success — A positive/complete count.\n * @modifier -color-danger — An attention/error count.\n * @modifier -color-inverse — On-dark: a light chip with dark text.\n * @modifier -type-notification — A dot only, no count.\n * @modifier -pulse — A pulsing attention ring.\n * @modifier -standalone — Render inline, not positioned over a target's corner.\n * @modifier -placement-top-start — Position at the top-start corner.\n * @modifier -placement-top-end — Position at the top-end corner.\n * @modifier -placement-bottom-start — Position at the bottom-start corner.\n * @modifier -placement-bottom-end — Position at the bottom-end corner.\n * @modifier -placement-start-center — Position centred on the start edge.\n * @modifier -placement-end-center — Position centred on the end edge.\n * @pseudo ::before — The pulsing attention ring drawn in the badge's accent colour (the `-pulse` variant).\n * @cssproperty --pantoken-badge-accent <color> — The chip fill; each `-color-*` variant and the pulse ring read from it.\n * @cssproperty --pantoken-badge-text <color> — The text colour, paired to the accent so it stays legible.\n * @remarks To place a badge over a target, wrap both in a `.pfx-badge-wrapper` (the position anchor) and pin the badge with a `-placement-*` modifier.\n * @animation pantoken-badge-pulse — The pulse ring animation.\n * @example\n * ```html\n * <span class=\"pfx-badge-wrapper\">\n *   <button class=\"pfx-button\">Inbox</button>\n *   <span class=\"pfx-badge -placement-top-end\">4</span>\n * </span>\n * ```\n * @wrapper pfx-badge-wrapper\n * @structure\n * The badge renders inline on its own, or inside an optional `pfx-badge-wrapper` that anchors it over a target.\n * .pfx-badge-wrapper:opt {\n *   slot {}\n *   .pfx-badge {}\n * }\n * @related pill — The inline label-chip counterpart.\n * @demo self:badge\n */\n@keyframes pantoken-badge-pulse {\n  from {\n    transform: scale(1);\n    opacity: 0.7;\n  }\n\n  to {\n    transform: scale(1.8);\n    opacity: 0;\n  }\n}\n\n/* Wrap a target in this so a placed badge can sit over its corner. It contains the badge (rather than\n   being contained by it), so it's a flat prefixed class, not a scoped element. */\n.pfx-badge-wrapper {\n  position: relative;\n  display: inline-flex;\n}\n\n@scope (.pfx-badge) {\n  :scope {\n    --pantoken-badge-accent: var(--instui-component-badge-color-primary);\n    /* The primary fill is the brand colour, which flips dark→light between light and dark mode; pair the\n       text so it stays legible either way (white on the light-mode navy, dark on the dark-mode light\n       fill). The saturated status fills below keep white text in both modes. */\n    --pantoken-badge-text: light-dark(\n      var(--instui-component-badge-color),\n      var(--instui-component-badge-color-inverse)\n    );\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--instui-component-badge-size);\n    height: var(--instui-component-badge-size);\n    padding: 0 var(--instui-component-badge-padding);\n    font-family: var(--instui-component-badge-font-family);\n    font-size: var(--instui-component-badge-font-size);\n    font-weight: var(--instui-component-badge-font-weight);\n    line-height: 1;\n    border-radius: var(--instui-component-badge-border-radius);\n    background: var(--pantoken-badge-accent);\n    color: var(--pantoken-badge-text);\n\n    &.-color-success {\n      --pantoken-badge-accent: var(--instui-component-badge-color-success);\n      --pantoken-badge-text: var(--instui-component-badge-color);\n    }\n\n    &.-color-danger {\n      --pantoken-badge-accent: var(--instui-component-badge-color-danger);\n      --pantoken-badge-text: var(--instui-component-badge-color);\n    }\n\n    /* Inverse swaps fill and text (InstUI): a light chip with dark text, for a colour/dark surface. */\n    &.-color-inverse {\n      --pantoken-badge-accent: var(--instui-component-badge-color);\n      --pantoken-badge-text: var(--instui-component-badge-color-inverse);\n    }\n\n    /* Notification: a small dot, no count. */\n    &.-type-notification {\n      min-width: 0;\n      width: var(--instui-spacing-space-sm);\n      height: var(--instui-spacing-space-sm);\n      padding: 0;\n      font-size: 0;\n    }\n\n    /* Pulse: an expanding ring in the badge's accent colour (InstUI `pulse`). */\n    &.-pulse::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border: var(--instui-border-width-md) solid var(--pantoken-badge-accent);\n      border-radius: inherit;\n      animation: pantoken-badge-pulse 1.2s ease-out infinite;\n    }\n\n    /* Placement: position the badge over a `.badge-wrapper` target. InstUI's countOffset is 0.5rem. */\n    &.-placement-top-end,\n    &.-placement-top-start,\n    &.-placement-bottom-end,\n    &.-placement-bottom-start,\n    &.-placement-start-center,\n    &.-placement-end-center {\n      position: absolute;\n    }\n\n    &.-placement-top-end {\n      top: -0.5rem;\n      inset-inline-end: -0.5rem;\n    }\n\n    &.-placement-top-start {\n      top: -0.5rem;\n      inset-inline-start: -0.5rem;\n    }\n\n    &.-placement-bottom-end {\n      bottom: -0.5rem;\n      inset-inline-end: -0.5rem;\n    }\n\n    &.-placement-bottom-start {\n      bottom: -0.5rem;\n      inset-inline-start: -0.5rem;\n    }\n\n    &.-placement-end-center {\n      top: 50%;\n      inset-inline-end: -0.5rem;\n      transform: translateY(-50%);\n    }\n\n    &.-placement-start-center {\n      top: 50%;\n      inset-inline-start: -0.5rem;\n      transform: translateY(-50%);\n    }\n\n    /* Standalone: the inline chip, in flow — resets any placement. */\n    &.-standalone {\n      position: relative;\n      inset: auto;\n      transform: none;\n    }\n  }\n}\n"
 }.rebrand;
 const billboardByTheme = {
-	"rebrand": "/**\n * @component billboard\n * @summary A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.\n * @modifier -clickable — Interactive (clickable) styling with hover feedback.\n * @modifier -icon-* — Render a leading icon glyph on `.hero` (e.g. `<span class=\"hero -icon-inbox\"></span>`).\n * @modifier -size-sm — Small: tighter spacing with smaller heading, message, and hero icon.\n * @modifier -size-small — Long-form alias of {@link -size-sm}.\n * @modifier -size-md — Medium (default): standard spacing with medium heading, message, and hero icon.\n * @modifier -size-medium — Long-form alias of {@link -size-md}.\n * @modifier -size-lg — Large: roomier spacing with larger heading, message, and hero icon.\n * @modifier -size-large — Long-form alias of {@link -size-lg}.\n * @part .hero — The optional leading icon or image.\n * @part .heading — The billboard heading.\n * @part .message — The supporting message.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-billboard -size-md -clickable\" tabindex=\"0\">\n *   <span class=\"hero -icon-inbox\"></span>\n *   <div class=\"heading\">No items yet</div>\n *   <div class=\"message\">Create your first item to get started.</div>\n * </div>\n * ```\n * @structure\n * .pfx-billboard {\n *   .hero:optional {}\n *   .heading {}\n *   .message {}\n * }\n * @todo `instructure-design-tokens` is missing several values defined in the `Billboard` component, so we hardcode them here for now. When the tokens are added, we should remove the hardcoded values and use the tokens instead.\n */\n.pfx-billboard {\n  display: block;\n  text-align: center;\n  background: var(--instui-component-billboard-background-color);\n  padding: var(--instui-component-billboard-padding-medium);\n  margin: var(--instui-component-billboard-medium-margin);\n  font-family: var(--instui-component-billboard-font-family);\n  color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-size-sm {\n  padding: var(--instui-component-billboard-padding-small);\n}\n\n.pfx-billboard.-size-md,\n.pfx-billboard.-size-medium {\n  padding: var(--instui-component-billboard-padding-medium);\n}\n\n.pfx-billboard.-size-lg {\n  padding: var(--instui-component-billboard-padding-large);\n  margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-large {\n  padding: var(--instui-component-billboard-padding-large);\n  margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-sm .message {\n  font-size: var(--instui-font-size-text-sm);\n}\n\n.pfx-billboard.-size-md .message,\n.pfx-billboard.-size-medium .message {\n  font-size: var(--instui-font-size-text-base);\n}\n\n.pfx-billboard.-size-lg .message {\n  font-size: 1.375rem;\n}\n\n.pfx-billboard.-size-large .message {\n  font-size: 1.375rem;\n}\n\n.pfx-billboard.-clickable {\n  cursor: pointer;\n  border: var(--instui-component-billboard-button-border-width)\n    var(--instui-component-billboard-button-border-style) transparent;\n  border-radius: var(--instui-component-billboard-button-border-radius);\n}\n\n.pfx-billboard.-clickable:hover {\n  border-style: dashed;\n  border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:focus {\n  border-style: solid;\n  border-color: var(--instui-color-text-base);\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:focus-visible {\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:active {\n  background: var(--instui-component-billboard-clickable-active-bg);\n  border-style: solid;\n  border-color: var(--instui-color-text-base);\n}\n\n/* Fallback for environments where @scope is not applied: keep hero icon sizes in sync with size modifiers. */\n.pfx-billboard > .hero {\n  font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard > .hero[class*=\"-icon-\"] {\n  line-height: 1;\n}\n\n.pfx-billboard.-size-sm > .hero,\n.pfx-billboard.-size-small > .hero {\n  font-size: var(--instui-component-icon-illu-sm);\n}\n\n.pfx-billboard.-size-md > .hero,\n.pfx-billboard.-size-medium > .hero {\n  font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard.-size-lg > .hero,\n.pfx-billboard.-size-large > .hero {\n  font-size: var(--instui-component-icon-illu-lg);\n}\n\n@scope (.pfx-billboard) {\n  :scope {\n    /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n    > .hero {\n      display: inline-flex;\n      justify-content: center;\n      margin-block-end: var(--instui-spacing-space-sm);\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    /* The documented `-icon-*` modifier lives directly on .hero. */\n    > .hero[class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    &.-size-sm > .hero {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero,\n    &.-size-medium > .hero {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-sm > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-small > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero[class*=\"-icon-\"],\n    &.-size-medium > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n    > .heading {\n      margin: 0 0 var(--instui-spacing-space-xs);\n      color: var(--instui-color-text-base);\n      font-weight: bold;\n      font-size: var(--instui-component-text-font-size-x-x-large);\n    }\n\n    > .message {\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-font-size-text-base);\n    }\n\n    &.-clickable:hover > .hero {\n      color: var(--instui-component-link-text-color);\n    }\n\n    &.-clickable:active > .hero {\n      color: var(--instui-component-link-on-color-text-color);\n    }\n  }\n}\n",
-	"canvas": "/**\n * @component billboard\n * @summary A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.\n * @modifier -clickable — Interactive (clickable) styling with hover feedback.\n * @modifier -icon-* — Render a leading icon glyph on `.hero` (e.g. `<span class=\"hero -icon-inbox\"></span>`).\n * @modifier -size-sm — Small: tighter spacing with smaller heading, message, and hero icon.\n * @modifier -size-small — Long-form alias of {@link -size-sm}.\n * @modifier -size-md — Medium (default): standard spacing with medium heading, message, and hero icon.\n * @modifier -size-medium — Long-form alias of {@link -size-md}.\n * @modifier -size-lg — Large: roomier spacing with larger heading, message, and hero icon.\n * @modifier -size-large — Long-form alias of {@link -size-lg}.\n * @part .hero — The optional leading icon or image.\n * @part .heading — The billboard heading.\n * @part .message — The supporting message.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-billboard -size-md -clickable\" tabindex=\"0\">\n *   <span class=\"hero -icon-inbox\"></span>\n *   <div class=\"heading\">No items yet</div>\n *   <div class=\"message\">Create your first item to get started.</div>\n * </div>\n * ```\n * @structure\n * .pfx-billboard {\n *   .hero:optional {}\n *   .heading {}\n *   .message {}\n * }\n * @todo `instructure-design-tokens` is missing several values defined in the `Billboard` component, so we hardcode them here for now. When the tokens are added, we should remove the hardcoded values and use the tokens instead.\n */\n.pfx-billboard {\n  display: block;\n  text-align: center;\n  background: var(--instui-component-billboard-background-color);\n  padding: var(--instui-component-billboard-padding-medium);\n  margin: var(--instui-component-billboard-medium-margin);\n  font-family: var(--instui-component-billboard-font-family);\n  color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-size-sm {\n  padding: var(--instui-component-billboard-padding-small);\n}\n\n.pfx-billboard.-size-md,\n.pfx-billboard.-size-medium {\n  padding: var(--instui-component-billboard-padding-medium);\n}\n\n.pfx-billboard.-size-lg {\n  padding: var(--instui-component-billboard-padding-large);\n  margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-large {\n  padding: var(--instui-component-billboard-padding-large);\n  margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-sm .message {\n  font-size: var(--instui-font-size-text-sm);\n}\n\n.pfx-billboard.-size-md .message,\n.pfx-billboard.-size-medium .message {\n  font-size: var(--instui-font-size-text-base);\n}\n\n.pfx-billboard.-size-lg .message {\n  font-size: 1.375rem;\n}\n\n.pfx-billboard.-size-large .message {\n  font-size: 1.375rem;\n}\n\n.pfx-billboard.-clickable {\n  cursor: pointer;\n  border: var(--instui-component-billboard-button-border-width)\n    var(--instui-component-billboard-button-border-style) transparent;\n  border-radius: var(--instui-component-billboard-button-border-radius);\n}\n\n.pfx-billboard.-clickable:hover {\n  border-style: dashed;\n  border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:hover {\n    border-color: var(--instui-component-link-text-color);\n  }\n\n.pfx-billboard.-clickable:focus {\n  border-style: solid;\n  border-color: var(--instui-color-text-base);\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:focus {\n    border-style: dashed;\n    border-color: var(--instui-component-link-text-color);\n  }\n\n.pfx-billboard.-clickable:focus-visible {\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:active {\n  background: var(--instui-component-billboard-clickable-active-bg);\n  border-style: solid;\n  border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:active {\n    border-style: dashed;\n    background: var(--instui-focus-outline-color);\n    border-color: var(--instui-component-link-text-color);\n  }\n\n/* Fallback for environments where @scope is not applied: keep hero icon sizes in sync with size modifiers. */\n.pfx-billboard > .hero {\n  font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard > .hero[class*=\"-icon-\"] {\n  line-height: 1;\n}\n\n.pfx-billboard.-size-sm > .hero,\n.pfx-billboard.-size-small > .hero {\n  font-size: var(--instui-component-icon-illu-sm);\n}\n\n.pfx-billboard.-size-md > .hero,\n.pfx-billboard.-size-medium > .hero {\n  font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard.-size-lg > .hero,\n.pfx-billboard.-size-large > .hero {\n  font-size: var(--instui-component-icon-illu-lg);\n}\n\n@scope (.pfx-billboard) {\n  :scope {\n    /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n    > .hero {\n      display: inline-flex;\n      justify-content: center;\n      margin-block-end: var(--instui-spacing-space-sm);\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    /* The documented `-icon-*` modifier lives directly on .hero. */\n    > .hero[class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    &.-size-sm > .hero {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero,\n    &.-size-medium > .hero {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-sm > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-small > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero[class*=\"-icon-\"],\n    &.-size-medium > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n    > .heading {\n      margin: 0 0 var(--instui-spacing-space-xs);\n      color: var(--instui-color-text-base);\n      font-weight: bold;\n      font-size: var(--instui-component-text-font-size-x-x-large);\n    }\n\n    > .message {\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-font-size-text-base);\n    }\n\n    &.-clickable:hover > .hero {\n      color: var(--instui-component-link-text-color);\n    }\n\n    &.-clickable:active > .hero {\n      color: var(--instui-component-link-on-color-text-color);\n    }\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component billboard\n * @summary A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.\n * @modifier -clickable — Interactive (clickable) styling with hover feedback.\n * @modifier -icon-* — Render a leading icon glyph on `.hero` (e.g. `<span class=\"hero -icon-inbox\"></span>`).\n * @modifier -size-sm — Small: tighter spacing with smaller heading, message, and hero icon.\n * @modifier -size-small — Long-form alias of {@link -size-sm}.\n * @modifier -size-md — Medium (default): standard spacing with medium heading, message, and hero icon.\n * @modifier -size-medium — Long-form alias of {@link -size-md}.\n * @modifier -size-lg — Large: roomier spacing with larger heading, message, and hero icon.\n * @modifier -size-large — Long-form alias of {@link -size-lg}.\n * @part .hero — The optional leading icon or image.\n * @part .heading — The billboard heading.\n * @part .message — The supporting message.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-billboard -size-md -clickable\" tabindex=\"0\">\n *   <span class=\"hero -icon-inbox\"></span>\n *   <div class=\"heading\">No items yet</div>\n *   <div class=\"message\">Create your first item to get started.</div>\n * </div>\n * ```\n * @structure\n * .pfx-billboard {\n *   .hero:optional {}\n *   .heading {}\n *   .message {}\n * }\n * @todo `instructure-design-tokens` is missing several values defined in the `Billboard` component, so we hardcode them here for now. When the tokens are added, we should remove the hardcoded values and use the tokens instead.\n */\n.pfx-billboard {\n  display: block;\n  text-align: center;\n  background: var(--instui-component-billboard-background-color);\n  padding: var(--instui-component-billboard-padding-medium);\n  margin: var(--instui-component-billboard-medium-margin);\n  font-family: var(--instui-component-billboard-font-family);\n  color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-size-sm {\n  padding: var(--instui-component-billboard-padding-small);\n}\n\n.pfx-billboard.-size-md,\n.pfx-billboard.-size-medium {\n  padding: var(--instui-component-billboard-padding-medium);\n}\n\n.pfx-billboard.-size-lg {\n  padding: var(--instui-component-billboard-padding-large);\n  margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-large {\n  padding: var(--instui-component-billboard-padding-large);\n  margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-sm .message {\n  font-size: var(--instui-font-size-text-sm);\n}\n\n.pfx-billboard.-size-md .message,\n.pfx-billboard.-size-medium .message {\n  font-size: var(--instui-font-size-text-base);\n}\n\n.pfx-billboard.-size-lg .message {\n  font-size: 1.375rem;\n}\n\n.pfx-billboard.-size-large .message {\n  font-size: 1.375rem;\n}\n\n.pfx-billboard.-clickable {\n  cursor: pointer;\n  border: var(--instui-component-billboard-button-border-width)\n    var(--instui-component-billboard-button-border-style) transparent;\n  border-radius: var(--instui-component-billboard-button-border-radius);\n}\n\n.pfx-billboard.-clickable:hover {\n  border-style: dashed;\n  border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:hover {\n    border-color: var(--instui-component-link-text-color);\n  }\n\n.pfx-billboard.-clickable:focus {\n  border-style: solid;\n  border-color: var(--instui-color-text-base);\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:focus {\n    border-style: dashed;\n    border-color: var(--instui-component-link-text-color);\n  }\n\n.pfx-billboard.-clickable:focus-visible {\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:active {\n  background: var(--instui-component-billboard-clickable-active-bg);\n  border-style: solid;\n  border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:active {\n    border-style: dashed;\n    background: var(--instui-focus-outline-color);\n    border-color: var(--instui-component-link-text-color);\n  }\n\n/* Fallback for environments where @scope is not applied: keep hero icon sizes in sync with size modifiers. */\n.pfx-billboard > .hero {\n  font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard > .hero[class*=\"-icon-\"] {\n  line-height: 1;\n}\n\n.pfx-billboard.-size-sm > .hero,\n.pfx-billboard.-size-small > .hero {\n  font-size: var(--instui-component-icon-illu-sm);\n}\n\n.pfx-billboard.-size-md > .hero,\n.pfx-billboard.-size-medium > .hero {\n  font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard.-size-lg > .hero,\n.pfx-billboard.-size-large > .hero {\n  font-size: var(--instui-component-icon-illu-lg);\n}\n\n@scope (.pfx-billboard) {\n  :scope {\n    /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n    > .hero {\n      display: inline-flex;\n      justify-content: center;\n      margin-block-end: var(--instui-spacing-space-sm);\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    /* The documented `-icon-*` modifier lives directly on .hero. */\n    > .hero[class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    &.-size-sm > .hero {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero,\n    &.-size-medium > .hero {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-sm > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-small > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero[class*=\"-icon-\"],\n    &.-size-medium > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n    > .heading {\n      margin: 0 0 var(--instui-spacing-space-xs);\n      color: var(--instui-color-text-base);\n      font-weight: bold;\n      font-size: var(--instui-component-text-font-size-x-x-large);\n    }\n\n    > .message {\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-font-size-text-base);\n    }\n\n    &.-clickable:hover > .hero {\n      color: var(--instui-component-link-text-color);\n    }\n\n    &.-clickable:active > .hero {\n      color: var(--instui-component-link-on-color-text-color);\n    }\n  }\n}\n"
+	"rebrand": "/**\n * @component billboard\n * @summary A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.\n * @remarks The `.hero`/`.heading`/`.message` parts are composed by the consumer's markup, not enforced structure; `-clickable` only adds hover styling, so a real click target still needs `tabindex` and a keyboard handler.\n * @modifier -clickable — Interactive (clickable) styling with hover feedback.\n * @modifier -icon-* — Render a leading icon glyph on `.hero` (e.g. `<span class=\"hero -icon-inbox\"></span>`).\n * @modifier -size-sm — Small: tighter spacing with smaller heading, message, and hero icon.\n * @modifier -size-small — Long-form alias of {@link -size-sm}.\n * @modifier -size-md — Medium (default): standard spacing with medium heading, message, and hero icon.\n * @modifier -size-medium — Long-form alias of {@link -size-md}.\n * @modifier -size-lg — Large: roomier spacing with larger heading, message, and hero icon.\n * @modifier -size-large — Long-form alias of {@link -size-lg}.\n * @part .hero — The optional leading icon or image.\n * @part .heading — The billboard heading.\n * @part .message — The supporting message.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-billboard -size-md -clickable\" tabindex=\"0\">\n *   <span class=\"hero -icon-inbox\"></span>\n *   <div class=\"heading\">No items yet</div>\n *   <div class=\"message\">Create your first item to get started.</div>\n * </div>\n * ```\n * @structure\n * .pfx-billboard {\n *   .hero:optional {}\n *   .heading {}\n *   .message {}\n * }\n * @todo `instructure-design-tokens` is missing several values defined in the `Billboard` component, so we hardcode them here for now. When the tokens are added, we should remove the hardcoded values and use the tokens instead.\n */\n.pfx-billboard {\n  display: block;\n  text-align: center;\n  background: var(--instui-component-billboard-background-color);\n  padding: var(--instui-component-billboard-padding-medium);\n  margin: var(--instui-component-billboard-medium-margin);\n  font-family: var(--instui-component-billboard-font-family);\n  color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-size-sm {\n  padding: var(--instui-component-billboard-padding-small);\n}\n\n.pfx-billboard.-size-md,\n.pfx-billboard.-size-medium {\n  padding: var(--instui-component-billboard-padding-medium);\n}\n\n.pfx-billboard.-size-lg {\n  padding: var(--instui-component-billboard-padding-large);\n  margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-large {\n  padding: var(--instui-component-billboard-padding-large);\n  margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-sm .message {\n  font-size: var(--instui-font-size-text-sm);\n}\n\n.pfx-billboard.-size-md .message,\n.pfx-billboard.-size-medium .message {\n  font-size: var(--instui-font-size-text-base);\n}\n\n.pfx-billboard.-size-lg .message {\n  font-size: 1.375rem;\n}\n\n.pfx-billboard.-size-large .message {\n  font-size: 1.375rem;\n}\n\n.pfx-billboard.-clickable {\n  cursor: pointer;\n  border: var(--instui-component-billboard-button-border-width)\n    var(--instui-component-billboard-button-border-style) transparent;\n  border-radius: var(--instui-component-billboard-button-border-radius);\n}\n\n.pfx-billboard.-clickable:hover {\n  border-style: dashed;\n  border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:focus {\n  border-style: solid;\n  border-color: var(--instui-color-text-base);\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:focus-visible {\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:active {\n  background: var(--instui-component-billboard-clickable-active-bg);\n  border-style: solid;\n  border-color: var(--instui-color-text-base);\n}\n\n/* Fallback for environments where @scope is not applied: keep hero icon sizes in sync with size modifiers. */\n.pfx-billboard > .hero {\n  font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard > .hero[class*=\"-icon-\"] {\n  line-height: 1;\n}\n\n.pfx-billboard.-size-sm > .hero,\n.pfx-billboard.-size-small > .hero {\n  font-size: var(--instui-component-icon-illu-sm);\n}\n\n.pfx-billboard.-size-md > .hero,\n.pfx-billboard.-size-medium > .hero {\n  font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard.-size-lg > .hero,\n.pfx-billboard.-size-large > .hero {\n  font-size: var(--instui-component-icon-illu-lg);\n}\n\n@scope (.pfx-billboard) {\n  :scope {\n    /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n    > .hero {\n      display: inline-flex;\n      justify-content: center;\n      margin-block-end: var(--instui-spacing-space-sm);\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    /* The documented `-icon-*` modifier lives directly on .hero. */\n    > .hero[class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    &.-size-sm > .hero {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero,\n    &.-size-medium > .hero {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-sm > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-small > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero[class*=\"-icon-\"],\n    &.-size-medium > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n    > .heading {\n      margin: 0 0 var(--instui-spacing-space-xs);\n      color: var(--instui-color-text-base);\n      font-weight: bold;\n      font-size: var(--instui-component-text-font-size-x-x-large);\n    }\n\n    > .message {\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-font-size-text-base);\n    }\n\n    &.-clickable:hover > .hero {\n      color: var(--instui-component-link-text-color);\n    }\n\n    &.-clickable:active > .hero {\n      color: var(--instui-component-link-on-color-text-color);\n    }\n  }\n}\n",
+	"canvas": "/**\n * @component billboard\n * @summary A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.\n * @remarks The `.hero`/`.heading`/`.message` parts are composed by the consumer's markup, not enforced structure; `-clickable` only adds hover styling, so a real click target still needs `tabindex` and a keyboard handler.\n * @modifier -clickable — Interactive (clickable) styling with hover feedback.\n * @modifier -icon-* — Render a leading icon glyph on `.hero` (e.g. `<span class=\"hero -icon-inbox\"></span>`).\n * @modifier -size-sm — Small: tighter spacing with smaller heading, message, and hero icon.\n * @modifier -size-small — Long-form alias of {@link -size-sm}.\n * @modifier -size-md — Medium (default): standard spacing with medium heading, message, and hero icon.\n * @modifier -size-medium — Long-form alias of {@link -size-md}.\n * @modifier -size-lg — Large: roomier spacing with larger heading, message, and hero icon.\n * @modifier -size-large — Long-form alias of {@link -size-lg}.\n * @part .hero — The optional leading icon or image.\n * @part .heading — The billboard heading.\n * @part .message — The supporting message.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-billboard -size-md -clickable\" tabindex=\"0\">\n *   <span class=\"hero -icon-inbox\"></span>\n *   <div class=\"heading\">No items yet</div>\n *   <div class=\"message\">Create your first item to get started.</div>\n * </div>\n * ```\n * @structure\n * .pfx-billboard {\n *   .hero:optional {}\n *   .heading {}\n *   .message {}\n * }\n * @todo `instructure-design-tokens` is missing several values defined in the `Billboard` component, so we hardcode them here for now. When the tokens are added, we should remove the hardcoded values and use the tokens instead.\n */\n.pfx-billboard {\n  display: block;\n  text-align: center;\n  background: var(--instui-component-billboard-background-color);\n  padding: var(--instui-component-billboard-padding-medium);\n  margin: var(--instui-component-billboard-medium-margin);\n  font-family: var(--instui-component-billboard-font-family);\n  color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-size-sm {\n  padding: var(--instui-component-billboard-padding-small);\n}\n\n.pfx-billboard.-size-md,\n.pfx-billboard.-size-medium {\n  padding: var(--instui-component-billboard-padding-medium);\n}\n\n.pfx-billboard.-size-lg {\n  padding: var(--instui-component-billboard-padding-large);\n  margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-large {\n  padding: var(--instui-component-billboard-padding-large);\n  margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-sm .message {\n  font-size: var(--instui-font-size-text-sm);\n}\n\n.pfx-billboard.-size-md .message,\n.pfx-billboard.-size-medium .message {\n  font-size: var(--instui-font-size-text-base);\n}\n\n.pfx-billboard.-size-lg .message {\n  font-size: 1.375rem;\n}\n\n.pfx-billboard.-size-large .message {\n  font-size: 1.375rem;\n}\n\n.pfx-billboard.-clickable {\n  cursor: pointer;\n  border: var(--instui-component-billboard-button-border-width)\n    var(--instui-component-billboard-button-border-style) transparent;\n  border-radius: var(--instui-component-billboard-button-border-radius);\n}\n\n.pfx-billboard.-clickable:hover {\n  border-style: dashed;\n  border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:hover {\n    border-color: var(--instui-component-link-text-color);\n  }\n\n.pfx-billboard.-clickable:focus {\n  border-style: solid;\n  border-color: var(--instui-color-text-base);\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:focus {\n    border-style: dashed;\n    border-color: var(--instui-component-link-text-color);\n  }\n\n.pfx-billboard.-clickable:focus-visible {\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:active {\n  background: var(--instui-component-billboard-clickable-active-bg);\n  border-style: solid;\n  border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:active {\n    border-style: dashed;\n    background: var(--instui-focus-outline-color);\n    border-color: var(--instui-component-link-text-color);\n  }\n\n/* Fallback for environments where @scope is not applied: keep hero icon sizes in sync with size modifiers. */\n.pfx-billboard > .hero {\n  font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard > .hero[class*=\"-icon-\"] {\n  line-height: 1;\n}\n\n.pfx-billboard.-size-sm > .hero,\n.pfx-billboard.-size-small > .hero {\n  font-size: var(--instui-component-icon-illu-sm);\n}\n\n.pfx-billboard.-size-md > .hero,\n.pfx-billboard.-size-medium > .hero {\n  font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard.-size-lg > .hero,\n.pfx-billboard.-size-large > .hero {\n  font-size: var(--instui-component-icon-illu-lg);\n}\n\n@scope (.pfx-billboard) {\n  :scope {\n    /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n    > .hero {\n      display: inline-flex;\n      justify-content: center;\n      margin-block-end: var(--instui-spacing-space-sm);\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    /* The documented `-icon-*` modifier lives directly on .hero. */\n    > .hero[class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    &.-size-sm > .hero {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero,\n    &.-size-medium > .hero {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-sm > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-small > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero[class*=\"-icon-\"],\n    &.-size-medium > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n    > .heading {\n      margin: 0 0 var(--instui-spacing-space-xs);\n      color: var(--instui-color-text-base);\n      font-weight: bold;\n      font-size: var(--instui-component-text-font-size-x-x-large);\n    }\n\n    > .message {\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-font-size-text-base);\n    }\n\n    &.-clickable:hover > .hero {\n      color: var(--instui-component-link-text-color);\n    }\n\n    &.-clickable:active > .hero {\n      color: var(--instui-component-link-on-color-text-color);\n    }\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component billboard\n * @summary A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.\n * @remarks The `.hero`/`.heading`/`.message` parts are composed by the consumer's markup, not enforced structure; `-clickable` only adds hover styling, so a real click target still needs `tabindex` and a keyboard handler.\n * @modifier -clickable — Interactive (clickable) styling with hover feedback.\n * @modifier -icon-* — Render a leading icon glyph on `.hero` (e.g. `<span class=\"hero -icon-inbox\"></span>`).\n * @modifier -size-sm — Small: tighter spacing with smaller heading, message, and hero icon.\n * @modifier -size-small — Long-form alias of {@link -size-sm}.\n * @modifier -size-md — Medium (default): standard spacing with medium heading, message, and hero icon.\n * @modifier -size-medium — Long-form alias of {@link -size-md}.\n * @modifier -size-lg — Large: roomier spacing with larger heading, message, and hero icon.\n * @modifier -size-large — Long-form alias of {@link -size-lg}.\n * @part .hero — The optional leading icon or image.\n * @part .heading — The billboard heading.\n * @part .message — The supporting message.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-billboard -size-md -clickable\" tabindex=\"0\">\n *   <span class=\"hero -icon-inbox\"></span>\n *   <div class=\"heading\">No items yet</div>\n *   <div class=\"message\">Create your first item to get started.</div>\n * </div>\n * ```\n * @structure\n * .pfx-billboard {\n *   .hero:optional {}\n *   .heading {}\n *   .message {}\n * }\n * @todo `instructure-design-tokens` is missing several values defined in the `Billboard` component, so we hardcode them here for now. When the tokens are added, we should remove the hardcoded values and use the tokens instead.\n */\n.pfx-billboard {\n  display: block;\n  text-align: center;\n  background: var(--instui-component-billboard-background-color);\n  padding: var(--instui-component-billboard-padding-medium);\n  margin: var(--instui-component-billboard-medium-margin);\n  font-family: var(--instui-component-billboard-font-family);\n  color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-size-sm {\n  padding: var(--instui-component-billboard-padding-small);\n}\n\n.pfx-billboard.-size-md,\n.pfx-billboard.-size-medium {\n  padding: var(--instui-component-billboard-padding-medium);\n}\n\n.pfx-billboard.-size-lg {\n  padding: var(--instui-component-billboard-padding-large);\n  margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-large {\n  padding: var(--instui-component-billboard-padding-large);\n  margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-sm .message {\n  font-size: var(--instui-font-size-text-sm);\n}\n\n.pfx-billboard.-size-md .message,\n.pfx-billboard.-size-medium .message {\n  font-size: var(--instui-font-size-text-base);\n}\n\n.pfx-billboard.-size-lg .message {\n  font-size: 1.375rem;\n}\n\n.pfx-billboard.-size-large .message {\n  font-size: 1.375rem;\n}\n\n.pfx-billboard.-clickable {\n  cursor: pointer;\n  border: var(--instui-component-billboard-button-border-width)\n    var(--instui-component-billboard-button-border-style) transparent;\n  border-radius: var(--instui-component-billboard-button-border-radius);\n}\n\n.pfx-billboard.-clickable:hover {\n  border-style: dashed;\n  border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:hover {\n    border-color: var(--instui-component-link-text-color);\n  }\n\n.pfx-billboard.-clickable:focus {\n  border-style: solid;\n  border-color: var(--instui-color-text-base);\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:focus {\n    border-style: dashed;\n    border-color: var(--instui-component-link-text-color);\n  }\n\n.pfx-billboard.-clickable:focus-visible {\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color);\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:active {\n  background: var(--instui-component-billboard-clickable-active-bg);\n  border-style: solid;\n  border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:active {\n    border-style: dashed;\n    background: var(--instui-focus-outline-color);\n    border-color: var(--instui-component-link-text-color);\n  }\n\n/* Fallback for environments where @scope is not applied: keep hero icon sizes in sync with size modifiers. */\n.pfx-billboard > .hero {\n  font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard > .hero[class*=\"-icon-\"] {\n  line-height: 1;\n}\n\n.pfx-billboard.-size-sm > .hero,\n.pfx-billboard.-size-small > .hero {\n  font-size: var(--instui-component-icon-illu-sm);\n}\n\n.pfx-billboard.-size-md > .hero,\n.pfx-billboard.-size-medium > .hero {\n  font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard.-size-lg > .hero,\n.pfx-billboard.-size-large > .hero {\n  font-size: var(--instui-component-icon-illu-lg);\n}\n\n@scope (.pfx-billboard) {\n  :scope {\n    /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n    > .hero {\n      display: inline-flex;\n      justify-content: center;\n      margin-block-end: var(--instui-spacing-space-sm);\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    /* The documented `-icon-*` modifier lives directly on .hero. */\n    > .hero[class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    &.-size-sm > .hero {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero,\n    &.-size-medium > .hero {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-sm > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-small > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-sm);\n    }\n\n    &.-size-md > .hero[class*=\"-icon-\"],\n    &.-size-medium > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-md);\n    }\n\n    &.-size-lg > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    &.-size-large > .hero[class*=\"-icon-\"] {\n      font-size: var(--instui-component-icon-illu-lg);\n    }\n\n    /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n    > .heading {\n      margin: 0 0 var(--instui-spacing-space-xs);\n      color: var(--instui-color-text-base);\n      font-weight: bold;\n      font-size: var(--instui-component-text-font-size-x-x-large);\n    }\n\n    > .message {\n      color: var(--instui-color-text-base);\n      font-size: var(--instui-font-size-text-base);\n    }\n\n    &.-clickable:hover > .hero {\n      color: var(--instui-component-link-text-color);\n    }\n\n    &.-clickable:active > .hero {\n      color: var(--instui-component-link-on-color-text-color);\n    }\n  }\n}\n"
 };
 billboardByTheme.rebrand;
 const breadcrumb$1 = {
@@ -338,19 +338,19 @@ const calendarDay$1 = {
 	"canvasHighContrast": "/**\n * @component calendar.day\n * @memberOf calendar\n * @selector .day\n * @summary A day cell (InstUI `Calendar.Day`); `-today`, `-selected`, and `-outside-month` mark its state.\n * @modifier -today — Today's date.\n * @modifier -selected — The selected date.\n * @modifier -outside-month — A day from the adjacent month (leading/trailing filler).\n * @structure\n * @component calendar {\n *   .grid {\n *     .day {}\n *   }\n * }\n */\n@scope (.pfx-calendar) {\n  .day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n    font-size: var(--instui-component-calendar-day-font-size);\n    color: var(--instui-component-calendar-day-color);\n    background: var(--instui-component-calendar-day-background);\n    cursor: pointer;\n  }\n\n  .day.-outside-month {\n    color: var(--instui-component-calendar-day-outside-month-color);\n  }\n\n  .day.-today {\n    background: var(--instui-component-calendar-day-today-background);\n    color: var(--instui-component-calendar-day-today-color);\n    border-radius: var(--instui-component-calendar-day-today-border-radius);\n  }\n\n  .day.-selected {\n    background: var(--instui-component-calendar-day-selected-background);\n    color: var(--instui-component-calendar-day-selected-color);\n    border-radius: var(--instui-component-calendar-day-selected-border-radius);\n  }\n}\n"
 }.rebrand;
 const checkbox$1 = {
-	"rebrand": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope {\n    &.-required .asterisk {\n      color: var(--instui-component-checkbox-asterisk-color);\n    }\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
-	"canvas": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope {\n    &.-required .asterisk {\n      color: var(--instui-component-checkbox-asterisk-color);\n    }\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
-	"canvasHighContrast": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope {\n    &.-required .asterisk {\n      color: var(--instui-component-checkbox-asterisk-color);\n    }\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n"
+	"rebrand": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -required — Show the required-field asterisk next to the label.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope {\n    &.-required .asterisk {\n      color: var(--instui-component-checkbox-asterisk-color);\n    }\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
+	"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 -required — Show the required-field asterisk next to the label.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope {\n    &.-required .asterisk {\n      color: var(--instui-component-checkbox-asterisk-color);\n    }\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
+	"canvasHighContrast": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -required — Show the required-field asterisk next to the label.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope {\n    &.-required .asterisk {\n      color: var(--instui-component-checkbox-asterisk-color);\n    }\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n"
 }.rebrand;
 const closeButton$1 = {
-	"rebrand": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    aspect-ratio: 1;\n    min-height: var(--instui-component-base-button-medium-height);\n    padding: var(--instui-spacing-space-xs);\n    border: 0;\n    background: transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    color: var(--instui-color-text-interactive-action-secondary-base);\n    cursor: pointer;\n  }\n\n  &::before {\n    content: \"\";\n    inline-size: 1em;\n    block-size: 1em;\n    background: currentColor;\n    -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n    mask: var(--instui-icon-x) center / contain no-repeat;\n  }\n\n  &:hover {\n    background: var(--instui-color-background-interactive-action-tertiary-hover);\n  }\n\n  &:active {\n    background: var(--instui-color-background-interactive-action-tertiary-active);\n  }\n\n  &.-size-sm {\n    min-height: var(--instui-component-base-button-small-height);\n  }\n\n  &.-size-lg {\n    min-height: var(--instui-component-base-button-large-height);\n  }\n\n  &.-color-inverse {\n    color: var(--instui-component-base-button-primary-inverse-ghost-color);\n  }\n}\n",
-	"canvas": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    aspect-ratio: 1;\n    min-height: var(--instui-component-base-button-medium-height);\n    padding: var(--instui-spacing-space-xs);\n    border: 0;\n    background: transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    color: var(--instui-color-text-interactive-action-secondary-base);\n    cursor: pointer;\n  }\n\n  &::before {\n    content: \"\";\n    inline-size: 1em;\n    block-size: 1em;\n    background: currentColor;\n    -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n    mask: var(--instui-icon-x) center / contain no-repeat;\n  }\n\n  &:hover {\n    background: var(--instui-color-background-interactive-action-tertiary-hover);\n  }\n\n  &:active {\n    background: var(--instui-color-background-interactive-action-tertiary-active);\n  }\n\n  &.-size-sm {\n    min-height: var(--instui-component-base-button-small-height);\n  }\n\n  &.-size-lg {\n    min-height: var(--instui-component-base-button-large-height);\n  }\n\n  &.-color-inverse {\n    color: var(--instui-component-base-button-primary-inverse-ghost-color);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    aspect-ratio: 1;\n    min-height: var(--instui-component-base-button-medium-height);\n    padding: var(--instui-spacing-space-xs);\n    border: 0;\n    background: transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    color: var(--instui-color-text-interactive-action-secondary-base);\n    cursor: pointer;\n  }\n\n  &::before {\n    content: \"\";\n    inline-size: 1em;\n    block-size: 1em;\n    background: currentColor;\n    -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n    mask: var(--instui-icon-x) center / contain no-repeat;\n  }\n\n  &:hover {\n    background: var(--instui-color-background-interactive-action-tertiary-hover);\n  }\n\n  &:active {\n    background: var(--instui-color-background-interactive-action-tertiary-active);\n  }\n\n  &.-size-sm {\n    min-height: var(--instui-component-base-button-small-height);\n  }\n\n  &.-size-lg {\n    min-height: var(--instui-component-base-button-large-height);\n  }\n\n  &.-color-inverse {\n    color: var(--instui-component-base-button-primary-inverse-ghost-color);\n  }\n}\n"
+	"rebrand": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @remarks Always renders as an icon-only control with no visible label, so an `aria-label` is required, not optional; compare to `button`'s `-without-background` ghost variant, which keeps a text label.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    aspect-ratio: 1;\n    min-height: var(--instui-component-base-button-medium-height);\n    padding: var(--instui-spacing-space-xs);\n    border: 0;\n    background: transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    color: var(--instui-color-text-interactive-action-secondary-base);\n    cursor: pointer;\n  }\n\n  &::before {\n    content: \"\";\n    inline-size: 1em;\n    block-size: 1em;\n    background: currentColor;\n    -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n    mask: var(--instui-icon-x) center / contain no-repeat;\n  }\n\n  &:hover {\n    background: var(--instui-color-background-interactive-action-tertiary-hover);\n  }\n\n  &:active {\n    background: var(--instui-color-background-interactive-action-tertiary-active);\n  }\n\n  &.-size-sm {\n    min-height: var(--instui-component-base-button-small-height);\n  }\n\n  &.-size-lg {\n    min-height: var(--instui-component-base-button-large-height);\n  }\n\n  &.-color-inverse {\n    color: var(--instui-component-base-button-primary-inverse-ghost-color);\n  }\n}\n",
+	"canvas": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @remarks Always renders as an icon-only control with no visible label, so an `aria-label` is required, not optional; compare to `button`'s `-without-background` ghost variant, which keeps a text label.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    aspect-ratio: 1;\n    min-height: var(--instui-component-base-button-medium-height);\n    padding: var(--instui-spacing-space-xs);\n    border: 0;\n    background: transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    color: var(--instui-color-text-interactive-action-secondary-base);\n    cursor: pointer;\n  }\n\n  &::before {\n    content: \"\";\n    inline-size: 1em;\n    block-size: 1em;\n    background: currentColor;\n    -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n    mask: var(--instui-icon-x) center / contain no-repeat;\n  }\n\n  &:hover {\n    background: var(--instui-color-background-interactive-action-tertiary-hover);\n  }\n\n  &:active {\n    background: var(--instui-color-background-interactive-action-tertiary-active);\n  }\n\n  &.-size-sm {\n    min-height: var(--instui-component-base-button-small-height);\n  }\n\n  &.-size-lg {\n    min-height: var(--instui-component-base-button-large-height);\n  }\n\n  &.-color-inverse {\n    color: var(--instui-component-base-button-primary-inverse-ghost-color);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @remarks Always renders as an icon-only control with no visible label, so an `aria-label` is required, not optional; compare to `button`'s `-without-background` ghost variant, which keeps a text label.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    aspect-ratio: 1;\n    min-height: var(--instui-component-base-button-medium-height);\n    padding: var(--instui-spacing-space-xs);\n    border: 0;\n    background: transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    color: var(--instui-color-text-interactive-action-secondary-base);\n    cursor: pointer;\n  }\n\n  &::before {\n    content: \"\";\n    inline-size: 1em;\n    block-size: 1em;\n    background: currentColor;\n    -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n    mask: var(--instui-icon-x) center / contain no-repeat;\n  }\n\n  &:hover {\n    background: var(--instui-color-background-interactive-action-tertiary-hover);\n  }\n\n  &:active {\n    background: var(--instui-color-background-interactive-action-tertiary-active);\n  }\n\n  &.-size-sm {\n    min-height: var(--instui-component-base-button-small-height);\n  }\n\n  &.-size-lg {\n    min-height: var(--instui-component-base-button-large-height);\n  }\n\n  &.-color-inverse {\n    color: var(--instui-component-base-button-primary-inverse-ghost-color);\n  }\n}\n"
 }.rebrand;
 const contextView$1 = {
-	"rebrand": "/**\n * @component context-view\n * @selector .pfx-context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n@scope (.pfx-context-view) {\n  & {\n    position: relative;\n    display: inline-block;\n    padding: var(--instui-spacing-space-md);\n    background: var(--instui-color-background-elevated-surface-base);\n    color: var(--instui-color-text-base);\n    border: var(--instui-component-context-view-arrow-border-width) solid\n      var(--instui-component-context-view-arrow-border-color);\n    border-radius: var(--instui-component-context-view-border-radius);\n    /* ContextView floats over content — InstUI gives it a shadow. */\n    box-shadow: var(--instui-elevation-above);\n  }\n\n  /* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n     ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n     without it, a surface-coloured caret is invisible against a matching surface. */\n  &::before,\n  &::after {\n    content: \"\";\n    position: absolute;\n    border-style: solid;\n    border-color: transparent;\n  }\n\n  /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n     pointing down. */\n  &::before {\n    top: 100%;\n    inset-inline-start: calc(\n      var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n    );\n    border-top-color: var(--instui-component-context-view-arrow-border-color);\n    border-width: calc(\n      var(--instui-component-context-view-arrow-size) +\n        var(--instui-component-context-view-arrow-border-width)\n    );\n  }\n\n  &::after {\n    top: 100%;\n    inset-inline-start: var(--instui-spacing-space-lg);\n    border-width: var(--instui-component-context-view-arrow-size);\n    border-top-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"bottom\": caret on the top edge, pointing up. */\n  &.-placement-bottom::before {\n    top: auto;\n    bottom: 100%;\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-bottom::after {\n    top: auto;\n    bottom: 100%;\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n  &.-placement-start::before,\n  &.-placement-start::after {\n    top: 50%;\n    inset-inline-start: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-start::before {\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-start::after {\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n  &.-placement-end::before,\n  &.-placement-end::after {\n    top: 50%;\n    inset-inline-start: auto;\n    inset-inline-end: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-end::before {\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-end::after {\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n  &.-color-inverse {\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::before {\n    border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::after {\n    border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-bottom::before {\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-bottom::after {\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-start::before {\n    border-top-color: transparent;\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-start::after {\n    border-top-color: transparent;\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-end::before {\n    border-top-color: transparent;\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-end::after {\n    border-top-color: transparent;\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  /* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n     above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n     and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n     supported; elsewhere the UA centres it. */\n  &[popover] {\n    position: fixed;\n    overflow: visible;\n    margin: 0;\n  }\n\n  &[popover]:not(:popover-open) {\n    display: none;\n  }\n\n  /* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n     popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n     trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n  @supports (position-area: block-end) {\n    &[popover] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n}\n",
-	"canvas": "/**\n * @component context-view\n * @selector .pfx-context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n@scope (.pfx-context-view) {\n  & {\n    position: relative;\n    display: inline-block;\n    padding: var(--instui-spacing-space-md);\n    background: var(--instui-color-background-elevated-surface-base);\n    color: var(--instui-color-text-base);\n    border: var(--instui-component-context-view-arrow-border-width) solid\n      var(--instui-component-context-view-arrow-border-color);\n    border-radius: var(--instui-component-context-view-border-radius);\n    /* ContextView floats over content — InstUI gives it a shadow. */\n    box-shadow: var(--instui-elevation-above);\n  }\n\n  /* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n     ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n     without it, a surface-coloured caret is invisible against a matching surface. */\n  &::before,\n  &::after {\n    content: \"\";\n    position: absolute;\n    border-style: solid;\n    border-color: transparent;\n  }\n\n  /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n     pointing down. */\n  &::before {\n    top: 100%;\n    inset-inline-start: calc(\n      var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n    );\n    border-top-color: var(--instui-component-context-view-arrow-border-color);\n    border-width: calc(\n      var(--instui-component-context-view-arrow-size) +\n        var(--instui-component-context-view-arrow-border-width)\n    );\n  }\n\n  &::after {\n    top: 100%;\n    inset-inline-start: var(--instui-spacing-space-lg);\n    border-width: var(--instui-component-context-view-arrow-size);\n    border-top-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"bottom\": caret on the top edge, pointing up. */\n  &.-placement-bottom::before {\n    top: auto;\n    bottom: 100%;\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-bottom::after {\n    top: auto;\n    bottom: 100%;\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n  &.-placement-start::before,\n  &.-placement-start::after {\n    top: 50%;\n    inset-inline-start: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-start::before {\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-start::after {\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n  &.-placement-end::before,\n  &.-placement-end::after {\n    top: 50%;\n    inset-inline-start: auto;\n    inset-inline-end: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-end::before {\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-end::after {\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n  &.-color-inverse {\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::before {\n    border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::after {\n    border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-bottom::before {\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-bottom::after {\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-start::before {\n    border-top-color: transparent;\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-start::after {\n    border-top-color: transparent;\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-end::before {\n    border-top-color: transparent;\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-end::after {\n    border-top-color: transparent;\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  /* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n     above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n     and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n     supported; elsewhere the UA centres it. */\n  &[popover] {\n    position: fixed;\n    overflow: visible;\n    margin: 0;\n  }\n\n  &[popover]:not(:popover-open) {\n    display: none;\n  }\n\n  /* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n     popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n     trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n  @supports (position-area: block-end) {\n    &[popover] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component context-view\n * @selector .pfx-context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n@scope (.pfx-context-view) {\n  & {\n    position: relative;\n    display: inline-block;\n    padding: var(--instui-spacing-space-md);\n    background: var(--instui-color-background-elevated-surface-base);\n    color: var(--instui-color-text-base);\n    border: var(--instui-component-context-view-arrow-border-width) solid\n      var(--instui-component-context-view-arrow-border-color);\n    border-radius: var(--instui-component-context-view-border-radius);\n    /* ContextView floats over content — InstUI gives it a shadow. */\n    box-shadow: var(--instui-elevation-above);\n  }\n\n  /* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n     ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n     without it, a surface-coloured caret is invisible against a matching surface. */\n  &::before,\n  &::after {\n    content: \"\";\n    position: absolute;\n    border-style: solid;\n    border-color: transparent;\n  }\n\n  /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n     pointing down. */\n  &::before {\n    top: 100%;\n    inset-inline-start: calc(\n      var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n    );\n    border-top-color: var(--instui-component-context-view-arrow-border-color);\n    border-width: calc(\n      var(--instui-component-context-view-arrow-size) +\n        var(--instui-component-context-view-arrow-border-width)\n    );\n  }\n\n  &::after {\n    top: 100%;\n    inset-inline-start: var(--instui-spacing-space-lg);\n    border-width: var(--instui-component-context-view-arrow-size);\n    border-top-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"bottom\": caret on the top edge, pointing up. */\n  &.-placement-bottom::before {\n    top: auto;\n    bottom: 100%;\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-bottom::after {\n    top: auto;\n    bottom: 100%;\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n  &.-placement-start::before,\n  &.-placement-start::after {\n    top: 50%;\n    inset-inline-start: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-start::before {\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-start::after {\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n  &.-placement-end::before,\n  &.-placement-end::after {\n    top: 50%;\n    inset-inline-start: auto;\n    inset-inline-end: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-end::before {\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-end::after {\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n  &.-color-inverse {\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::before {\n    border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::after {\n    border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-bottom::before {\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-bottom::after {\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-start::before {\n    border-top-color: transparent;\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-start::after {\n    border-top-color: transparent;\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-end::before {\n    border-top-color: transparent;\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-end::after {\n    border-top-color: transparent;\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  /* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n     above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n     and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n     supported; elsewhere the UA centres it. */\n  &[popover] {\n    position: fixed;\n    overflow: visible;\n    margin: 0;\n  }\n\n  &[popover]:not(:popover-open) {\n    display: none;\n  }\n\n  /* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n     popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n     trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n  @supports (position-area: block-end) {\n    &[popover] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n}\n"
+	"rebrand": "/**\n * @component context-view\n * @selector .pfx-context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @remarks The caret is two stacked `::before`/`::after` triangles (border then fill) so it reads correctly against a matching surface; as a `[popover]` it needs the same open/`popovertarget` wiring as `popover`, but unlike `tooltip`, it dismisses on outside click or Escape.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n@scope (.pfx-context-view) {\n  & {\n    position: relative;\n    display: inline-block;\n    padding: var(--instui-spacing-space-md);\n    background: var(--instui-color-background-elevated-surface-base);\n    color: var(--instui-color-text-base);\n    border: var(--instui-component-context-view-arrow-border-width) solid\n      var(--instui-component-context-view-arrow-border-color);\n    border-radius: var(--instui-component-context-view-border-radius);\n    /* ContextView floats over content — InstUI gives it a shadow. */\n    box-shadow: var(--instui-elevation-above);\n  }\n\n  /* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n     ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n     without it, a surface-coloured caret is invisible against a matching surface. */\n  &::before,\n  &::after {\n    content: \"\";\n    position: absolute;\n    border-style: solid;\n    border-color: transparent;\n  }\n\n  /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n     pointing down. */\n  &::before {\n    top: 100%;\n    inset-inline-start: calc(\n      var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n    );\n    border-top-color: var(--instui-component-context-view-arrow-border-color);\n    border-width: calc(\n      var(--instui-component-context-view-arrow-size) +\n        var(--instui-component-context-view-arrow-border-width)\n    );\n  }\n\n  &::after {\n    top: 100%;\n    inset-inline-start: var(--instui-spacing-space-lg);\n    border-width: var(--instui-component-context-view-arrow-size);\n    border-top-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"bottom\": caret on the top edge, pointing up. */\n  &.-placement-bottom::before {\n    top: auto;\n    bottom: 100%;\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-bottom::after {\n    top: auto;\n    bottom: 100%;\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n  &.-placement-start::before,\n  &.-placement-start::after {\n    top: 50%;\n    inset-inline-start: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-start::before {\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-start::after {\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n  &.-placement-end::before,\n  &.-placement-end::after {\n    top: 50%;\n    inset-inline-start: auto;\n    inset-inline-end: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-end::before {\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-end::after {\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n  &.-color-inverse {\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::before {\n    border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::after {\n    border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-bottom::before {\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-bottom::after {\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-start::before {\n    border-top-color: transparent;\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-start::after {\n    border-top-color: transparent;\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-end::before {\n    border-top-color: transparent;\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-end::after {\n    border-top-color: transparent;\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  /* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n     above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n     and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n     supported; elsewhere the UA centres it. */\n  &[popover] {\n    position: fixed;\n    overflow: visible;\n    margin: 0;\n  }\n\n  &[popover]:not(:popover-open) {\n    display: none;\n  }\n\n  /* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n     popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n     trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n  @supports (position-area: block-end) {\n    &[popover] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n}\n",
+	"canvas": "/**\n * @component context-view\n * @selector .pfx-context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @remarks The caret is two stacked `::before`/`::after` triangles (border then fill) so it reads correctly against a matching surface; as a `[popover]` it needs the same open/`popovertarget` wiring as `popover`, but unlike `tooltip`, it dismisses on outside click or Escape.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n@scope (.pfx-context-view) {\n  & {\n    position: relative;\n    display: inline-block;\n    padding: var(--instui-spacing-space-md);\n    background: var(--instui-color-background-elevated-surface-base);\n    color: var(--instui-color-text-base);\n    border: var(--instui-component-context-view-arrow-border-width) solid\n      var(--instui-component-context-view-arrow-border-color);\n    border-radius: var(--instui-component-context-view-border-radius);\n    /* ContextView floats over content — InstUI gives it a shadow. */\n    box-shadow: var(--instui-elevation-above);\n  }\n\n  /* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n     ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n     without it, a surface-coloured caret is invisible against a matching surface. */\n  &::before,\n  &::after {\n    content: \"\";\n    position: absolute;\n    border-style: solid;\n    border-color: transparent;\n  }\n\n  /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n     pointing down. */\n  &::before {\n    top: 100%;\n    inset-inline-start: calc(\n      var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n    );\n    border-top-color: var(--instui-component-context-view-arrow-border-color);\n    border-width: calc(\n      var(--instui-component-context-view-arrow-size) +\n        var(--instui-component-context-view-arrow-border-width)\n    );\n  }\n\n  &::after {\n    top: 100%;\n    inset-inline-start: var(--instui-spacing-space-lg);\n    border-width: var(--instui-component-context-view-arrow-size);\n    border-top-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"bottom\": caret on the top edge, pointing up. */\n  &.-placement-bottom::before {\n    top: auto;\n    bottom: 100%;\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-bottom::after {\n    top: auto;\n    bottom: 100%;\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n  &.-placement-start::before,\n  &.-placement-start::after {\n    top: 50%;\n    inset-inline-start: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-start::before {\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-start::after {\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n  &.-placement-end::before,\n  &.-placement-end::after {\n    top: 50%;\n    inset-inline-start: auto;\n    inset-inline-end: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-end::before {\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-end::after {\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n  &.-color-inverse {\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::before {\n    border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::after {\n    border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-bottom::before {\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-bottom::after {\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-start::before {\n    border-top-color: transparent;\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-start::after {\n    border-top-color: transparent;\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-end::before {\n    border-top-color: transparent;\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-end::after {\n    border-top-color: transparent;\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  /* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n     above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n     and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n     supported; elsewhere the UA centres it. */\n  &[popover] {\n    position: fixed;\n    overflow: visible;\n    margin: 0;\n  }\n\n  &[popover]:not(:popover-open) {\n    display: none;\n  }\n\n  /* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n     popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n     trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n  @supports (position-area: block-end) {\n    &[popover] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component context-view\n * @selector .pfx-context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @remarks The caret is two stacked `::before`/`::after` triangles (border then fill) so it reads correctly against a matching surface; as a `[popover]` it needs the same open/`popovertarget` wiring as `popover`, but unlike `tooltip`, it dismisses on outside click or Escape.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n@scope (.pfx-context-view) {\n  & {\n    position: relative;\n    display: inline-block;\n    padding: var(--instui-spacing-space-md);\n    background: var(--instui-color-background-elevated-surface-base);\n    color: var(--instui-color-text-base);\n    border: var(--instui-component-context-view-arrow-border-width) solid\n      var(--instui-component-context-view-arrow-border-color);\n    border-radius: var(--instui-component-context-view-border-radius);\n    /* ContextView floats over content — InstUI gives it a shadow. */\n    box-shadow: var(--instui-elevation-above);\n  }\n\n  /* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n     ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n     without it, a surface-coloured caret is invisible against a matching surface. */\n  &::before,\n  &::after {\n    content: \"\";\n    position: absolute;\n    border-style: solid;\n    border-color: transparent;\n  }\n\n  /* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n     pointing down. */\n  &::before {\n    top: 100%;\n    inset-inline-start: calc(\n      var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n    );\n    border-top-color: var(--instui-component-context-view-arrow-border-color);\n    border-width: calc(\n      var(--instui-component-context-view-arrow-size) +\n        var(--instui-component-context-view-arrow-border-width)\n    );\n  }\n\n  &::after {\n    top: 100%;\n    inset-inline-start: var(--instui-spacing-space-lg);\n    border-width: var(--instui-component-context-view-arrow-size);\n    border-top-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"bottom\": caret on the top edge, pointing up. */\n  &.-placement-bottom::before {\n    top: auto;\n    bottom: 100%;\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-bottom::after {\n    top: auto;\n    bottom: 100%;\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n  &.-placement-start::before,\n  &.-placement-start::after {\n    top: 50%;\n    inset-inline-start: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-start::before {\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-start::after {\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n  &.-placement-end::before,\n  &.-placement-end::after {\n    top: 50%;\n    inset-inline-start: auto;\n    inset-inline-end: 100%;\n    transform: translateY(-50%);\n    border-top-color: transparent;\n  }\n\n  &.-placement-end::before {\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n  }\n\n  &.-placement-end::after {\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n  }\n\n  /* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n  &.-color-inverse {\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::before {\n    border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse::after {\n    border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-bottom::before {\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-bottom::after {\n    border-top-color: transparent;\n    border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-start::before {\n    border-top-color: transparent;\n    border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-start::after {\n    border-top-color: transparent;\n    border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  &.-color-inverse.-placement-end::before {\n    border-top-color: transparent;\n    border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n  }\n\n  &.-color-inverse.-placement-end::after {\n    border-top-color: transparent;\n    border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n  }\n\n  /* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n     above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n     and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n     supported; elsewhere the UA centres it. */\n  &[popover] {\n    position: fixed;\n    overflow: visible;\n    margin: 0;\n  }\n\n  &[popover]:not(:popover-open) {\n    display: none;\n  }\n\n  /* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n     popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n     trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n  @supports (position-area: block-end) {\n    &[popover] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n}\n"
 }.rebrand;
 const drawerLayout$1 = {
 	"rebrand": "/**\n * @component drawer-layout\n * @selector .pfx-drawer-layout\n * @summary A split layout with a collapsible side tray and a primary scrollable content pane.\n * @modifier -placement-start — Dock the tray on the inline-start side (the default; sets it explicitly).\n * @modifier -placement-end — Dock the tray on the inline-end side.\n * @modifier -should-overlay-tray — @interaction Render the tray as an overlay instead of shrinking content inline.\n * @modifier -open — Show the tray even when the `open` attribute is absent.        \n * @part .tray — The side panel.\n * @part .content — The main pane.\n * @cssproperty --pantoken-bp-md — Width threshold for overlay mode (`30em`, themed via responsive utilities).\n * @remarks This record defines layout, placement, and open-state gates; the tray surface and content scrolling live in the `drawer-layout.tray` and `drawer-layout.content` members.\n * @remarks The tray stays hidden until `open` (attribute) or `-open` (class) is present.\n * @remarks A `container-type: inline-size` container (named `pantoken-drawer-layout`) lets the `drawer-layout.tray`/`drawer-layout.content` members auto-detect overlay mode from this element's own computed inline-size — no JS required for the visual switch.\n * @remarks `-placement-end` and the default (start) both use `flex-direction`/`inset-inline-*` logical properties, not `left`/`right`, so the tray's side follows `direction`/`dir=\"rtl\"` automatically — no separate RTL rules are needed.\n * @accessibility When the tray acts as navigation, label it with an accessible heading or `aria-label`. Give `.content` `role=\"region\"` (InstUI's DrawerLayout convention) and name it with `aria-label`/`aria-labelledby` when context alone doesn't identify it.\n * @compat The `drawer-layout.tray`/`drawer-layout.content` members switch to overlay mode automatically via a `@container` query once this element's inline-size drops below tray-width + `--pantoken-bp-md`. The `@pantoken/interactions` behavior additionally toggles `[should-overlay-tray]`/`.-should-overlay-tray` (a manual override) and emits `overlaytraychange` for apps that need the change as an event.\n * @example\n * ```html\n * <div class=\"pfx-drawer-layout\" id=\"drawer\" open>\n *   <aside class=\"tray\">Navigation</aside>\n *   <main class=\"content\" role=\"region\">Main content</main>\n * </div>\n * ```\n * @structure\n * .pfx-drawer-layout {\n *   @member tray {}\n *   @member content {}\n * }\n * @related tray — A standalone edge overlay; this layout keeps tray and content in the same flow.\n * @related context-view — A smaller anchored surface for contextual actions and detail.\n */\n\n@scope (.pfx-drawer-layout) {\n  :scope {\n    display: flex;\n    block-size: 100%;\n    position: relative;\n    /* Named so the tray/content members can query this element's own width, not an unrelated ancestor. */\n    container: pantoken-drawer-layout / inline-size;\n\n    &[placement=\"start\"],\n    &.-placement-start {\n      flex-direction: row;\n    }\n\n    &[placement=\"end\"],\n    &.-placement-end {\n      flex-direction: row-reverse;\n    }\n\n    &:not([open]):not(.-open) > .tray {\n      display: none;\n    }\n\n    &[should-overlay-tray],\n    &.-should-overlay-tray {\n      min-inline-size: 0;\n    }\n  }\n}\n",
@@ -368,9 +368,9 @@ const drawerLayoutTray$1 = {
 	"canvasHighContrast": "/**\n * @component drawer-layout.tray\n * @memberOf drawer-layout\n * @selector .tray\n * @summary The side panel beside main content, with optional overlay and tray-like surface modifiers.\n * @modifier -placement-end — Dock this tray to inline-end when overlay mode is active.\n * @modifier -without-border — Remove the panel edge border.\n * @modifier -without-shadow — Remove elevation when overlay mode is active.\n * @remarks Inline mode keeps the tray in flex flow; overlay mode (set on `drawer-layout`) absolutely positions it above content.\n * @remarks Overlay mode also applies automatically — via a `@container` query on the parent's `pantoken-drawer-layout` container — once the parent's inline-size drops below `46em` (`16em` tray width + `30em` breakpoint).\n * @remarks Positioning uses `inset-inline-start`/`inset-inline` (never `left`/`right`), so `-placement-end` docks to the true trailing edge in both LTR and RTL.\n * @accessibility If used as navigation, wrap links in a semantic `<nav>` and provide an accessible name.\n * @related drawer-layout.content — The primary pane that flexes alongside this member.\n * @example\n * ```html\n * <div class=\"pfx-drawer-layout\" open>\n *   <aside class=\"tray\" aria-label=\"Course navigation\">\n *     <a class=\"pfx-link\" href=\"#\">Modules</a>\n *   </aside>\n *   <main class=\"content\" role=\"region\">Main content</main>\n * </div>\n * ```\n * @structure\n * @scope (@component drawer-layout) {\n *   .tray {\n *     slot {}\n *   }\n * }\n */\n\n@scope (.pfx-drawer-layout) {\n  :scope {\n    > .tray {\n      flex: 0 0 var(--instui-component-tray-width-xs, 16em);\n      inline-size: var(--drawer-layout-tray-width, var(--instui-component-tray-width-xs, 16em));\n      max-inline-size: 100%;\n      overflow: auto;\n      background: var(--instui-color-background-elevated-surface-base);\n      border-inline-end: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n    }\n\n    > .tray.-without-border {\n      border-inline: 0;\n    }\n\n    &[should-overlay-tray] > .tray,\n    &.-should-overlay-tray > .tray {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: 0;\n      z-index: var(--instui-component-tray-z-index, 9999);\n      box-shadow: var(--instui-elevation-topmost);\n    }\n\n    &[should-overlay-tray] > .tray.-placement-end,\n    &.-should-overlay-tray > .tray.-placement-end,\n    &[should-overlay-tray][placement=\"end\"] > .tray,\n    &.-should-overlay-tray[placement=\"end\"] > .tray,\n    &[should-overlay-tray].-placement-end > .tray,\n    &.-should-overlay-tray.-placement-end > .tray {\n      inset-inline: auto 0;\n    }\n\n    &[should-overlay-tray] > .tray.-without-shadow,\n    &.-should-overlay-tray > .tray.-without-shadow {\n      box-shadow: none;\n    }\n  }\n}\n\n/* Automatic overlay: no JS required. 46em = 16em tray width + 30em content breakpoint. */\n@container pantoken-drawer-layout (max-width: 46em) {\n  .pfx-drawer-layout > .tray {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    z-index: var(--instui-component-tray-z-index, 1);\n    box-shadow: var(--instui-elevation-topmost);\n  }\n\n  .pfx-drawer-layout > .tray.-placement-end,\n  .pfx-drawer-layout[placement=\"end\"] > .tray,\n  .pfx-drawer-layout.-placement-end > .tray {\n    inset-inline: auto 0;\n  }\n\n  .pfx-drawer-layout > .tray.-without-shadow {\n    box-shadow: none;\n  }\n}\n"
 }.rebrand;
 const fileDrop$1 = {
-	"rebrand": "/**\n * @component file-drop\n * @selector .pfx-file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n *   <span class=\"pfx-icon -icon-cloud-upload\"></span>\n *   <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n *   <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n *   <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n *   [class*=\"-icon-\"]:optional {}\n *   .pfx-text {\n *     strong {}\n *   }\n *   .pfx-text {}\n *   input {}\n * }\n */\n@scope (.pfx-file-drop) {\n  & {\n    display: block;\n    text-align: center;\n    padding: var(--instui-spacing-space-lg);\n    color: var(--instui-color-text-base);\n    background: var(--instui-component-file-drop-background-color);\n    border: var(--instui-component-file-drop-border-width)\n      var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n    border-radius: var(--instui-component-file-drop-border-radius);\n  }\n\n  &:hover,\n  &.-hover {\n    border-color: var(--instui-component-file-drop-hover-border-color);\n  }\n\n  &.-accepted {\n    border-color: var(--instui-component-file-drop-accepted-color);\n  }\n\n  &.-rejected {\n    border-color: var(--instui-component-file-drop-rejected-color);\n  }\n\n  & > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n}\n",
-	"canvas": "/**\n * @component file-drop\n * @selector .pfx-file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n *   <span class=\"pfx-icon -icon-cloud-upload\"></span>\n *   <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n *   <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n *   <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n *   [class*=\"-icon-\"]:optional {}\n *   .pfx-text {\n *     strong {}\n *   }\n *   .pfx-text {}\n *   input {}\n * }\n */\n@scope (.pfx-file-drop) {\n  & {\n    display: block;\n    text-align: center;\n    padding: var(--instui-spacing-space-lg);\n    color: var(--instui-color-text-base);\n    background: var(--instui-component-file-drop-background-color);\n    border: var(--instui-component-file-drop-border-width)\n      var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n    border-radius: var(--instui-component-file-drop-border-radius);\n  }\n\n  &:hover,\n  &.-hover {\n    border-color: var(--instui-component-file-drop-hover-border-color);\n  }\n\n  &.-accepted {\n    border-color: var(--instui-component-file-drop-accepted-color);\n  }\n\n  &.-rejected {\n    border-color: var(--instui-component-file-drop-rejected-color);\n  }\n\n  & > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component file-drop\n * @selector .pfx-file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n *   <span class=\"pfx-icon -icon-cloud-upload\"></span>\n *   <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n *   <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n *   <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n *   [class*=\"-icon-\"]:optional {}\n *   .pfx-text {\n *     strong {}\n *   }\n *   .pfx-text {}\n *   input {}\n * }\n */\n@scope (.pfx-file-drop) {\n  & {\n    display: block;\n    text-align: center;\n    padding: var(--instui-spacing-space-lg);\n    color: var(--instui-color-text-base);\n    background: var(--instui-component-file-drop-background-color);\n    border: var(--instui-component-file-drop-border-width)\n      var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n    border-radius: var(--instui-component-file-drop-border-radius);\n  }\n\n  &:hover,\n  &.-hover {\n    border-color: var(--instui-component-file-drop-hover-border-color);\n  }\n\n  &.-accepted {\n    border-color: var(--instui-component-file-drop-accepted-color);\n  }\n\n  &.-rejected {\n    border-color: var(--instui-component-file-drop-rejected-color);\n  }\n\n  & > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n}\n"
+	"rebrand": "/**\n * @component file-drop\n * @selector .pfx-file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @remarks The `-hover`/`-accepted`/`-rejected` classes are purely visual — actual drag-and-drop detection and file validation are the consumer's JS to wire up around the wrapped native input.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n *   <span class=\"pfx-icon -icon-cloud-upload\"></span>\n *   <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n *   <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n *   <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n *   [class*=\"-icon-\"]:optional {}\n *   .pfx-text {\n *     strong {}\n *   }\n *   .pfx-text {}\n *   input {}\n * }\n */\n@scope (.pfx-file-drop) {\n  & {\n    display: block;\n    text-align: center;\n    padding: var(--instui-spacing-space-lg);\n    color: var(--instui-color-text-base);\n    background: var(--instui-component-file-drop-background-color);\n    border: var(--instui-component-file-drop-border-width)\n      var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n    border-radius: var(--instui-component-file-drop-border-radius);\n  }\n\n  &:hover,\n  &.-hover {\n    border-color: var(--instui-component-file-drop-hover-border-color);\n  }\n\n  &.-accepted {\n    border-color: var(--instui-component-file-drop-accepted-color);\n  }\n\n  &.-rejected {\n    border-color: var(--instui-component-file-drop-rejected-color);\n  }\n\n  & > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n}\n",
+	"canvas": "/**\n * @component file-drop\n * @selector .pfx-file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @remarks The `-hover`/`-accepted`/`-rejected` classes are purely visual — actual drag-and-drop detection and file validation are the consumer's JS to wire up around the wrapped native input.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n *   <span class=\"pfx-icon -icon-cloud-upload\"></span>\n *   <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n *   <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n *   <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n *   [class*=\"-icon-\"]:optional {}\n *   .pfx-text {\n *     strong {}\n *   }\n *   .pfx-text {}\n *   input {}\n * }\n */\n@scope (.pfx-file-drop) {\n  & {\n    display: block;\n    text-align: center;\n    padding: var(--instui-spacing-space-lg);\n    color: var(--instui-color-text-base);\n    background: var(--instui-component-file-drop-background-color);\n    border: var(--instui-component-file-drop-border-width)\n      var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n    border-radius: var(--instui-component-file-drop-border-radius);\n  }\n\n  &:hover,\n  &.-hover {\n    border-color: var(--instui-component-file-drop-hover-border-color);\n  }\n\n  &.-accepted {\n    border-color: var(--instui-component-file-drop-accepted-color);\n  }\n\n  &.-rejected {\n    border-color: var(--instui-component-file-drop-rejected-color);\n  }\n\n  & > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component file-drop\n * @selector .pfx-file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @remarks The `-hover`/`-accepted`/`-rejected` classes are purely visual — actual drag-and-drop detection and file validation are the consumer's JS to wire up around the wrapped native input.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n *   <span class=\"pfx-icon -icon-cloud-upload\"></span>\n *   <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n *   <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n *   <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n *   [class*=\"-icon-\"]:optional {}\n *   .pfx-text {\n *     strong {}\n *   }\n *   .pfx-text {}\n *   input {}\n * }\n */\n@scope (.pfx-file-drop) {\n  & {\n    display: block;\n    text-align: center;\n    padding: var(--instui-spacing-space-lg);\n    color: var(--instui-color-text-base);\n    background: var(--instui-component-file-drop-background-color);\n    border: var(--instui-component-file-drop-border-width)\n      var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n    border-radius: var(--instui-component-file-drop-border-radius);\n  }\n\n  &:hover,\n  &.-hover {\n    border-color: var(--instui-component-file-drop-hover-border-color);\n  }\n\n  &.-accepted {\n    border-color: var(--instui-component-file-drop-accepted-color);\n  }\n\n  &.-rejected {\n    border-color: var(--instui-component-file-drop-rejected-color);\n  }\n\n  & > [class*=\"-icon-\"] {\n    line-height: 1;\n  }\n}\n"
 }.rebrand;
 const formField$1 = {
 	"rebrand": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above. Also sets its own `gap` between the label, controls, and messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n *   <span class=\"label\">Email address</span>\n *   <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n *   <div class=\"pfx-form-field-messages\">\n *     <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *     <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n *   </div>\n * </label>\n * @structure\n * .pfx-form-field {\n *   .label {}\n *   .controls {\n *     .pfx-text-input {}\n *   }\n *   .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n  gap: var(--instui-component-form-field-layout-gap-inputs);\n  color: var(--instui-component-form-field-layout-text-color);\n  font-family: var(--instui-component-form-field-layout-font-family);\n}\n\n@scope (.pfx-form-field) {\n  :scope {\n    > .label {\n      grid-area: label;\n      color: var(--instui-component-form-field-layout-text-color);\n      font-family: var(--instui-component-form-field-layout-font-family);\n      font-weight: var(--instui-component-form-field-layout-font-weight);\n      font-size: var(--instui-component-form-field-layout-font-size);\n      line-height: var(--instui-component-form-field-layout-line-height);\n    }\n\n    > .controls {\n      grid-area: controls;\n    }\n  }\n}\n\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n  grid-area: messages;\n}\n\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n   (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n   control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n  display: none;\n}\n\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n  display: inline-flex;\n}\n\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n  content: \"*\";\n  margin-inline-start: 0.25rem;\n  color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n.pfx-form-field.-readonly .label {\n  color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n\n.pfx-form-field.-layout-stacked {\n  grid-template-columns: 1fr;\n  grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n\n.pfx-form-field.-layout-inline {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"label controls\" \". messages\";\n  align-items: center;\n  column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n\n.pfx-form-field.-layout-inline.-v-align-top {\n  align-items: start;\n}\n\n.pfx-form-field.-layout-inline.-v-align-bottom {\n  align-items: end;\n}\n\n.pfx-form-field.-layout-inline.-label-align-start .label {\n  text-align: start;\n}\n\n.pfx-form-field.-layout-inline.-label-align-end .label {\n  text-align: end;\n}\n\n.pfx-form-field.-inline {\n  display: inline-grid;\n  inline-size: auto;\n}\n",
@@ -388,14 +388,14 @@ const formFieldMessages$1 = {
 	"canvasHighContrast": "/**\n * @component form-field-messages\n * @selector .pfx-form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @remarks Sets its own `gap` between stacked messages; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -type-new-error — @alias {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n *   <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n *   <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n *   .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n@scope (.pfx-form-field-messages) {\n  & {\n    display: flex;\n    flex-direction: column;\n    gap: var(--instui-component-form-field-layout-gap-primitives);\n  }\n}\n\n@scope (.pfx-form-field-message) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25rem;\n    font-family: var(--instui-component-form-field-message-font-family);\n    font-size: var(--instui-component-form-field-message-font-size);\n    font-weight: var(--instui-component-form-field-message-font-weight);\n    line-height: var(--instui-component-form-field-message-line-height);\n    color: var(--instui-component-form-field-message-hint-text-color);\n  }\n\n  &.-type-hint {\n    color: var(--instui-component-form-field-message-hint-text-color);\n  }\n\n  &.-type-error {\n    color: var(--instui-component-form-field-message-error-text-color);\n  }\n\n  &.-type-success {\n    color: var(--instui-component-form-field-message-success-text-color);\n  }\n\n  &.-type-error::before,\n  &.-type-success::before {\n    content: \"\";\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    background: currentColor;\n  }\n\n  &.-type-error::before {\n    -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n    mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n  }\n\n  &.-type-success::before {\n    -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n    mask: var(--instui-icon-circle-check) center / contain no-repeat;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- clip pattern required inline for individual importability */\n  &.-type-screenreader-only {\n    position: absolute;\n    inline-size: 1px;\n    block-size: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n"
 }.rebrand;
 const img$1 = {
-	"rebrand": "/**\n * @component img\n * @selector .pfx-img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n@scope (.pfx-img) {\n  & {\n    display: inline-block;\n    max-inline-size: 100%;\n    block-size: auto;\n    --pantoken-img-filter: none;\n    filter: var(--pantoken-img-filter);\n    transition: filter var(--instui-component-img-effect-transition-duration) ease;\n  }\n\n  &.-display-block {\n    display: block;\n  }\n\n  /* constrain: fill a sized box (the consumer sets width/height). */\n  &.-constrain-cover {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  &.-constrain-contain {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* Effects compose through the custom property, so grayscale + blur can apply together. */\n  &.-with-grayscale {\n    --pantoken-img-filter: grayscale(1);\n  }\n\n  &.-with-blur {\n    --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n  }\n\n  &.-with-grayscale.-with-blur {\n    --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n  }\n}\n",
-	"canvas": "/**\n * @component img\n * @selector .pfx-img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n@scope (.pfx-img) {\n  & {\n    display: inline-block;\n    max-inline-size: 100%;\n    block-size: auto;\n    --pantoken-img-filter: none;\n    filter: var(--pantoken-img-filter);\n    transition: filter var(--instui-component-img-effect-transition-duration) ease;\n  }\n\n  &.-display-block {\n    display: block;\n  }\n\n  /* constrain: fill a sized box (the consumer sets width/height). */\n  &.-constrain-cover {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  &.-constrain-contain {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* Effects compose through the custom property, so grayscale + blur can apply together. */\n  &.-with-grayscale {\n    --pantoken-img-filter: grayscale(1);\n  }\n\n  &.-with-blur {\n    --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n  }\n\n  &.-with-grayscale.-with-blur {\n    --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component img\n * @selector .pfx-img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n@scope (.pfx-img) {\n  & {\n    display: inline-block;\n    max-inline-size: 100%;\n    block-size: auto;\n    --pantoken-img-filter: none;\n    filter: var(--pantoken-img-filter);\n    transition: filter var(--instui-component-img-effect-transition-duration) ease;\n  }\n\n  &.-display-block {\n    display: block;\n  }\n\n  /* constrain: fill a sized box (the consumer sets width/height). */\n  &.-constrain-cover {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  &.-constrain-contain {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* Effects compose through the custom property, so grayscale + blur can apply together. */\n  &.-with-grayscale {\n    --pantoken-img-filter: grayscale(1);\n  }\n\n  &.-with-blur {\n    --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n  }\n\n  &.-with-grayscale.-with-blur {\n    --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n  }\n}\n"
+	"rebrand": "/**\n * @component img\n * @selector .pfx-img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @remarks Effects compose through the shared `--pantoken-img-filter` custom property, so `-with-grayscale` and `-with-blur` can apply together; the `-constrain-*` crop modifiers require the consumer to size the box explicitly.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n@scope (.pfx-img) {\n  & {\n    display: inline-block;\n    max-inline-size: 100%;\n    block-size: auto;\n    --pantoken-img-filter: none;\n    filter: var(--pantoken-img-filter);\n    transition: filter var(--instui-component-img-effect-transition-duration) ease;\n  }\n\n  &.-display-block {\n    display: block;\n  }\n\n  /* constrain: fill a sized box (the consumer sets width/height). */\n  &.-constrain-cover {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  &.-constrain-contain {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* Effects compose through the custom property, so grayscale + blur can apply together. */\n  &.-with-grayscale {\n    --pantoken-img-filter: grayscale(1);\n  }\n\n  &.-with-blur {\n    --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n  }\n\n  &.-with-grayscale.-with-blur {\n    --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n  }\n}\n",
+	"canvas": "/**\n * @component img\n * @selector .pfx-img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @remarks Effects compose through the shared `--pantoken-img-filter` custom property, so `-with-grayscale` and `-with-blur` can apply together; the `-constrain-*` crop modifiers require the consumer to size the box explicitly.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n@scope (.pfx-img) {\n  & {\n    display: inline-block;\n    max-inline-size: 100%;\n    block-size: auto;\n    --pantoken-img-filter: none;\n    filter: var(--pantoken-img-filter);\n    transition: filter var(--instui-component-img-effect-transition-duration) ease;\n  }\n\n  &.-display-block {\n    display: block;\n  }\n\n  /* constrain: fill a sized box (the consumer sets width/height). */\n  &.-constrain-cover {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  &.-constrain-contain {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* Effects compose through the custom property, so grayscale + blur can apply together. */\n  &.-with-grayscale {\n    --pantoken-img-filter: grayscale(1);\n  }\n\n  &.-with-blur {\n    --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n  }\n\n  &.-with-grayscale.-with-blur {\n    --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component img\n * @selector .pfx-img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @remarks Effects compose through the shared `--pantoken-img-filter` custom property, so `-with-grayscale` and `-with-blur` can apply together; the `-constrain-*` crop modifiers require the consumer to size the box explicitly.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n@scope (.pfx-img) {\n  & {\n    display: inline-block;\n    max-inline-size: 100%;\n    block-size: auto;\n    --pantoken-img-filter: none;\n    filter: var(--pantoken-img-filter);\n    transition: filter var(--instui-component-img-effect-transition-duration) ease;\n  }\n\n  &.-display-block {\n    display: block;\n  }\n\n  /* constrain: fill a sized box (the consumer sets width/height). */\n  &.-constrain-cover {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  &.-constrain-contain {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: contain;\n  }\n\n  /* Effects compose through the custom property, so grayscale + blur can apply together. */\n  &.-with-grayscale {\n    --pantoken-img-filter: grayscale(1);\n  }\n\n  &.-with-blur {\n    --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n  }\n\n  &.-with-grayscale.-with-blur {\n    --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n  }\n}\n"
 }.rebrand;
 const inPlaceEdit$1 = {
-	"rebrand": "/**\n * @component in-place-edit\n * @selector .pfx-in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n@scope (.pfx-in-place-edit) {\n  & {\n    display: inline-block;\n    min-inline-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    border: var(--instui-component-text-input-border-width) solid transparent;\n    border-radius: var(--instui-component-text-input-border-radius);\n    color: var(--instui-color-text-base);\n    font: inherit;\n    cursor: text;\n  }\n\n  /* Hover affordance: it's editable. */\n  &:hover {\n    background: var(--instui-color-background-muted);\n  }\n\n  /* Focus = edit mode: input chrome + the focus ring. */\n  &:focus {\n    background: var(--instui-component-text-input-background-color);\n    border-color: var(--instui-component-text-input-border-color);\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n      var(--instui-focus-outline-color);\n    outline-offset: var(--instui-focus-outline-offset);\n  }\n\n  &.-readonly {\n    cursor: default;\n  }\n\n  &.-readonly:hover {\n    background: transparent;\n  }\n}\n",
-	"canvas": "/**\n * @component in-place-edit\n * @selector .pfx-in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n@scope (.pfx-in-place-edit) {\n  & {\n    display: inline-block;\n    min-inline-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    border: var(--instui-component-text-input-border-width) solid transparent;\n    border-radius: var(--instui-component-text-input-border-radius);\n    color: var(--instui-color-text-base);\n    font: inherit;\n    cursor: text;\n  }\n\n  /* Hover affordance: it's editable. */\n  &:hover {\n    background: var(--instui-color-background-muted);\n  }\n\n  /* Focus = edit mode: input chrome + the focus ring. */\n  &:focus {\n    background: var(--instui-component-text-input-background-color);\n    border-color: var(--instui-component-text-input-border-color);\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n      var(--instui-focus-outline-color);\n    outline-offset: var(--instui-focus-outline-offset);\n  }\n\n  &.-readonly {\n    cursor: default;\n  }\n\n  &.-readonly:hover {\n    background: transparent;\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component in-place-edit\n * @selector .pfx-in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n@scope (.pfx-in-place-edit) {\n  & {\n    display: inline-block;\n    min-inline-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    border: var(--instui-component-text-input-border-width) solid transparent;\n    border-radius: var(--instui-component-text-input-border-radius);\n    color: var(--instui-color-text-base);\n    font: inherit;\n    cursor: text;\n  }\n\n  /* Hover affordance: it's editable. */\n  &:hover {\n    background: var(--instui-color-background-muted);\n  }\n\n  /* Focus = edit mode: input chrome + the focus ring. */\n  &:focus {\n    background: var(--instui-component-text-input-background-color);\n    border-color: var(--instui-component-text-input-border-color);\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n      var(--instui-focus-outline-color);\n    outline-offset: var(--instui-focus-outline-offset);\n  }\n\n  &.-readonly {\n    cursor: default;\n  }\n\n  &.-readonly:hover {\n    background: transparent;\n  }\n}\n"
+	"rebrand": "/**\n * @component in-place-edit\n * @selector .pfx-in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @remarks The input chrome only appears while focused; `-readonly` suppresses both the hover and focus affordances so the element always reads as plain inline text.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n@scope (.pfx-in-place-edit) {\n  & {\n    display: inline-block;\n    min-inline-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    border: var(--instui-component-text-input-border-width) solid transparent;\n    border-radius: var(--instui-component-text-input-border-radius);\n    color: var(--instui-color-text-base);\n    font: inherit;\n    cursor: text;\n  }\n\n  /* Hover affordance: it's editable. */\n  &:hover {\n    background: var(--instui-color-background-muted);\n  }\n\n  /* Focus = edit mode: input chrome + the focus ring. */\n  &:focus {\n    background: var(--instui-component-text-input-background-color);\n    border-color: var(--instui-component-text-input-border-color);\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n      var(--instui-focus-outline-color);\n    outline-offset: var(--instui-focus-outline-offset);\n  }\n\n  &.-readonly {\n    cursor: default;\n  }\n\n  &.-readonly:hover {\n    background: transparent;\n  }\n}\n",
+	"canvas": "/**\n * @component in-place-edit\n * @selector .pfx-in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @remarks The input chrome only appears while focused; `-readonly` suppresses both the hover and focus affordances so the element always reads as plain inline text.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n@scope (.pfx-in-place-edit) {\n  & {\n    display: inline-block;\n    min-inline-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    border: var(--instui-component-text-input-border-width) solid transparent;\n    border-radius: var(--instui-component-text-input-border-radius);\n    color: var(--instui-color-text-base);\n    font: inherit;\n    cursor: text;\n  }\n\n  /* Hover affordance: it's editable. */\n  &:hover {\n    background: var(--instui-color-background-muted);\n  }\n\n  /* Focus = edit mode: input chrome + the focus ring. */\n  &:focus {\n    background: var(--instui-component-text-input-background-color);\n    border-color: var(--instui-component-text-input-border-color);\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n      var(--instui-focus-outline-color);\n    outline-offset: var(--instui-focus-outline-offset);\n  }\n\n  &.-readonly {\n    cursor: default;\n  }\n\n  &.-readonly:hover {\n    background: transparent;\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component in-place-edit\n * @selector .pfx-in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @remarks The input chrome only appears while focused; `-readonly` suppresses both the hover and focus affordances so the element always reads as plain inline text.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n@scope (.pfx-in-place-edit) {\n  & {\n    display: inline-block;\n    min-inline-size: 2rem;\n    padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n    border: var(--instui-component-text-input-border-width) solid transparent;\n    border-radius: var(--instui-component-text-input-border-radius);\n    color: var(--instui-color-text-base);\n    font: inherit;\n    cursor: text;\n  }\n\n  /* Hover affordance: it's editable. */\n  &:hover {\n    background: var(--instui-color-background-muted);\n  }\n\n  /* Focus = edit mode: input chrome + the focus ring. */\n  &:focus {\n    background: var(--instui-component-text-input-background-color);\n    border-color: var(--instui-component-text-input-border-color);\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n      var(--instui-focus-outline-color);\n    outline-offset: var(--instui-focus-outline-offset);\n  }\n\n  &.-readonly {\n    cursor: default;\n  }\n\n  &.-readonly:hover {\n    background: transparent;\n  }\n}\n"
 }.rebrand;
 const link$1 = {
 	"rebrand": "/**\n * @component link\n * @selector .pfx-link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @remarks Sets its own responsive `gap` between an icon and its text (`-size-sm`/`-size-lg` scale it); chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links; also its small-screen fallback (pair with the `responsive` utility to swap Breadcrumb for a Link below ~768px).\n */\n@scope (.pfx-link) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--instui-component-link-gap-md);\n    color: var(--instui-component-link-text-color);\n    font-family: var(--instui-component-link-font-family);\n    font-size: var(--instui-component-link-font-size-md);\n    font-weight: var(--instui-component-link-font-weight);\n    line-height: var(--instui-component-link-line-height-md);\n    text-decoration: var(--instui-component-link-text-decoration-outside-text);\n    cursor: pointer;\n  }\n\n  &:hover {\n    color: var(--instui-component-link-text-hover-color);\n  }\n\n  &[aria-disabled=\"true\"] {\n    color: var(--instui-component-link-text-disabled-color);\n    cursor: not-allowed;\n  }\n\n  &.-size-sm {\n    gap: var(--instui-component-link-gap-sm);\n    font-size: var(--instui-component-link-font-size-sm);\n    line-height: var(--instui-component-link-line-height-sm);\n  }\n\n  &.-size-lg {\n    gap: var(--instui-component-link-gap-lg);\n    font-size: var(--instui-component-link-font-size-lg);\n    line-height: var(--instui-component-link-line-height-lg);\n  }\n}\n\n.pfx-link.-color-inverse {\n  color: var(--instui-component-link-on-color-text-color);\n}\n\n.pfx-link.-color-inverse:hover {\n  color: var(--instui-component-link-on-color-text-hover-color);\n}\n\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n  color: var(--instui-component-link-on-color-text-disabled-color);\n}\n\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n  display: inline;\n  font-family: var(--instui-component-link-inline-link-medium-font-family);\n  font-size: var(--instui-component-link-inline-link-medium-font-size);\n  font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n  line-height: var(--instui-component-link-inline-link-medium-line-height);\n  text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n\n.pfx-link.-inline.-sm {\n  font-size: var(--instui-component-link-inline-link-small-font-size);\n  font-weight: var(--instui-component-link-inline-link-small-font-weight);\n  line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n\n.pfx-link.-inline.-lg {\n  font-size: var(--instui-component-link-inline-link-large-font-size);\n  font-weight: var(--instui-component-link-inline-link-large-font-weight);\n  line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n\n.pfx-link.-unstyled {\n  color: var(--instui-component-link-unstyled-text-color);\n  text-decoration: none;\n}\n",
@@ -473,14 +473,14 @@ const paginationPage$1 = {
 	"canvasHighContrast": "/**\n * @component pagination.page\n * @memberOf pagination\n * @selector .page\n * @summary A page link or button (InstUI `Pagination.Page`); the current page carries `[aria-current]`.\n * @modifier -current — The current page; same styling as `[aria-current]`.\n * @cssstate current\n * @structure\n * @component pagination {\n *   .page {}\n * }\n */\n@scope (.pfx-pagination) {\n  :scope {\n    /* A page number — an <a> or <button>. Text-style primary button: brand text, no fill. */\n    > .page {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-inline-size: 2rem;\n      min-block-size: 2rem;\n      padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n      color: var(--instui-color-text-interactive-navigation-primary-base);\n      background: transparent;\n      border: var(--instui-border-width-md) solid transparent;\n      border-radius: var(--instui-component-base-button-border-radius);\n      font: inherit;\n      font-weight: var(--instui-font-weight-interactive);\n      text-decoration: none;\n      cursor: pointer;\n    }\n\n    > .page:hover {\n      background: var(--instui-color-background-muted);\n      color: var(--instui-color-text-interactive-navigation-primary-hover);\n    }\n\n    /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n    > .page[aria-current],\n    > .page.-current {\n      background: var(--instui-color-background-interactive-action-primary-base);\n      color: var(--instui-color-text-interactive-action-primary-base);\n      border-color: var(--instui-color-background-interactive-action-primary-base);\n    }\n\n    > .page[aria-current]:hover,\n    > .page.-current:hover {\n      background: var(--instui-color-background-interactive-action-primary-hover);\n      border-color: var(--instui-color-background-interactive-action-primary-hover);\n      color: var(--instui-color-text-interactive-action-primary-base);\n    }\n  }\n}\n"
 }.rebrand;
 const pill$1 = {
-	"rebrand": "/**\n * @component pill\n * @selector .pfx-pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n *   <span class=\"instui-pill -color-success -icon-check\">Published</span>\n *   <span class=\"instui-pill\">Draft</span>\n *   <span class=\"instui-pill -color-info\">In review</span>\n *   <span class=\"instui-pill -color-warning\">Stale</span>\n *   <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n@scope (.pfx-pill) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    height: var(--instui-component-pill-height);\n    max-width: var(--instui-component-pill-max-width);\n    padding: 0 var(--instui-component-pill-padding-horizontal);\n    background: var(--instui-component-pill-background-color);\n    color: var(--instui-component-pill-base-text-color);\n    border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n      var(--instui-component-pill-base-border-color);\n    border-radius: var(--instui-component-pill-border-radius);\n    font-family: var(--instui-component-pill-font-family);\n    font-size: var(--instui-component-pill-text-font-size);\n    font-weight: var(--instui-component-pill-text-font-weight);\n    line-height: var(--instui-component-pill-line-height);\n  }\n\n  /* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n     inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n  &[class*=\"-icon-\"]::before {\n    inline-size: var(--instui-font-size-text-xs);\n    block-size: var(--instui-font-size-text-xs);\n    margin-inline-end: 0.375rem;\n  }\n\n  &.-color-info {\n    color: var(--instui-component-pill-info-text-color);\n    border-color: var(--instui-component-pill-info-border-color);\n  }\n\n  &.-color-success {\n    color: var(--instui-component-pill-success-text-color);\n    border-color: var(--instui-component-pill-success-border-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-pill-warning-text-color);\n    border-color: var(--instui-component-pill-warning-border-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-pill-error-text-color);\n    border-color: var(--instui-component-pill-error-border-color);\n  }\n\n  &.-color-info,\n  &.-color-success,\n  &.-color-warning,\n  &.-color-danger {\n    font-weight: var(--instui-component-pill-status-label-font-weight);\n  }\n}\n",
-	"canvas": "/**\n * @component pill\n * @selector .pfx-pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n *   <span class=\"instui-pill -color-success -icon-check\">Published</span>\n *   <span class=\"instui-pill\">Draft</span>\n *   <span class=\"instui-pill -color-info\">In review</span>\n *   <span class=\"instui-pill -color-warning\">Stale</span>\n *   <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n@scope (.pfx-pill) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    height: var(--instui-component-pill-height);\n    max-width: var(--instui-component-pill-max-width);\n    padding: 0 var(--instui-component-pill-padding-horizontal);\n    background: var(--instui-component-pill-background-color);\n    color: var(--instui-component-pill-base-text-color);\n    border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n      var(--instui-component-pill-base-border-color);\n    border-radius: var(--instui-component-pill-border-radius);\n    font-family: var(--instui-component-pill-font-family);\n    font-size: var(--instui-component-pill-text-font-size);\n    font-weight: var(--instui-component-pill-text-font-weight);\n    line-height: var(--instui-component-pill-line-height);\n  }\n\n  /* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n     inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n  &[class*=\"-icon-\"]::before {\n    inline-size: var(--instui-font-size-text-xs);\n    block-size: var(--instui-font-size-text-xs);\n    margin-inline-end: 0.375rem;\n  }\n\n  &.-color-info {\n    color: var(--instui-component-pill-info-text-color);\n    border-color: var(--instui-component-pill-info-border-color);\n  }\n\n  &.-color-success {\n    color: var(--instui-component-pill-success-text-color);\n    border-color: var(--instui-component-pill-success-border-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-pill-warning-text-color);\n    border-color: var(--instui-component-pill-warning-border-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-pill-error-text-color);\n    border-color: var(--instui-component-pill-error-border-color);\n  }\n\n  &.-color-info,\n  &.-color-success,\n  &.-color-warning,\n  &.-color-danger {\n    font-weight: var(--instui-component-pill-status-label-font-weight);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component pill\n * @selector .pfx-pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n *   <span class=\"instui-pill -color-success -icon-check\">Published</span>\n *   <span class=\"instui-pill\">Draft</span>\n *   <span class=\"instui-pill -color-info\">In review</span>\n *   <span class=\"instui-pill -color-warning\">Stale</span>\n *   <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n@scope (.pfx-pill) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    height: var(--instui-component-pill-height);\n    max-width: var(--instui-component-pill-max-width);\n    padding: 0 var(--instui-component-pill-padding-horizontal);\n    background: var(--instui-component-pill-background-color);\n    color: var(--instui-component-pill-base-text-color);\n    border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n      var(--instui-component-pill-base-border-color);\n    border-radius: var(--instui-component-pill-border-radius);\n    font-family: var(--instui-component-pill-font-family);\n    font-size: var(--instui-component-pill-text-font-size);\n    font-weight: var(--instui-component-pill-text-font-weight);\n    line-height: var(--instui-component-pill-line-height);\n  }\n\n  /* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n     inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n  &[class*=\"-icon-\"]::before {\n    inline-size: var(--instui-font-size-text-xs);\n    block-size: var(--instui-font-size-text-xs);\n    margin-inline-end: 0.375rem;\n  }\n\n  &.-color-info {\n    color: var(--instui-component-pill-info-text-color);\n    border-color: var(--instui-component-pill-info-border-color);\n  }\n\n  &.-color-success {\n    color: var(--instui-component-pill-success-text-color);\n    border-color: var(--instui-component-pill-success-border-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-pill-warning-text-color);\n    border-color: var(--instui-component-pill-warning-border-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-pill-error-text-color);\n    border-color: var(--instui-component-pill-error-border-color);\n  }\n\n  &.-color-info,\n  &.-color-success,\n  &.-color-warning,\n  &.-color-danger {\n    font-weight: var(--instui-component-pill-status-label-font-weight);\n  }\n}\n"
+	"rebrand": "/**\n * @component pill\n * @selector .pfx-pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @remarks Unlike `badge`, which shows a count, or `tag`, which is removable, the pill is a static status label; its leading glyph is a masked `::before`, not an `<img>`.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n *   <span class=\"instui-pill -color-success -icon-check\">Published</span>\n *   <span class=\"instui-pill\">Draft</span>\n *   <span class=\"instui-pill -color-info\">In review</span>\n *   <span class=\"instui-pill -color-warning\">Stale</span>\n *   <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n@scope (.pfx-pill) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    height: var(--instui-component-pill-height);\n    max-width: var(--instui-component-pill-max-width);\n    padding: 0 var(--instui-component-pill-padding-horizontal);\n    background: var(--instui-component-pill-background-color);\n    color: var(--instui-component-pill-base-text-color);\n    border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n      var(--instui-component-pill-base-border-color);\n    border-radius: var(--instui-component-pill-border-radius);\n    font-family: var(--instui-component-pill-font-family);\n    font-size: var(--instui-component-pill-text-font-size);\n    font-weight: var(--instui-component-pill-text-font-weight);\n    line-height: var(--instui-component-pill-line-height);\n  }\n\n  /* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n     inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n  &[class*=\"-icon-\"]::before {\n    inline-size: var(--instui-font-size-text-xs);\n    block-size: var(--instui-font-size-text-xs);\n    margin-inline-end: 0.375rem;\n  }\n\n  &.-color-info {\n    color: var(--instui-component-pill-info-text-color);\n    border-color: var(--instui-component-pill-info-border-color);\n  }\n\n  &.-color-success {\n    color: var(--instui-component-pill-success-text-color);\n    border-color: var(--instui-component-pill-success-border-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-pill-warning-text-color);\n    border-color: var(--instui-component-pill-warning-border-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-pill-error-text-color);\n    border-color: var(--instui-component-pill-error-border-color);\n  }\n\n  &.-color-info,\n  &.-color-success,\n  &.-color-warning,\n  &.-color-danger {\n    font-weight: var(--instui-component-pill-status-label-font-weight);\n  }\n}\n",
+	"canvas": "/**\n * @component pill\n * @selector .pfx-pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @remarks Unlike `badge`, which shows a count, or `tag`, which is removable, the pill is a static status label; its leading glyph is a masked `::before`, not an `<img>`.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n *   <span class=\"instui-pill -color-success -icon-check\">Published</span>\n *   <span class=\"instui-pill\">Draft</span>\n *   <span class=\"instui-pill -color-info\">In review</span>\n *   <span class=\"instui-pill -color-warning\">Stale</span>\n *   <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n@scope (.pfx-pill) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    height: var(--instui-component-pill-height);\n    max-width: var(--instui-component-pill-max-width);\n    padding: 0 var(--instui-component-pill-padding-horizontal);\n    background: var(--instui-component-pill-background-color);\n    color: var(--instui-component-pill-base-text-color);\n    border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n      var(--instui-component-pill-base-border-color);\n    border-radius: var(--instui-component-pill-border-radius);\n    font-family: var(--instui-component-pill-font-family);\n    font-size: var(--instui-component-pill-text-font-size);\n    font-weight: var(--instui-component-pill-text-font-weight);\n    line-height: var(--instui-component-pill-line-height);\n  }\n\n  /* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n     inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n  &[class*=\"-icon-\"]::before {\n    inline-size: var(--instui-font-size-text-xs);\n    block-size: var(--instui-font-size-text-xs);\n    margin-inline-end: 0.375rem;\n  }\n\n  &.-color-info {\n    color: var(--instui-component-pill-info-text-color);\n    border-color: var(--instui-component-pill-info-border-color);\n  }\n\n  &.-color-success {\n    color: var(--instui-component-pill-success-text-color);\n    border-color: var(--instui-component-pill-success-border-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-pill-warning-text-color);\n    border-color: var(--instui-component-pill-warning-border-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-pill-error-text-color);\n    border-color: var(--instui-component-pill-error-border-color);\n  }\n\n  &.-color-info,\n  &.-color-success,\n  &.-color-warning,\n  &.-color-danger {\n    font-weight: var(--instui-component-pill-status-label-font-weight);\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component pill\n * @selector .pfx-pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @remarks Unlike `badge`, which shows a count, or `tag`, which is removable, the pill is a static status label; its leading glyph is a masked `::before`, not an `<img>`.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"pfx-pill --display-flex\" style=\"gap: 12px;\">\n *   <span class=\"instui-pill -color-success -icon-check\">Published</span>\n *   <span class=\"instui-pill\">Draft</span>\n *   <span class=\"instui-pill -color-info\">In review</span>\n *   <span class=\"instui-pill -color-warning\">Stale</span>\n *   <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n@scope (.pfx-pill) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    height: var(--instui-component-pill-height);\n    max-width: var(--instui-component-pill-max-width);\n    padding: 0 var(--instui-component-pill-padding-horizontal);\n    background: var(--instui-component-pill-background-color);\n    color: var(--instui-component-pill-base-text-color);\n    border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n      var(--instui-component-pill-base-border-color);\n    border-radius: var(--instui-component-pill-border-radius);\n    font-family: var(--instui-component-pill-font-family);\n    font-size: var(--instui-component-pill-text-font-size);\n    font-weight: var(--instui-component-pill-text-font-weight);\n    line-height: var(--instui-component-pill-line-height);\n  }\n\n  /* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n     inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n  &[class*=\"-icon-\"]::before {\n    inline-size: var(--instui-font-size-text-xs);\n    block-size: var(--instui-font-size-text-xs);\n    margin-inline-end: 0.375rem;\n  }\n\n  &.-color-info {\n    color: var(--instui-component-pill-info-text-color);\n    border-color: var(--instui-component-pill-info-border-color);\n  }\n\n  &.-color-success {\n    color: var(--instui-component-pill-success-text-color);\n    border-color: var(--instui-component-pill-success-border-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-pill-warning-text-color);\n    border-color: var(--instui-component-pill-warning-border-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-pill-error-text-color);\n    border-color: var(--instui-component-pill-error-border-color);\n  }\n\n  &.-color-info,\n  &.-color-success,\n  &.-color-warning,\n  &.-color-danger {\n    font-weight: var(--instui-component-pill-status-label-font-weight);\n  }\n}\n"
 }.rebrand;
 const popover$1 = {
-	"rebrand": "/**\n * @component popover\n * @selector .pfx-popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n *   <div class=\"pfx-heading -level-h4\">Share this page</div>\n *   <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n *   .pfx-heading {}\n *   .pfx-text {\n *     code {}\n *   }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n@scope (.pfx-popover) {\n  & {\n    background: var(--instui-color-background-elevated-surface-base);\n    color: var(--instui-color-text-base);\n    border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n    border-radius: var(--instui-component-popover-border-radius);\n    padding: var(--instui-spacing-space-sm);\n    box-shadow: var(--instui-elevation-above);\n  }\n\n  &[popover] {\n    margin: 0;\n  }\n\n  /* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n     popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n     modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n     then centres the popover in the top layer. */\n  @supports (position-area: block-end) {\n    &[popover] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n\n  /* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n  @supports (transition-behavior: allow-discrete) {\n    &[popover] {\n      transition:\n        opacity 0.15s ease,\n        transform 0.15s ease,\n        overlay 0.15s allow-discrete,\n        display 0.15s allow-discrete;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    &[popover]:not(:popover-open) {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n\n    @starting-style {\n      &[popover]:popover-open {\n        opacity: 0;\n        transform: translateY(-0.25rem);\n      }\n    }\n  }\n}\n",
-	"canvas": "/**\n * @component popover\n * @selector .pfx-popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n *   <div class=\"pfx-heading -level-h4\">Share this page</div>\n *   <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n *   .pfx-heading {}\n *   .pfx-text {\n *     code {}\n *   }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n@scope (.pfx-popover) {\n  & {\n    background: var(--instui-color-background-elevated-surface-base);\n    color: var(--instui-color-text-base);\n    border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n    border-radius: var(--instui-component-popover-border-radius);\n    padding: var(--instui-spacing-space-sm);\n    box-shadow: var(--instui-elevation-above);\n  }\n\n  &[popover] {\n    margin: 0;\n  }\n\n  /* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n     popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n     modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n     then centres the popover in the top layer. */\n  @supports (position-area: block-end) {\n    &[popover] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n\n  /* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n  @supports (transition-behavior: allow-discrete) {\n    &[popover] {\n      transition:\n        opacity 0.15s ease,\n        transform 0.15s ease,\n        overlay 0.15s allow-discrete,\n        display 0.15s allow-discrete;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    &[popover]:not(:popover-open) {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n\n    @starting-style {\n      &[popover]:popover-open {\n        opacity: 0;\n        transform: translateY(-0.25rem);\n      }\n    }\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component popover\n * @selector .pfx-popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n *   <div class=\"pfx-heading -level-h4\">Share this page</div>\n *   <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n *   .pfx-heading {}\n *   .pfx-text {\n *     code {}\n *   }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n@scope (.pfx-popover) {\n  & {\n    background: var(--instui-color-background-elevated-surface-base);\n    color: var(--instui-color-text-base);\n    border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n    border-radius: var(--instui-component-popover-border-radius);\n    padding: var(--instui-spacing-space-sm);\n    box-shadow: var(--instui-elevation-above);\n  }\n\n  &[popover] {\n    margin: 0;\n  }\n\n  /* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n     popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n     modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n     then centres the popover in the top layer. */\n  @supports (position-area: block-end) {\n    &[popover] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n\n  /* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n  @supports (transition-behavior: allow-discrete) {\n    &[popover] {\n      transition:\n        opacity 0.15s ease,\n        transform 0.15s ease,\n        overlay 0.15s allow-discrete,\n        display 0.15s allow-discrete;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    &[popover]:not(:popover-open) {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n\n    @starting-style {\n      &[popover]:popover-open {\n        opacity: 0;\n        transform: translateY(-0.25rem);\n      }\n    }\n  }\n}\n"
+	"rebrand": "/**\n * @component popover\n * @selector .pfx-popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @remarks Anchor positioning is Chromium-only; the `@supports` guard means `-placement-*` is silently inert elsewhere and the UA centers the popover in the top layer instead of failing.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n *   <div class=\"pfx-heading -level-h4\">Share this page</div>\n *   <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n *   .pfx-heading {}\n *   .pfx-text {\n *     code {}\n *   }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n@scope (.pfx-popover) {\n  & {\n    background: var(--instui-color-background-elevated-surface-base);\n    color: var(--instui-color-text-base);\n    border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n    border-radius: var(--instui-component-popover-border-radius);\n    padding: var(--instui-spacing-space-sm);\n    box-shadow: var(--instui-elevation-above);\n  }\n\n  &[popover] {\n    margin: 0;\n  }\n\n  /* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n     popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n     modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n     then centres the popover in the top layer. */\n  @supports (position-area: block-end) {\n    &[popover] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n\n  /* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n  @supports (transition-behavior: allow-discrete) {\n    &[popover] {\n      transition:\n        opacity 0.15s ease,\n        transform 0.15s ease,\n        overlay 0.15s allow-discrete,\n        display 0.15s allow-discrete;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    &[popover]:not(:popover-open) {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n\n    @starting-style {\n      &[popover]:popover-open {\n        opacity: 0;\n        transform: translateY(-0.25rem);\n      }\n    }\n  }\n}\n",
+	"canvas": "/**\n * @component popover\n * @selector .pfx-popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @remarks Anchor positioning is Chromium-only; the `@supports` guard means `-placement-*` is silently inert elsewhere and the UA centers the popover in the top layer instead of failing.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n *   <div class=\"pfx-heading -level-h4\">Share this page</div>\n *   <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n *   .pfx-heading {}\n *   .pfx-text {\n *     code {}\n *   }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n@scope (.pfx-popover) {\n  & {\n    background: var(--instui-color-background-elevated-surface-base);\n    color: var(--instui-color-text-base);\n    border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n    border-radius: var(--instui-component-popover-border-radius);\n    padding: var(--instui-spacing-space-sm);\n    box-shadow: var(--instui-elevation-above);\n  }\n\n  &[popover] {\n    margin: 0;\n  }\n\n  /* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n     popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n     modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n     then centres the popover in the top layer. */\n  @supports (position-area: block-end) {\n    &[popover] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n\n  /* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n  @supports (transition-behavior: allow-discrete) {\n    &[popover] {\n      transition:\n        opacity 0.15s ease,\n        transform 0.15s ease,\n        overlay 0.15s allow-discrete,\n        display 0.15s allow-discrete;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    &[popover]:not(:popover-open) {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n\n    @starting-style {\n      &[popover]:popover-open {\n        opacity: 0;\n        transform: translateY(-0.25rem);\n      }\n    }\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component popover\n * @selector .pfx-popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @remarks Anchor positioning is Chromium-only; the `@supports` guard means `-placement-*` is silently inert elsewhere and the UA centers the popover in the top layer instead of failing.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n *   <div class=\"pfx-heading -level-h4\">Share this page</div>\n *   <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n *   .pfx-heading {}\n *   .pfx-text {\n *     code {}\n *   }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n@scope (.pfx-popover) {\n  & {\n    background: var(--instui-color-background-elevated-surface-base);\n    color: var(--instui-color-text-base);\n    border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n    border-radius: var(--instui-component-popover-border-radius);\n    padding: var(--instui-spacing-space-sm);\n    box-shadow: var(--instui-elevation-above);\n  }\n\n  &[popover] {\n    margin: 0;\n  }\n\n  /* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n     popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n     modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n     then centres the popover in the top layer. */\n  @supports (position-area: block-end) {\n    &[popover] {\n      position-anchor: --pantoken-anchor;\n      position-try-fallbacks: flip-block, flip-inline;\n    }\n\n    &[popover].-placement-top {\n      position-area: block-start;\n    }\n\n    &[popover].-placement-bottom {\n      position-area: block-end;\n    }\n\n    &[popover].-placement-start {\n      position-area: inline-start center;\n    }\n\n    &[popover].-placement-end {\n      position-area: inline-end center;\n    }\n  }\n\n  /* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n  @supports (transition-behavior: allow-discrete) {\n    &[popover] {\n      transition:\n        opacity 0.15s ease,\n        transform 0.15s ease,\n        overlay 0.15s allow-discrete,\n        display 0.15s allow-discrete;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    &[popover]:not(:popover-open) {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n\n    @starting-style {\n      &[popover]:popover-open {\n        opacity: 0;\n        transform: translateY(-0.25rem);\n      }\n    }\n  }\n}\n"
 }.rebrand;
 const progress$1 = {
 	"rebrand": "/**\n * @component progress\n * @selector .pfx-progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks `.value` is a sibling of `.bar`, both children of the root — mirroring how progress-circle nests its own `.value` part. InstUI has no indeterminate state; `:indeterminate` is a pantoken-only best guess (native `<progress>` without a `value` attribute), animating `.bar` as a sliding segment and hiding `.value` since there's no meaningful number to show. `<meter>` has no indeterminate state, so it's unaffected.\n * @element progress, meter\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium (default).\n * @modifier -size-lg — Large.\n * @modifier -should-animate — @interaction Animate meter changes over half a second.\n * @modifier -render-value-inside — Renders `.value` inside the track, aligned to its start, instead of beside it; style it for legibility over the meter colour.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @part .value — The value text beside the bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @pseudo :indeterminate — Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; animates `.bar` as a sliding segment and hides `.value`.\n * @cssproperty --value <number> — The current progress value.\n * @cssproperty --value-now <number> — @alias Alias for `--value`.\n * @cssproperty --min <number> — The minimum meter value (default `0`).\n * @cssproperty --max <number> — The maximum progress value (default `100`).\n * @cssproperty --value-max <number> — @alias {@link --max} The maximum progress value (default `100`).\n * @accessibility Use native `<progress>` for a zero-based task completion range and `<meter>` when the minimum is non-zero. Give either element an accessible name by nesting it in `<label>` or associating a separate `<label>` through matching `for` and `id` values.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * ### Nested label\n * ```html\n * <label>\n *   Uploading Document: <progress class=\"pfx-progress -color-brand\" value=\"70\">70%</progress>\n * </label>\n * ```\n * ### External label\n * ```html\n * <label for=\"storage-used\">Storage used</label>\n * <meter id=\"storage-used\" class=\"pfx-progress -color-warning\" min=\"20\" value=\"40\" max=\"60\">50%</meter>\n * ```\n * @structure\n * @variant nested-label {\n *   label {\n *     .pfx-progress {\n *       .bar {}\n *       .value {}\n *     }\n *   }\n * }\n * @variant external-label {\n *   label {}\n *   .pfx-progress {\n *     .bar {}\n *     .value {}\n *   }\n * }\n * @related progress-circle — The circular form of the same determinate progress.\n * @stable\n * @sealed\n */\n/* Not an InstUI concept: a best guess so a <progress> missing its value attribute (or fed a bad\n   --value) reads as loading rather than rendering a broken 0%-width bar. */\n@keyframes pantoken-progress-indeterminate {\n  0% {\n    left: -40%;\n  }\n\n  100% {\n    left: 100%;\n  }\n}\n\n@scope (.pfx-progress) {\n  & {\n    --value: var(--value-now);\n    --min: 0;\n    --max: var(--value-max);\n    position: relative;\n    display: block;\n    width: 100%;\n    height: var(--instui-component-progress-bar-medium-height);\n    background: var(--instui-component-progress-bar-track-color);\n    /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n    border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n      var(--instui-component-progress-bar-border-color);\n    border-radius: var(--instui-component-progress-bar-border-radius);\n    overflow: hidden;\n  }\n\n  /* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n     border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n     the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset-inline: 0;\n    bottom: 0;\n    height: var(--instui-component-progress-bar-track-bottom-border-width);\n    background: var(--instui-component-progress-bar-track-bottom-border-color);\n    pointer-events: none;\n  }\n\n  &.-size-xs {\n    height: var(--instui-component-progress-bar-x-small-height);\n  }\n\n  &.-size-sm {\n    height: var(--instui-component-progress-bar-small-height);\n  }\n\n  &.-size-md {\n    height: var(--instui-component-progress-bar-medium-height);\n  }\n\n  &.-size-lg {\n    height: var(--instui-component-progress-bar-large-height);\n  }\n\n  & > .bar {\n    height: 100%;\n    width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);\n    background: var(--instui-color-background-brand);\n    border-radius: var(--instui-component-progress-bar-border-radius);\n  }\n\n  & > .value {\n    padding: 0 var(--instui-component-progress-bar-value-padding);\n    color: var(--instui-component-progress-bar-text-color);\n    font-family: var(--instui-component-progress-bar-font-family);\n    font-size: var(--instui-component-progress-bar-medium-value-font-size);\n    font-weight: var(--instui-component-progress-bar-font-weight);\n    line-height: var(--instui-component-progress-bar-line-height);\n  }\n\n  &.-color-inverse > .value,\n  & > .value.-color-inverse {\n    color: var(--instui-component-progress-bar-text-color-inverse);\n  }\n\n  /* :indeterminate only matches a valueless <progress>; <meter> always requires a value. */\n  &:indeterminate > .bar {\n    position: absolute;\n    width: 40%;\n    animation: pantoken-progress-indeterminate 1.4s ease-in-out infinite;\n  }\n\n  &:indeterminate > .value {\n    visibility: hidden;\n  }\n\n  /* Color modifiers paired with deprecated meter-color aliases via :is(). */\n  &:is(.-color-brand, .-meter-color-brand) > .bar {\n    background: var(--instui-color-background-brand);\n  }\n\n  &:is(.-color-info, .-meter-color-info) > .bar {\n    background: var(--instui-color-background-info);\n  }\n\n  &:is(.-color-success, .-meter-color-success) > .bar {\n    background: var(--instui-color-background-success);\n  }\n\n  &:is(.-color-warning, .-meter-color-warning, .-meter-color-alert) > .bar {\n    background: var(--instui-color-background-warning);\n  }\n\n  &:is(.-color-danger, .-meter-color-danger) > .bar {\n    background: var(--instui-color-background-error);\n  }\n\n  /* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n     InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n     wins at equal specificity. Pair it with a dark surface. */\n  &.-color-primary-inverse {\n    background: var(--instui-component-progress-bar-track-color-inverse);\n    border-color: var(--instui-component-progress-bar-border-color-inverse);\n    color: var(--instui-component-progress-bar-text-color-inverse);\n  }\n\n  &.-color-primary-inverse::after {\n    background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n  }\n\n  &.-color-primary-inverse > .bar {\n    background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n  }\n\n  &.-render-value-inside > .value {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n\n  /* Mount/value transition — the interactions layer toggles `-should-animate` on value changes. */\n  &.-should-animate > .bar {\n    transition: all 0.5s;\n  }\n}\n",
@@ -503,9 +503,9 @@ const radioInputGroup$1 = {
 	"canvasHighContrast": "/**\n * @component radio-input-group\n * @selector .pfx-radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @remarks Sets its own `gap` between radios; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n  * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n *   legend {}\n *   .pfx-radio.-variant-toggle {\n *     input {}\n *   }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n@scope (.pfx-radio-input-group) {\n  & {\n    display: flex;\n    flex-direction: column;\n    gap: var(--instui-component-form-field-layout-gap-inputs);\n    min-inline-size: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  & > legend {\n    padding: 0;\n    margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n\n  &.-required > legend::after {\n    content: \"*\";\n    margin-inline-start: 0.25rem;\n    color: var(--instui-component-form-field-layout-asterisk-color);\n  }\n\n  /* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n  &.-layout-columns,\n  &.-layout-inline {\n    flex-flow: row wrap;\n    align-items: center;\n    column-gap: var(--instui-spacing-space-md);\n  }\n\n  &.-layout-columns > legend,\n  &.-layout-inline > legend {\n    flex-basis: 100%;\n  }\n\n  /* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n     no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n     own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n     isn't clipped by a neighbour. */\n  &.-variant-toggle {\n    flex-flow: row wrap;\n    align-items: center;\n    gap: 0;\n  }\n\n  &.-variant-toggle > legend {\n    flex-basis: 100%;\n  }\n\n  &.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n    z-index: 1;\n  }\n}\n"
 }.rebrand;
 const rangeInput$1 = {
-	"rebrand": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n@scope (.pfx-range-input) {\n  & {\n    -webkit-appearance: none;\n    appearance: none;\n    inline-size: 100%;\n    min-inline-size: var(--instui-component-range-input-min-width);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: transparent;\n  }\n\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-runnable-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: var(--instui-component-range-input-handle-background);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    border-radius: 50%;\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n    cursor: pointer;\n  }\n\n  &::-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\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n}\n\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n@scope (.pfx-range-input-value) {\n  & {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n       the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n    align-self: center;\n    margin-inline-start: 0.5rem;\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-radius: var(--instui-border-radius-md);\n    padding: var(--instui-component-range-input-value-medium-padding);\n    font-family: var(--instui-component-range-input-value-font-family);\n    font-size: var(--instui-component-range-input-value-medium-font-size);\n    font-weight: var(--instui-component-range-input-value-font-weight);\n    line-height: 1;\n  }\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset-inline-start: -0.375rem;\n    inset-block-start: 50%;\n    transform: translateY(-50%);\n    border-block: 0.375rem solid transparent;\n    border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n    border-inline-start: 0;\n  }\n\n  &.-size-sm {\n    padding: var(--instui-component-range-input-value-small-padding);\n    font-size: var(--instui-component-range-input-value-small-font-size);\n    line-height: var(--instui-component-range-input-value-small-line-height);\n  }\n\n  &.-size-lg {\n    padding: var(--instui-component-range-input-value-large-padding);\n    font-size: var(--instui-component-range-input-value-large-font-size);\n    line-height: var(--instui-component-range-input-value-large-line-height);\n  }\n}\n",
-	"canvas": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n@scope (.pfx-range-input) {\n  & {\n    -webkit-appearance: none;\n    appearance: none;\n    inline-size: 100%;\n    min-inline-size: var(--instui-component-range-input-min-width);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: transparent;\n  }\n\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-runnable-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: var(--instui-component-range-input-handle-background);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    border-radius: 50%;\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n    cursor: pointer;\n  }\n\n  &::-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\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n}\n\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n@scope (.pfx-range-input-value) {\n  & {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n       the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n    align-self: center;\n    margin-inline-start: 0.5rem;\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-radius: var(--instui-border-radius-md);\n    padding: var(--instui-component-range-input-value-medium-padding);\n    font-family: var(--instui-component-range-input-value-font-family);\n    font-size: var(--instui-component-range-input-value-medium-font-size);\n    font-weight: var(--instui-component-range-input-value-font-weight);\n    line-height: 1;\n  }\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset-inline-start: -0.375rem;\n    inset-block-start: 50%;\n    transform: translateY(-50%);\n    border-block: 0.375rem solid transparent;\n    border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n    border-inline-start: 0;\n  }\n\n  &.-size-sm {\n    padding: var(--instui-component-range-input-value-small-padding);\n    font-size: var(--instui-component-range-input-value-small-font-size);\n    line-height: var(--instui-component-range-input-value-small-line-height);\n  }\n\n  &.-size-lg {\n    padding: var(--instui-component-range-input-value-large-padding);\n    font-size: var(--instui-component-range-input-value-large-font-size);\n    line-height: var(--instui-component-range-input-value-large-line-height);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n@scope (.pfx-range-input) {\n  & {\n    -webkit-appearance: none;\n    appearance: none;\n    inline-size: 100%;\n    min-inline-size: var(--instui-component-range-input-min-width);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: transparent;\n  }\n\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-runnable-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: var(--instui-component-range-input-handle-background);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    border-radius: 50%;\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n    cursor: pointer;\n  }\n\n  &::-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\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n}\n\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n@scope (.pfx-range-input-value) {\n  & {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n       the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n    align-self: center;\n    margin-inline-start: 0.5rem;\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-radius: var(--instui-border-radius-md);\n    padding: var(--instui-component-range-input-value-medium-padding);\n    font-family: var(--instui-component-range-input-value-font-family);\n    font-size: var(--instui-component-range-input-value-medium-font-size);\n    font-weight: var(--instui-component-range-input-value-font-weight);\n    line-height: 1;\n  }\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset-inline-start: -0.375rem;\n    inset-block-start: 50%;\n    transform: translateY(-50%);\n    border-block: 0.375rem solid transparent;\n    border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n    border-inline-start: 0;\n  }\n\n  &.-size-sm {\n    padding: var(--instui-component-range-input-value-small-padding);\n    font-size: var(--instui-component-range-input-value-small-font-size);\n    line-height: var(--instui-component-range-input-value-small-line-height);\n  }\n\n  &.-size-lg {\n    padding: var(--instui-component-range-input-value-large-padding);\n    font-size: var(--instui-component-range-input-value-large-font-size);\n    line-height: var(--instui-component-range-input-value-large-line-height);\n  }\n}\n"
+	"rebrand": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @remarks Each vendor thumb/track pseudo-element needs its own separate rule — grouping them in one selector list would invalidate the whole rule in browsers that don't recognize the other vendor's pseudo.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n@scope (.pfx-range-input) {\n  & {\n    -webkit-appearance: none;\n    appearance: none;\n    inline-size: 100%;\n    min-inline-size: var(--instui-component-range-input-min-width);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: transparent;\n  }\n\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-runnable-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: var(--instui-component-range-input-handle-background);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    border-radius: 50%;\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n    cursor: pointer;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-thumb {\n    border-radius: 50%;\n    cursor: pointer;\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    background: var(--instui-component-range-input-handle-background);\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  .pfx-range-input-value {\n    & {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n       the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n      align-self: center;\n      margin-inline-start: 0.5rem;\n      background: var(--instui-color-background-inverse);\n      color: var(--instui-color-text-inverse);\n      border-radius: var(--instui-border-radius-md);\n      padding: var(--instui-component-range-input-value-medium-padding);\n      font-family: var(--instui-component-range-input-value-font-family);\n      font-size: var(--instui-component-range-input-value-medium-font-size);\n      font-weight: var(--instui-component-range-input-value-font-weight);\n      line-height: 1;\n    }\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      inset-inline-start: -0.375rem;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n      border-block: 0.375rem solid transparent;\n      border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n      border-inline-start: 0;\n    }\n\n    &.-size-sm {\n      padding: var(--instui-component-range-input-value-small-padding);\n      font-size: var(--instui-component-range-input-value-small-font-size);\n      line-height: var(--instui-component-range-input-value-small-line-height);\n    }\n\n    &.-size-lg {\n      padding: var(--instui-component-range-input-value-large-padding);\n      font-size: var(--instui-component-range-input-value-large-font-size);\n      line-height: var(--instui-component-range-input-value-large-line-height);\n    }\n  }\n}\n",
+	"canvas": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @remarks Each vendor thumb/track pseudo-element needs its own separate rule — grouping them in one selector list would invalidate the whole rule in browsers that don't recognize the other vendor's pseudo.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n@scope (.pfx-range-input) {\n  & {\n    -webkit-appearance: none;\n    appearance: none;\n    inline-size: 100%;\n    min-inline-size: var(--instui-component-range-input-min-width);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: transparent;\n  }\n\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-runnable-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: var(--instui-component-range-input-handle-background);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    border-radius: 50%;\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n    cursor: pointer;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-thumb {\n    border-radius: 50%;\n    cursor: pointer;\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    background: var(--instui-component-range-input-handle-background);\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  .pfx-range-input-value {\n    & {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n       the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n      align-self: center;\n      margin-inline-start: 0.5rem;\n      background: var(--instui-color-background-inverse);\n      color: var(--instui-color-text-inverse);\n      border-radius: var(--instui-border-radius-md);\n      padding: var(--instui-component-range-input-value-medium-padding);\n      font-family: var(--instui-component-range-input-value-font-family);\n      font-size: var(--instui-component-range-input-value-medium-font-size);\n      font-weight: var(--instui-component-range-input-value-font-weight);\n      line-height: 1;\n    }\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      inset-inline-start: -0.375rem;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n      border-block: 0.375rem solid transparent;\n      border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n      border-inline-start: 0;\n    }\n\n    &.-size-sm {\n      padding: var(--instui-component-range-input-value-small-padding);\n      font-size: var(--instui-component-range-input-value-small-font-size);\n      line-height: var(--instui-component-range-input-value-small-line-height);\n    }\n\n    &.-size-lg {\n      padding: var(--instui-component-range-input-value-large-padding);\n      font-size: var(--instui-component-range-input-value-large-font-size);\n      line-height: var(--instui-component-range-input-value-large-line-height);\n    }\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @remarks Each vendor thumb/track pseudo-element needs its own separate rule — grouping them in one selector list would invalidate the whole rule in browsers that don't recognize the other vendor's pseudo.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n@scope (.pfx-range-input) {\n  & {\n    -webkit-appearance: none;\n    appearance: none;\n    inline-size: 100%;\n    min-inline-size: var(--instui-component-range-input-min-width);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: transparent;\n  }\n\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-runnable-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: var(--instui-component-range-input-handle-background);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    border-radius: 50%;\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n    cursor: pointer;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-thumb {\n    border-radius: 50%;\n    cursor: pointer;\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    background: var(--instui-component-range-input-handle-background);\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  .pfx-range-input-value {\n    & {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n       the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n      align-self: center;\n      margin-inline-start: 0.5rem;\n      background: var(--instui-color-background-inverse);\n      color: var(--instui-color-text-inverse);\n      border-radius: var(--instui-border-radius-md);\n      padding: var(--instui-component-range-input-value-medium-padding);\n      font-family: var(--instui-component-range-input-value-font-family);\n      font-size: var(--instui-component-range-input-value-medium-font-size);\n      font-weight: var(--instui-component-range-input-value-font-weight);\n      line-height: 1;\n    }\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      inset-inline-start: -0.375rem;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n      border-block: 0.375rem solid transparent;\n      border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n      border-inline-start: 0;\n    }\n\n    &.-size-sm {\n      padding: var(--instui-component-range-input-value-small-padding);\n      font-size: var(--instui-component-range-input-value-small-font-size);\n      line-height: var(--instui-component-range-input-value-small-line-height);\n    }\n\n    &.-size-lg {\n      padding: var(--instui-component-range-input-value-large-padding);\n      font-size: var(--instui-component-range-input-value-large-font-size);\n      line-height: var(--instui-component-range-input-value-large-line-height);\n    }\n  }\n}\n"
 }.rebrand;
 const rating$1 = {
 	"rebrand": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @remarks Sets its own `gap` between star glyphs; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n *   <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n *   <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n *   [class*=\"-icon-\"] {}\n *   .label {}\n * }\n */\n.pfx-rating {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-rating-icon-icon-margin);\n  font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n  color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n  font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n  font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n  :scope {\n    /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n    .-icon-star-solid {\n      color: var(--instui-component-rating-icon-icon-filled-color);\n    }\n\n    /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n    > .label {\n      margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n      color: var(--instui-color-text-base);\n      font-family: var(--instui-font-family-base);\n      font-size: var(--instui-font-size-text-base);\n    }\n  }\n}\n",
@@ -528,9 +528,9 @@ const sideNavBarItem$1 = {
 	"canvasHighContrast": "/**\n * @component side-nav-bar.item\n * @memberOf side-nav-bar\n * @selector .item\n * @summary A navigation entry (InstUI `SideNavBar.Item`); `-selected` marks the active one.\n * @modifier -selected — The active nav item.\n * @part .label — The item's text label; hidden when the rail is minimized.\n * @remarks The parent `side-nav-bar`'s `-minimized` modifier hides this member's `.label` — see `side-nav-bar`'s own doc for that modifier.\n * @structure\n * @component side-nav-bar {\n *   .item {\n *     [class*=\"-icon-\"]:optional {}\n *     .label {}\n *   }\n * }\n */\n@scope (.pfx-side-nav-bar) {\n  :scope {\n    > .item {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--instui-spacing-space2xs);\n      padding: var(--instui-component-side-nav-bar-item-content-padding);\n      min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n      color: var(--instui-component-side-nav-bar-item-font-color);\n      background: var(--instui-component-side-nav-bar-item-background-color);\n      border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n      font-size: var(--instui-component-side-nav-bar-item-font-size);\n      font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n      line-height: var(--instui-component-side-nav-bar-item-line-height);\n      text-align: center;\n      text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n      cursor: pointer;\n    }\n\n    > .item [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .item:hover {\n      background: var(--instui-component-side-nav-bar-item-hover-background-color);\n    }\n\n    > .item.-selected {\n      background: var(--instui-component-side-nav-bar-item-selected-background-color);\n      color: var(--instui-component-side-nav-bar-item-selected-font-color);\n    }\n  }\n}\n"
 }.rebrand;
 const spinner$1 = {
-	"rebrand": "/**\n * @component spinner\n * @selector .pfx-spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n *   <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@scope (.pfx-spinner) {\n  :scope {\n    display: inline-block;\n    width: var(--instui-component-spinner-spinner-size-md);\n    height: var(--instui-component-spinner-spinner-size-md);\n    border: var(--instui-component-spinner-stroke-width-md) solid\n      var(--instui-component-spinner-track-color);\n    border-top-color: var(--instui-component-spinner-color);\n    border-radius: 50%;\n    animation: pantoken-spinner-rotate 0.8s linear infinite;\n\n    &.-color-inverse {\n      border-top-color: var(--instui-component-spinner-inverse-color);\n    }\n  }\n}\n\n.pfx-spinner.-size-xs {\n  width: var(--instui-component-spinner-spinner-size-xs);\n  height: var(--instui-component-spinner-spinner-size-xs);\n  border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n  width: var(--instui-component-spinner-spinner-size-sm);\n  height: var(--instui-component-spinner-spinner-size-sm);\n  border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n  width: var(--instui-component-spinner-spinner-size-lg);\n  height: var(--instui-component-spinner-spinner-size-lg);\n  border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n",
-	"canvas": "/**\n * @component spinner\n * @selector .pfx-spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n *   <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@scope (.pfx-spinner) {\n  :scope {\n    display: inline-block;\n    width: var(--instui-component-spinner-spinner-size-md);\n    height: var(--instui-component-spinner-spinner-size-md);\n    border: var(--instui-component-spinner-stroke-width-md) solid\n      var(--instui-component-spinner-track-color);\n    border-top-color: var(--instui-component-spinner-color);\n    border-radius: 50%;\n    animation: pantoken-spinner-rotate 0.8s linear infinite;\n\n    &.-color-inverse {\n      border-top-color: var(--instui-component-spinner-inverse-color);\n    }\n  }\n}\n\n.pfx-spinner.-size-xs {\n  width: var(--instui-component-spinner-spinner-size-xs);\n  height: var(--instui-component-spinner-spinner-size-xs);\n  border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n  width: var(--instui-component-spinner-spinner-size-sm);\n  height: var(--instui-component-spinner-spinner-size-sm);\n  border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n  width: var(--instui-component-spinner-spinner-size-lg);\n  height: var(--instui-component-spinner-spinner-size-lg);\n  border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n",
-	"canvasHighContrast": "/**\n * @component spinner\n * @selector .pfx-spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n *   <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@scope (.pfx-spinner) {\n  :scope {\n    display: inline-block;\n    width: var(--instui-component-spinner-spinner-size-md);\n    height: var(--instui-component-spinner-spinner-size-md);\n    border: var(--instui-component-spinner-stroke-width-md) solid\n      var(--instui-component-spinner-track-color);\n    border-top-color: var(--instui-component-spinner-color);\n    border-radius: 50%;\n    animation: pantoken-spinner-rotate 0.8s linear infinite;\n\n    &.-color-inverse {\n      border-top-color: var(--instui-component-spinner-inverse-color);\n    }\n  }\n}\n\n.pfx-spinner.-size-xs {\n  width: var(--instui-component-spinner-spinner-size-xs);\n  height: var(--instui-component-spinner-spinner-size-xs);\n  border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n  width: var(--instui-component-spinner-spinner-size-sm);\n  height: var(--instui-component-spinner-spinner-size-sm);\n  border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n  width: var(--instui-component-spinner-spinner-size-lg);\n  height: var(--instui-component-spinner-spinner-size-lg);\n  border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n"
+	"rebrand": "/**\n * @component spinner\n * @selector .pfx-spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @remarks `-color-inverse` only repaints the animated top border segment, not the whole track, so it still reads correctly on a dark card without needing a separate track color.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n *   <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@scope (.pfx-spinner) {\n  :scope {\n    display: inline-block;\n    width: var(--instui-component-spinner-spinner-size-md);\n    height: var(--instui-component-spinner-spinner-size-md);\n    border: var(--instui-component-spinner-stroke-width-md) solid\n      var(--instui-component-spinner-track-color);\n    border-top-color: var(--instui-component-spinner-color);\n    border-radius: 50%;\n    animation: pantoken-spinner-rotate 0.8s linear infinite;\n\n    &.-color-inverse {\n      border-top-color: var(--instui-component-spinner-inverse-color);\n    }\n  }\n}\n\n.pfx-spinner.-size-xs {\n  width: var(--instui-component-spinner-spinner-size-xs);\n  height: var(--instui-component-spinner-spinner-size-xs);\n  border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n  width: var(--instui-component-spinner-spinner-size-sm);\n  height: var(--instui-component-spinner-spinner-size-sm);\n  border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n  width: var(--instui-component-spinner-spinner-size-lg);\n  height: var(--instui-component-spinner-spinner-size-lg);\n  border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n",
+	"canvas": "/**\n * @component spinner\n * @selector .pfx-spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @remarks `-color-inverse` only repaints the animated top border segment, not the whole track, so it still reads correctly on a dark card without needing a separate track color.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n *   <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@scope (.pfx-spinner) {\n  :scope {\n    display: inline-block;\n    width: var(--instui-component-spinner-spinner-size-md);\n    height: var(--instui-component-spinner-spinner-size-md);\n    border: var(--instui-component-spinner-stroke-width-md) solid\n      var(--instui-component-spinner-track-color);\n    border-top-color: var(--instui-component-spinner-color);\n    border-radius: 50%;\n    animation: pantoken-spinner-rotate 0.8s linear infinite;\n\n    &.-color-inverse {\n      border-top-color: var(--instui-component-spinner-inverse-color);\n    }\n  }\n}\n\n.pfx-spinner.-size-xs {\n  width: var(--instui-component-spinner-spinner-size-xs);\n  height: var(--instui-component-spinner-spinner-size-xs);\n  border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n  width: var(--instui-component-spinner-spinner-size-sm);\n  height: var(--instui-component-spinner-spinner-size-sm);\n  border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n  width: var(--instui-component-spinner-spinner-size-lg);\n  height: var(--instui-component-spinner-spinner-size-lg);\n  border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n",
+	"canvasHighContrast": "/**\n * @component spinner\n * @selector .pfx-spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @remarks `-color-inverse` only repaints the animated top border segment, not the whole track, so it still reads correctly on a dark card without needing a separate track color.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n *   <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@scope (.pfx-spinner) {\n  :scope {\n    display: inline-block;\n    width: var(--instui-component-spinner-spinner-size-md);\n    height: var(--instui-component-spinner-spinner-size-md);\n    border: var(--instui-component-spinner-stroke-width-md) solid\n      var(--instui-component-spinner-track-color);\n    border-top-color: var(--instui-component-spinner-color);\n    border-radius: 50%;\n    animation: pantoken-spinner-rotate 0.8s linear infinite;\n\n    &.-color-inverse {\n      border-top-color: var(--instui-component-spinner-inverse-color);\n    }\n  }\n}\n\n.pfx-spinner.-size-xs {\n  width: var(--instui-component-spinner-spinner-size-xs);\n  height: var(--instui-component-spinner-spinner-size-xs);\n  border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n  width: var(--instui-component-spinner-spinner-size-sm);\n  height: var(--instui-component-spinner-spinner-size-sm);\n  border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n  width: var(--instui-component-spinner-spinner-size-lg);\n  height: var(--instui-component-spinner-spinner-size-lg);\n  border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n"
 }.rebrand;
 const table$1 = {
 	"rebrand": "/**\n * @component table\n * @selector .pfx-table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`. See the `table.head`, `table.body`, `table.row`, `table.cell`, `table.col-header`, and `table.row-header` members for the individual parts.\n * @modifier -hover — Highlight rows on hover. @affects table.row — Reserves and colours the row's hover border.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`. @affects table.head @affects table.body @affects table.row @affects table.cell @affects table.col-header @affects table.row-header — Stacks each part as a block and hides/labels the header accordingly.\n * @part caption — An optional table caption.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n *   <caption>Top-rated films</caption>\n *   <thead>\n *     <tr>\n *       <th scope=\"col\">Rank</th>\n *       <th scope=\"col\">Title</th>\n *       <th scope=\"col\">Year</th>\n *       <th scope=\"col\">Rating</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <th scope=\"row\">1</th>\n *       <td>The Shawshank Redemption</td>\n *       <td>1994</td>\n *       <td>9.3</td>\n *     </tr>\n *     <tr>\n *       <th scope=\"row\">2</th>\n *       <td>The Godfather</td>\n *       <td>1972</td>\n *       <td>9.2</td>\n *     </tr>\n *     <tr>\n *       <th scope=\"row\">3</th>\n *       <td>The Godfather: Part II</td>\n *       <td>1974</td>\n *       <td>9.0</td>\n *     </tr>\n *   </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n *   caption {}\n *   thead {\n *     th {}\n *   }\n *   tbody {\n *     tr {\n *       td, th[scope=\"row\"] {}\n *     }\n *   }\n * }\n */\n@scope (.pfx-table) {\n  & {\n    border-collapse: collapse;\n    width: 100%;\n    background: var(--instui-component-table-background);\n    color: var(--instui-component-table-color);\n    font-family: var(--instui-component-table-font-family);\n    font-size: var(--instui-component-table-font-size);\n  }\n\n  & caption {\n    text-align: start;\n    padding: var(--instui-component-table-cell-padding-vertical)\n      var(--instui-component-table-cell-padding-horizontal);\n    color: var(--instui-component-table-col-header-color);\n    font-weight: var(--instui-component-table-head-font-weight);\n  }\n\n  /* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n  &.-layout-fixed {\n    table-layout: fixed;\n  }\n\n  /* layout=\"stacked\": the table itself just stops being a table box; see the head/body/row/cell/\n   col-header/row-header members for how each part restacks. */\n  &.-layout-stacked {\n    display: block;\n    width: auto;\n  }\n}\n",
@@ -568,9 +568,9 @@ const tableRowHeader$1 = {
 	"canvasHighContrast": "/**\n * @component table.row-header\n * @memberOf table\n * @selector th[scope=\"row\"]\n * @summary A row-header cell (InstUI `Table.RowHeader`); styled from the row-header tokens, not the column-header ones.\n * @remarks The parent `table`'s `-layout-stacked` modifier stacks this member as a block and labels it via `::before` — see `table`'s own doc for that modifier.\n * @structure\n * @component table {\n *   tbody {\n *     tr {\n *       th[scope=\"row\"] {}\n *     }\n *   }\n * }\n */\n/* A row-header cell (th scope=row) — styled from the row-header tokens, not the column-header ones. */\n.pfx-table tbody th,\n.pfx-table th[scope=\"row\"] {\n  background: var(--instui-component-table-row-header-background);\n  color: var(--instui-component-table-row-header-color);\n  font-weight: var(--instui-component-table-row-header-font-weight);\n  line-height: var(--instui-component-table-row-header-line-height);\n  padding: var(--instui-component-table-row-header-padding-vertical)\n    var(--instui-component-table-row-header-padding-horizontal);\n}\n\n/* No border of its own — the separator lives on the row (see table.row). Reset with tbody specificity\n (0,1,2) so a host stylesheet's cell borders (e.g. `.pantoken-prose td`, 0,1,1) can't leak in. */\n.pfx-table tbody th {\n  border: 0;\n}\n\n/* layout=\"stacked\": stack as a block, labelled by its column via ::before (pure CSS can't pull the\n <th> text automatically, so the author supplies a `data-label` per cell). */\n.pfx-table.-layout-stacked th {\n  display: block;\n  width: auto;\n}\n\n.pfx-table.-layout-stacked tbody th[data-label]::before {\n  content: attr(data-label);\n  display: block;\n  font-weight: var(--instui-component-table-head-font-weight);\n  color: var(--instui-component-table-col-header-color);\n}\n"
 }.rebrand;
 const tabs$1 = {
-	"rebrand": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab:many {}\n *   }\n *   .panel:many {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope {\n    > .list {\n      display: flex;\n      width: 100%;\n      flex-flow: row wrap;\n    }\n\n    &.-overflow-scroll > .list {\n      flex-wrap: nowrap;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n\n    &.-overflow-scroll > .list::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n",
-	"canvas": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab:many {}\n *   }\n *   .panel:many {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope {\n    > .list {\n      display: flex;\n      width: 100%;\n      flex-flow: row wrap;\n    }\n\n    &.-overflow-scroll > .list {\n      flex-wrap: nowrap;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n\n    &.-overflow-scroll > .list::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab:many {}\n *   }\n *   .panel:many {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope {\n    > .list {\n      display: flex;\n      width: 100%;\n      flex-flow: row wrap;\n    }\n\n    &.-overflow-scroll > .list {\n      flex-wrap: nowrap;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n\n    &.-overflow-scroll > .list::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n"
+	"rebrand": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @modifier -overflow-scroll — Keep the tab list on one line and let it scroll horizontally instead of wrapping, hiding the scrollbar.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab:many {}\n *   }\n *   .panel:many {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope {\n    > .list {\n      display: flex;\n      width: 100%;\n      flex-flow: row wrap;\n    }\n\n    &.-overflow-scroll > .list {\n      flex-wrap: nowrap;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n\n    &.-overflow-scroll > .list::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n",
+	"canvas": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @modifier -overflow-scroll — Keep the tab list on one line and let it scroll horizontally instead of wrapping, hiding the scrollbar.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab:many {}\n *   }\n *   .panel:many {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope {\n    > .list {\n      display: flex;\n      width: 100%;\n      flex-flow: row wrap;\n    }\n\n    &.-overflow-scroll > .list {\n      flex-wrap: nowrap;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n\n    &.-overflow-scroll > .list::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @modifier -overflow-scroll — Keep the tab list on one line and let it scroll horizontally instead of wrapping, hiding the scrollbar.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab:many {}\n *   }\n *   .panel:many {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope {\n    > .list {\n      display: flex;\n      width: 100%;\n      flex-flow: row wrap;\n    }\n\n    &.-overflow-scroll > .list {\n      flex-wrap: nowrap;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n\n    &.-overflow-scroll > .list::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n"
 }.rebrand;
 const tabsPanel$1 = {
 	"rebrand": "/**\n * @component tabs.panel\n * @memberOf tabs\n * @selector .panel\n * @summary The content panel for a tab (InstUI `Tabs.Panel`).\n * @cssstate hidden\n * @structure\n * @component tabs {\n *   .panel {}\n * }\n */\n@scope (.pfx-tabs) {\n  :scope {\n    > .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    > .panel[hidden] {\n      display: none;\n    }\n  }\n}\n",
@@ -588,9 +588,9 @@ const tag$1 = {
 	"canvasHighContrast": "/**\n * @component tag\n * @selector .pfx-tag\n * @summary An inline chip for a keyword or filter.\n * @remarks Sets its own horizontal `padding` (`-size-sm`/`-size-lg` scale it); chaining a `-p-*`/`-padding-*` spacing utility modifier overrides that built-in value.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n@scope (.pfx-tag) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    height: var(--instui-component-tag-height-medium);\n    max-width: var(--instui-component-tag-max-width);\n    padding: 0 var(--instui-component-tag-padding-horizontal);\n    background: var(--instui-component-tag-default-background);\n    color: var(--instui-component-tag-default-color);\n    border: var(--instui-component-tag-default-border-width)\n      var(--instui-component-tag-default-border-style)\n      var(--instui-component-tag-default-border-color);\n    border-radius: var(--instui-component-tag-default-border-radius);\n    font-family: var(--instui-component-tag-font-family);\n    font-size: var(--instui-component-tag-font-size-medium);\n  }\n\n  &:hover {\n    background: var(--instui-component-tag-default-background-hover);\n  }\n\n  &.-size-sm {\n    height: var(--instui-component-tag-height-small);\n    padding: 0 var(--instui-component-tag-padding-horizontal-small);\n    font-size: var(--instui-component-tag-font-size-small);\n  }\n\n  &.-size-lg {\n    height: var(--instui-component-tag-height-large);\n    font-size: var(--instui-component-tag-font-size-large);\n  }\n\n  &.-inline {\n    gap: var(--instui-spacing-space-xs);\n    background: var(--instui-component-tag-inline-background);\n    color: var(--instui-component-tag-inline-color);\n    border-color: var(--instui-component-tag-inline-border-color);\n    border-radius: var(--instui-component-tag-inline-border-radius);\n    cursor: pointer;\n  }\n\n  &.-inline:hover {\n    background: var(--instui-component-tag-inline-background-hover);\n  }\n\n  &.-inline::after {\n    content: \"\";\n    flex: none;\n    width: 1em;\n    height: 1em;\n    background: var(--instui-component-tag-inline-icon-color);\n    -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n    mask: var(--instui-icon-x) center / contain no-repeat;\n  }\n\n  &.-inline:hover::after {\n    background: var(--instui-component-tag-inline-icon-hover-color);\n  }\n\n  /* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n  &.-readonly {\n    cursor: default;\n    background: var(--instui-component-tag-default-background);\n  }\n\n  &.-readonly.-inline::after {\n    display: none;\n  }\n}\n"
 }.rebrand;
 const text$1 = {
-	"rebrand": "/**\n * @component text\n * @selector .pfx-text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n  & {\n    font-family: var(--instui-component-text-content-font-family);\n    color: var(--instui-component-text-base-color);\n    font-size: var(--instui-component-text-font-size-medium);\n    font-weight: var(--instui-component-text-font-weight-normal);\n    line-height: var(--instui-component-text-content-line-height);\n  }\n\n  &.-size-xs {\n    font-size: var(--instui-component-text-font-size-x-small);\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-text-font-size-small);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-text-font-size-large);\n  }\n\n  &.-size-xl {\n    font-size: var(--instui-component-text-font-size-x-large);\n  }\n\n  &.-weight-bold {\n    font-weight: var(--instui-component-text-font-weight-bold);\n  }\n\n  &.-style-italic {\n    font-style: italic;\n  }\n\n  &.-color-primary {\n    color: var(--instui-component-text-primary-color);\n  }\n\n  &.-color-secondary {\n    color: var(--instui-component-text-muted-color);\n  }\n\n  &.-color-brand {\n    color: light-dark(\n      var(--instui-color-institutional-brand-primary),\n      var(--instui-color-institutional-brand-font-color-dark)\n    );\n  }\n\n  &.-color-success {\n    color: var(--instui-component-text-success-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-text-error-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-text-warning-color);\n  }\n\n  &:is(.-color-ai-highlight, .-color-ai) {\n    color: var(--instui-component-text-ai-color);\n    background: var(--instui-component-text-ai-background-color);\n  }\n\n  &.-color-primary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-secondary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-primary-on {\n    color: var(--instui-component-text-base-on-color);\n  }\n\n  &.-color-secondary-on {\n    color: var(--instui-component-text-muted-on-color);\n  }\n\n  &.-variant-description-page {\n    font-size: var(--instui-component-text-description-page-font-size);\n    font-weight: var(--instui-component-text-description-page-font-weight);\n    line-height: var(--instui-component-text-description-page-line-height);\n  }\n\n  &.-variant-description-section {\n    font-size: var(--instui-component-text-description-section-font-size);\n    font-weight: var(--instui-component-text-description-section-font-weight);\n    line-height: var(--instui-component-text-description-section-line-height);\n  }\n\n  &.-variant-content {\n    font-size: var(--instui-component-text-content-font-size);\n    line-height: var(--instui-component-text-content-line-height);\n    font-weight: var(--instui-component-text-content-font-weight);\n  }\n\n  &.-variant-content-small {\n    font-size: var(--instui-component-text-content-small-font-size);\n    font-weight: var(--instui-component-text-content-small-font-weight);\n    line-height: var(--instui-component-text-content-small-line-height);\n  }\n\n  &.-variant-content-important {\n    font-size: var(--instui-component-text-content-important-font-size);\n    line-height: var(--instui-component-text-content-important-line-height);\n    font-weight: var(--instui-component-text-content-important-font-weight);\n  }\n\n  &.-variant-content-quote {\n    font-size: var(--instui-component-text-content-quote-font-size);\n    font-weight: var(--instui-component-text-content-quote-font-weight);\n    font-style: var(--instui-component-text-content-quote-font-style);\n    line-height: var(--instui-component-text-content-quote-line-height);\n  }\n\n  &.-variant-legend {\n    font-size: var(--instui-component-text-legend-font-size);\n    line-height: var(--instui-component-text-legend-line-height);\n    font-weight: var(--instui-component-text-legend-font-weight);\n  }\n\n  &.-transform-uppercase {\n    text-transform: uppercase;\n  }\n\n  &.-transform-lowercase {\n    text-transform: lowercase;\n  }\n\n  &.-transform-capitalize {\n    text-transform: capitalize;\n  }\n}\n",
-	"canvas": "/**\n * @component text\n * @selector .pfx-text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n  & {\n    font-family: var(--instui-component-text-content-font-family);\n    color: var(--instui-component-text-base-color);\n    font-size: var(--instui-component-text-font-size-medium);\n    font-weight: var(--instui-component-text-font-weight-normal);\n    line-height: var(--instui-component-text-content-line-height);\n  }\n\n  &.-size-xs {\n    font-size: var(--instui-component-text-font-size-x-small);\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-text-font-size-small);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-text-font-size-large);\n  }\n\n  &.-size-xl {\n    font-size: var(--instui-component-text-font-size-x-large);\n  }\n\n  &.-weight-bold {\n    font-weight: var(--instui-component-text-font-weight-bold);\n  }\n\n  &.-style-italic {\n    font-style: italic;\n  }\n\n  &.-color-primary {\n    color: var(--instui-component-text-primary-color);\n  }\n\n  &.-color-secondary {\n    color: var(--instui-component-text-muted-color);\n  }\n\n  &.-color-brand {\n    color: light-dark(\n      var(--instui-color-institutional-brand-primary),\n      var(--instui-color-institutional-brand-font-color-dark)\n    );\n  }\n\n  &.-color-success {\n    color: var(--instui-component-text-success-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-text-error-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-text-warning-color);\n  }\n\n  &:is(.-color-ai-highlight, .-color-ai) {\n    color: var(--instui-component-text-ai-color);\n    background: var(--instui-component-text-ai-background-color);\n  }\n\n  &.-color-primary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-secondary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-primary-on {\n    color: var(--instui-component-text-base-on-color);\n  }\n\n  &.-color-secondary-on {\n    color: var(--instui-component-text-muted-on-color);\n  }\n\n  &.-variant-description-page {\n    font-size: var(--instui-component-text-description-page-font-size);\n    font-weight: var(--instui-component-text-description-page-font-weight);\n    line-height: var(--instui-component-text-description-page-line-height);\n  }\n\n  &.-variant-description-section {\n    font-size: var(--instui-component-text-description-section-font-size);\n    font-weight: var(--instui-component-text-description-section-font-weight);\n    line-height: var(--instui-component-text-description-section-line-height);\n  }\n\n  &.-variant-content {\n    font-size: var(--instui-component-text-content-font-size);\n    line-height: var(--instui-component-text-content-line-height);\n    font-weight: var(--instui-component-text-content-font-weight);\n  }\n\n  &.-variant-content-small {\n    font-size: var(--instui-component-text-content-small-font-size);\n    font-weight: var(--instui-component-text-content-small-font-weight);\n    line-height: var(--instui-component-text-content-small-line-height);\n  }\n\n  &.-variant-content-important {\n    font-size: var(--instui-component-text-content-important-font-size);\n    line-height: var(--instui-component-text-content-important-line-height);\n    font-weight: var(--instui-component-text-content-important-font-weight);\n  }\n\n  &.-variant-content-quote {\n    font-size: var(--instui-component-text-content-quote-font-size);\n    font-weight: var(--instui-component-text-content-quote-font-weight);\n    font-style: var(--instui-component-text-content-quote-font-style);\n    line-height: var(--instui-component-text-content-quote-line-height);\n  }\n\n  &.-variant-legend {\n    font-size: var(--instui-component-text-legend-font-size);\n    line-height: var(--instui-component-text-legend-line-height);\n    font-weight: var(--instui-component-text-legend-font-weight);\n  }\n\n  &.-transform-uppercase {\n    text-transform: uppercase;\n  }\n\n  &.-transform-lowercase {\n    text-transform: lowercase;\n  }\n\n  &.-transform-capitalize {\n    text-transform: capitalize;\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component text\n * @selector .pfx-text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n  & {\n    font-family: var(--instui-component-text-content-font-family);\n    color: var(--instui-component-text-base-color);\n    font-size: var(--instui-component-text-font-size-medium);\n    font-weight: var(--instui-component-text-font-weight-normal);\n    line-height: var(--instui-component-text-content-line-height);\n  }\n\n  &.-size-xs {\n    font-size: var(--instui-component-text-font-size-x-small);\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-text-font-size-small);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-text-font-size-large);\n  }\n\n  &.-size-xl {\n    font-size: var(--instui-component-text-font-size-x-large);\n  }\n\n  &.-weight-bold {\n    font-weight: var(--instui-component-text-font-weight-bold);\n  }\n\n  &.-style-italic {\n    font-style: italic;\n  }\n\n  &.-color-primary {\n    color: var(--instui-component-text-primary-color);\n  }\n\n  &.-color-secondary {\n    color: var(--instui-component-text-muted-color);\n  }\n\n  &.-color-brand {\n    color: light-dark(\n      var(--instui-color-institutional-brand-primary),\n      var(--instui-color-institutional-brand-font-color-dark)\n    );\n  }\n\n  &.-color-success {\n    color: var(--instui-component-text-success-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-text-error-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-text-warning-color);\n  }\n\n  &:is(.-color-ai-highlight, .-color-ai) {\n    color: var(--instui-component-text-ai-color);\n    background: var(--instui-component-text-ai-background-color);\n  }\n\n  &.-color-primary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-secondary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-primary-on {\n    color: var(--instui-component-text-base-on-color);\n  }\n\n  &.-color-secondary-on {\n    color: var(--instui-component-text-muted-on-color);\n  }\n\n  &.-variant-description-page {\n    font-size: var(--instui-component-text-description-page-font-size);\n    font-weight: var(--instui-component-text-description-page-font-weight);\n    line-height: var(--instui-component-text-description-page-line-height);\n  }\n\n  &.-variant-description-section {\n    font-size: var(--instui-component-text-description-section-font-size);\n    font-weight: var(--instui-component-text-description-section-font-weight);\n    line-height: var(--instui-component-text-description-section-line-height);\n  }\n\n  &.-variant-content {\n    font-size: var(--instui-component-text-content-font-size);\n    line-height: var(--instui-component-text-content-line-height);\n    font-weight: var(--instui-component-text-content-font-weight);\n  }\n\n  &.-variant-content-small {\n    font-size: var(--instui-component-text-content-small-font-size);\n    font-weight: var(--instui-component-text-content-small-font-weight);\n    line-height: var(--instui-component-text-content-small-line-height);\n  }\n\n  &.-variant-content-important {\n    font-size: var(--instui-component-text-content-important-font-size);\n    line-height: var(--instui-component-text-content-important-line-height);\n    font-weight: var(--instui-component-text-content-important-font-weight);\n  }\n\n  &.-variant-content-quote {\n    font-size: var(--instui-component-text-content-quote-font-size);\n    font-weight: var(--instui-component-text-content-quote-font-weight);\n    font-style: var(--instui-component-text-content-quote-font-style);\n    line-height: var(--instui-component-text-content-quote-line-height);\n  }\n\n  &.-variant-legend {\n    font-size: var(--instui-component-text-legend-font-size);\n    line-height: var(--instui-component-text-legend-line-height);\n    font-weight: var(--instui-component-text-legend-font-weight);\n  }\n\n  &.-transform-uppercase {\n    text-transform: uppercase;\n  }\n\n  &.-transform-lowercase {\n    text-transform: lowercase;\n  }\n\n  &.-transform-capitalize {\n    text-transform: capitalize;\n  }\n}\n"
+	"rebrand": "/**\n * @component text\n * @selector .pfx-text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @remarks The `-variant-*` presets and the `-color-*`/`-size-*`/`-weight-*` modifiers all compose on the same element; unlike `heading`, it renders no implicit semantic level.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n  & {\n    font-family: var(--instui-component-text-content-font-family);\n    color: var(--instui-component-text-base-color);\n    font-size: var(--instui-component-text-font-size-medium);\n    font-weight: var(--instui-component-text-font-weight-normal);\n    line-height: var(--instui-component-text-content-line-height);\n  }\n\n  &.-size-xs {\n    font-size: var(--instui-component-text-font-size-x-small);\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-text-font-size-small);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-text-font-size-large);\n  }\n\n  &.-size-xl {\n    font-size: var(--instui-component-text-font-size-x-large);\n  }\n\n  &.-weight-bold {\n    font-weight: var(--instui-component-text-font-weight-bold);\n  }\n\n  &.-style-italic {\n    font-style: italic;\n  }\n\n  &.-color-primary {\n    color: var(--instui-component-text-primary-color);\n  }\n\n  &.-color-secondary {\n    color: var(--instui-component-text-muted-color);\n  }\n\n  &.-color-brand {\n    color: light-dark(\n      var(--instui-color-institutional-brand-primary),\n      var(--instui-color-institutional-brand-font-color-dark)\n    );\n  }\n\n  &.-color-success {\n    color: var(--instui-component-text-success-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-text-error-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-text-warning-color);\n  }\n\n  &:is(.-color-ai-highlight, .-color-ai) {\n    color: var(--instui-component-text-ai-color);\n    background: var(--instui-component-text-ai-background-color);\n  }\n\n  &.-color-primary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-secondary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-primary-on {\n    color: var(--instui-component-text-base-on-color);\n  }\n\n  &.-color-secondary-on {\n    color: var(--instui-component-text-muted-on-color);\n  }\n\n  &.-variant-description-page {\n    font-size: var(--instui-component-text-description-page-font-size);\n    font-weight: var(--instui-component-text-description-page-font-weight);\n    line-height: var(--instui-component-text-description-page-line-height);\n  }\n\n  &.-variant-description-section {\n    font-size: var(--instui-component-text-description-section-font-size);\n    font-weight: var(--instui-component-text-description-section-font-weight);\n    line-height: var(--instui-component-text-description-section-line-height);\n  }\n\n  &.-variant-content {\n    font-size: var(--instui-component-text-content-font-size);\n    line-height: var(--instui-component-text-content-line-height);\n    font-weight: var(--instui-component-text-content-font-weight);\n  }\n\n  &.-variant-content-small {\n    font-size: var(--instui-component-text-content-small-font-size);\n    font-weight: var(--instui-component-text-content-small-font-weight);\n    line-height: var(--instui-component-text-content-small-line-height);\n  }\n\n  &.-variant-content-important {\n    font-size: var(--instui-component-text-content-important-font-size);\n    line-height: var(--instui-component-text-content-important-line-height);\n    font-weight: var(--instui-component-text-content-important-font-weight);\n  }\n\n  &.-variant-content-quote {\n    font-size: var(--instui-component-text-content-quote-font-size);\n    font-weight: var(--instui-component-text-content-quote-font-weight);\n    font-style: var(--instui-component-text-content-quote-font-style);\n    line-height: var(--instui-component-text-content-quote-line-height);\n  }\n\n  &.-variant-legend {\n    font-size: var(--instui-component-text-legend-font-size);\n    line-height: var(--instui-component-text-legend-line-height);\n    font-weight: var(--instui-component-text-legend-font-weight);\n  }\n\n  &.-transform-uppercase {\n    text-transform: uppercase;\n  }\n\n  &.-transform-lowercase {\n    text-transform: lowercase;\n  }\n\n  &.-transform-capitalize {\n    text-transform: capitalize;\n  }\n}\n",
+	"canvas": "/**\n * @component text\n * @selector .pfx-text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @remarks The `-variant-*` presets and the `-color-*`/`-size-*`/`-weight-*` modifiers all compose on the same element; unlike `heading`, it renders no implicit semantic level.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n  & {\n    font-family: var(--instui-component-text-content-font-family);\n    color: var(--instui-component-text-base-color);\n    font-size: var(--instui-component-text-font-size-medium);\n    font-weight: var(--instui-component-text-font-weight-normal);\n    line-height: var(--instui-component-text-content-line-height);\n  }\n\n  &.-size-xs {\n    font-size: var(--instui-component-text-font-size-x-small);\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-text-font-size-small);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-text-font-size-large);\n  }\n\n  &.-size-xl {\n    font-size: var(--instui-component-text-font-size-x-large);\n  }\n\n  &.-weight-bold {\n    font-weight: var(--instui-component-text-font-weight-bold);\n  }\n\n  &.-style-italic {\n    font-style: italic;\n  }\n\n  &.-color-primary {\n    color: var(--instui-component-text-primary-color);\n  }\n\n  &.-color-secondary {\n    color: var(--instui-component-text-muted-color);\n  }\n\n  &.-color-brand {\n    color: light-dark(\n      var(--instui-color-institutional-brand-primary),\n      var(--instui-color-institutional-brand-font-color-dark)\n    );\n  }\n\n  &.-color-success {\n    color: var(--instui-component-text-success-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-text-error-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-text-warning-color);\n  }\n\n  &:is(.-color-ai-highlight, .-color-ai) {\n    color: var(--instui-component-text-ai-color);\n    background: var(--instui-component-text-ai-background-color);\n  }\n\n  &.-color-primary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-secondary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-primary-on {\n    color: var(--instui-component-text-base-on-color);\n  }\n\n  &.-color-secondary-on {\n    color: var(--instui-component-text-muted-on-color);\n  }\n\n  &.-variant-description-page {\n    font-size: var(--instui-component-text-description-page-font-size);\n    font-weight: var(--instui-component-text-description-page-font-weight);\n    line-height: var(--instui-component-text-description-page-line-height);\n  }\n\n  &.-variant-description-section {\n    font-size: var(--instui-component-text-description-section-font-size);\n    font-weight: var(--instui-component-text-description-section-font-weight);\n    line-height: var(--instui-component-text-description-section-line-height);\n  }\n\n  &.-variant-content {\n    font-size: var(--instui-component-text-content-font-size);\n    line-height: var(--instui-component-text-content-line-height);\n    font-weight: var(--instui-component-text-content-font-weight);\n  }\n\n  &.-variant-content-small {\n    font-size: var(--instui-component-text-content-small-font-size);\n    font-weight: var(--instui-component-text-content-small-font-weight);\n    line-height: var(--instui-component-text-content-small-line-height);\n  }\n\n  &.-variant-content-important {\n    font-size: var(--instui-component-text-content-important-font-size);\n    line-height: var(--instui-component-text-content-important-line-height);\n    font-weight: var(--instui-component-text-content-important-font-weight);\n  }\n\n  &.-variant-content-quote {\n    font-size: var(--instui-component-text-content-quote-font-size);\n    font-weight: var(--instui-component-text-content-quote-font-weight);\n    font-style: var(--instui-component-text-content-quote-font-style);\n    line-height: var(--instui-component-text-content-quote-line-height);\n  }\n\n  &.-variant-legend {\n    font-size: var(--instui-component-text-legend-font-size);\n    line-height: var(--instui-component-text-legend-line-height);\n    font-weight: var(--instui-component-text-legend-font-weight);\n  }\n\n  &.-transform-uppercase {\n    text-transform: uppercase;\n  }\n\n  &.-transform-lowercase {\n    text-transform: lowercase;\n  }\n\n  &.-transform-capitalize {\n    text-transform: capitalize;\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component text\n * @selector .pfx-text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @remarks The `-variant-*` presets and the `-color-*`/`-size-*`/`-weight-*` modifiers all compose on the same element; unlike `heading`, it renders no implicit semantic level.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — @deprecated {@link -color-ai-highlight}\n * @modifier -color-ai-highlight — AI-accent text colour with background highlight.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary — Primary text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -color-secondary-inverse — On-dark (secondary inverse) text colour.\n * @modifier -color-secondary-on — Secondary text colour on a coloured background.\n * @modifier -color-primary-on — Primary text colour on a coloured background.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-content — Content type preset.\n * @modifier -variant-content-important — Important-content type preset.\n * @modifier -variant-content-quote — Quote-content type preset.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * ```html\n * <span class=\"pfx-text -size-xs --display-block\">x-small text</span>\n * <span class=\"pfx-text -size-sm --display-block\">small text</span>\n * <span class=\"pfx-text -variant-content-quote --display-block\">Quoted text</span>\n * <span class=\"pfx-text -color-ai-highlight\">AI highlight text</span>\n * ```\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n * @stable\n * @sealed\n */\n@scope (.pfx-text) {\n  & {\n    font-family: var(--instui-component-text-content-font-family);\n    color: var(--instui-component-text-base-color);\n    font-size: var(--instui-component-text-font-size-medium);\n    font-weight: var(--instui-component-text-font-weight-normal);\n    line-height: var(--instui-component-text-content-line-height);\n  }\n\n  &.-size-xs {\n    font-size: var(--instui-component-text-font-size-x-small);\n  }\n\n  &.-size-sm {\n    font-size: var(--instui-component-text-font-size-small);\n  }\n\n  &.-size-lg {\n    font-size: var(--instui-component-text-font-size-large);\n  }\n\n  &.-size-xl {\n    font-size: var(--instui-component-text-font-size-x-large);\n  }\n\n  &.-weight-bold {\n    font-weight: var(--instui-component-text-font-weight-bold);\n  }\n\n  &.-style-italic {\n    font-style: italic;\n  }\n\n  &.-color-primary {\n    color: var(--instui-component-text-primary-color);\n  }\n\n  &.-color-secondary {\n    color: var(--instui-component-text-muted-color);\n  }\n\n  &.-color-brand {\n    color: light-dark(\n      var(--instui-color-institutional-brand-primary),\n      var(--instui-color-institutional-brand-font-color-dark)\n    );\n  }\n\n  &.-color-success {\n    color: var(--instui-component-text-success-color);\n  }\n\n  &.-color-danger {\n    color: var(--instui-component-text-error-color);\n  }\n\n  &.-color-warning {\n    color: var(--instui-component-text-warning-color);\n  }\n\n  &:is(.-color-ai-highlight, .-color-ai) {\n    color: var(--instui-component-text-ai-color);\n    background: var(--instui-component-text-ai-background-color);\n  }\n\n  &.-color-primary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-secondary-inverse {\n    color: var(--instui-component-text-inverse-color);\n  }\n\n  &.-color-primary-on {\n    color: var(--instui-component-text-base-on-color);\n  }\n\n  &.-color-secondary-on {\n    color: var(--instui-component-text-muted-on-color);\n  }\n\n  &.-variant-description-page {\n    font-size: var(--instui-component-text-description-page-font-size);\n    font-weight: var(--instui-component-text-description-page-font-weight);\n    line-height: var(--instui-component-text-description-page-line-height);\n  }\n\n  &.-variant-description-section {\n    font-size: var(--instui-component-text-description-section-font-size);\n    font-weight: var(--instui-component-text-description-section-font-weight);\n    line-height: var(--instui-component-text-description-section-line-height);\n  }\n\n  &.-variant-content {\n    font-size: var(--instui-component-text-content-font-size);\n    line-height: var(--instui-component-text-content-line-height);\n    font-weight: var(--instui-component-text-content-font-weight);\n  }\n\n  &.-variant-content-small {\n    font-size: var(--instui-component-text-content-small-font-size);\n    font-weight: var(--instui-component-text-content-small-font-weight);\n    line-height: var(--instui-component-text-content-small-line-height);\n  }\n\n  &.-variant-content-important {\n    font-size: var(--instui-component-text-content-important-font-size);\n    line-height: var(--instui-component-text-content-important-line-height);\n    font-weight: var(--instui-component-text-content-important-font-weight);\n  }\n\n  &.-variant-content-quote {\n    font-size: var(--instui-component-text-content-quote-font-size);\n    font-weight: var(--instui-component-text-content-quote-font-weight);\n    font-style: var(--instui-component-text-content-quote-font-style);\n    line-height: var(--instui-component-text-content-quote-line-height);\n  }\n\n  &.-variant-legend {\n    font-size: var(--instui-component-text-legend-font-size);\n    line-height: var(--instui-component-text-legend-line-height);\n    font-weight: var(--instui-component-text-legend-font-weight);\n  }\n\n  &.-transform-uppercase {\n    text-transform: uppercase;\n  }\n\n  &.-transform-lowercase {\n    text-transform: lowercase;\n  }\n\n  &.-transform-capitalize {\n    text-transform: capitalize;\n  }\n}\n"
 }.rebrand;
 const toggleDetails$1 = {
 	"rebrand": "/**\n * @component toggle-details\n * @selector .pfx-toggle-details\n * @summary A styled native `<details>` disclosure with a rotating chevron.\n * @remarks Built on the native `<details>` element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.\n * @modifier -variant-filled — Filled (surface) variant.\n * @modifier -chevron-end — Place the chevron after the summary.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-details\" open>\n *   <summary>What ships in this package?</summary>\n *   Class-based component styles, built from the Instructure tokens, plus a prose layer.\n * </details>\n * @structure\n * .pfx-toggle-details {\n *   summary {}\n * }\n * @related toggle-group — The bordered, grouped form of the same disclosure.\n */\n@scope (.pfx-toggle-details) {\n  & {\n    color: var(--instui-component-toggle-details-text-color);\n    font-family: var(--instui-component-toggle-details-font-family);\n    font-weight: var(--instui-component-toggle-details-font-weight);\n    line-height: var(--instui-component-toggle-details-line-height);\n  }\n\n  & > summary {\n    display: flex;\n    align-items: center;\n    gap: var(--instui-component-toggle-details-icon-margin);\n    cursor: pointer;\n    list-style: none;\n    font-size: var(--instui-component-toggle-details-font-size-medium);\n    padding: var(--instui-component-toggle-details-toggle-padding);\n    color: var(--instui-component-toggle-details-text-color);\n  }\n\n  /* Kill the native disclosure marker; we supply a rotating chevron. */\n  & > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  & > summary::before {\n    content: \"\";\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    background: currentColor;\n    -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n    mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n    transition: transform 0.2s ease;\n  }\n\n  &[open] > summary::before {\n    transform: rotate(90deg);\n  }\n\n  /* iconPosition=\"end\" (named -chevron-end, NOT -icon-position-end — a \"-icon-\" class would collide with the\n     generic [class*=\"-icon-\"] glyph painter): push the disclosure chevron to the inline-end. */\n  &.-chevron-end > summary::before {\n    order: 1;\n    margin-inline-start: auto;\n  }\n\n  /* variant=\"filled\": the summary reads as an action-secondary button. */\n  &.-variant-filled > summary {\n    background: var(--instui-color-background-interactive-action-secondary-base);\n    border-radius: var(--instui-component-toggle-details-toggle-border-radius);\n  }\n\n  & > :not(summary) {\n    padding: var(--instui-component-toggle-details-content-padding-medium);\n  }\n\n  &.-size-sm > summary {\n    font-size: var(--instui-component-toggle-details-font-size-small);\n  }\n\n  &.-size-sm > :not(summary) {\n    padding: var(--instui-component-toggle-details-content-padding-small);\n  }\n\n  &.-size-lg > summary {\n    font-size: var(--instui-component-toggle-details-font-size-large);\n  }\n\n  &.-size-lg > :not(summary) {\n    padding: var(--instui-component-toggle-details-content-padding-large);\n  }\n}\n",
@@ -603,9 +603,9 @@ const toggleGroup$1 = {
 	"canvasHighContrast": "/**\n * @component toggle-group\n * @selector .pfx-toggle-group\n * @summary A bordered disclosure built on `<details>`: a chevron summary row and collapsible content.\n * @remarks Built on the same native `<details>` foundation as toggle-details; put the `<summary>` first so it becomes the clickable header row and the rest is the collapsible content.\n * @modifier -without-border — Remove the border.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary row's disclosure chevron, a masked glyph that rotates to point down when the group is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-group\" open>\n *   <summary>Advanced settings</summary>\n *   <div>These options are revealed when the group is expanded. The header row carries a chevron that rotates on open, and the content sits below a divider.</div>\n * </details>\n * @structure\n * .pfx-toggle-group {\n *   summary {}\n *   div {}\n * }\n * @related toggle-details — The single, unbordered form of the same disclosure.\n */\n@scope (.pfx-toggle-group) {\n  & {\n    display: block;\n    border: var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);\n    border-radius: var(--instui-border-radius-md);\n    background: var(--instui-color-background-elevated-surface-base);\n    color: var(--instui-component-toggle-details-text-color);\n    font-family: var(--instui-component-toggle-details-font-family);\n    font-weight: var(--instui-component-toggle-details-font-weight);\n    line-height: var(--instui-component-toggle-details-line-height);\n    overflow: hidden;\n  }\n\n  & > summary {\n    display: flex;\n    align-items: center;\n    gap: var(--instui-component-toggle-details-icon-margin);\n    cursor: pointer;\n    list-style: none;\n    padding: var(--instui-component-toggle-details-content-padding-medium);\n    font-size: var(--instui-component-toggle-details-font-size-medium);\n  }\n\n  & > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  & > summary::before {\n    content: \"\";\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    background: currentColor;\n    -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n    mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n    transition: transform 0.2s ease;\n  }\n\n  &[open] > summary::before {\n    transform: rotate(90deg);\n  }\n\n  /* the collapsible content: separated from the header by a top border in the group colour */\n  & > :not(summary) {\n    border-block-start: var(--instui-border-width-sm) solid\n      var(--instui-component-toggle-group-border-color);\n    padding: var(--instui-component-toggle-details-content-padding-medium);\n  }\n\n  &.-size-sm > summary,\n  &.-size-sm > :not(summary) {\n    font-size: var(--instui-component-toggle-details-font-size-small);\n    padding: var(--instui-component-toggle-details-content-padding-small);\n  }\n\n  &.-size-lg > summary,\n  &.-size-lg > :not(summary) {\n    font-size: var(--instui-component-toggle-details-font-size-large);\n    padding: var(--instui-component-toggle-details-content-padding-large);\n  }\n\n  /* border={false} */\n  &.-without-border {\n    border: 0;\n  }\n\n  &.-without-border > :not(summary) {\n    border-block-start: 0;\n  }\n}\n"
 }.rebrand;
 const tooltip$1 = {
-	"rebrand": "/**\n * @component tooltip\n * @selector .pfx-tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * ```html\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n *   <span class=\"pfx-icon -icon-info\"></span>\n *   <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * ```\n * @structure\n * .pfx-tooltip {\n *   [class*=\"-icon-\"]:optional {}\n *   .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n@scope (.pfx-tooltip) {\n  :scope {\n    position: relative;\n    display: inline-flex;\n\n    > [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .tip {\n      position: absolute;\n      z-index: 1;\n      inset-block-end: 100%;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n      margin-block-end: var(--instui-spacing-space-xs);\n      padding: var(--instui-component-tooltip-padding);\n      background: var(--instui-color-background-inverse);\n      color: var(--instui-color-text-inverse);\n      border-radius: var(--instui-border-radius-sm);\n      font-family: var(--instui-component-tooltip-font-family);\n      font-size: var(--instui-component-tooltip-font-size);\n      font-weight: var(--instui-component-tooltip-font-weight);\n      white-space: nowrap;\n      opacity: 0;\n      visibility: hidden;\n      pointer-events: none;\n      transition: opacity 0.15s ease;\n\n      /* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n         bubble to the other sides. */\n      &.-placement-bottom {\n        inset-block: 100% auto;\n        margin-block: var(--instui-spacing-space-xs) 0;\n      }\n\n      &.-placement-start {\n        inset-block-end: auto;\n        inset-inline: auto 100%;\n        top: 50%;\n        transform: translateY(-50%);\n        margin: 0 var(--instui-spacing-space-xs) 0 0;\n      }\n\n      &.-placement-end {\n        inset-block-end: auto;\n        inset-inline: 100% auto;\n        top: 50%;\n        transform: translateY(-50%);\n        margin: 0 0 0 var(--instui-spacing-space-xs);\n      }\n    }\n\n    /* Show on hover or keyboard focus of the trigger. */\n    &:hover > .tip,\n    &:focus-within > .tip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n}\n",
-	"canvas": "/**\n * @component tooltip\n * @selector .pfx-tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * ```html\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n *   <span class=\"pfx-icon -icon-info\"></span>\n *   <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * ```\n * @structure\n * .pfx-tooltip {\n *   [class*=\"-icon-\"]:optional {}\n *   .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n@scope (.pfx-tooltip) {\n  :scope {\n    position: relative;\n    display: inline-flex;\n\n    > [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .tip {\n      position: absolute;\n      z-index: 1;\n      inset-block-end: 100%;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n      margin-block-end: var(--instui-spacing-space-xs);\n      padding: var(--instui-component-tooltip-padding);\n      background: var(--instui-color-background-inverse);\n      color: var(--instui-color-text-inverse);\n      border-radius: var(--instui-border-radius-sm);\n      font-family: var(--instui-component-tooltip-font-family);\n      font-size: var(--instui-component-tooltip-font-size);\n      font-weight: var(--instui-component-tooltip-font-weight);\n      white-space: nowrap;\n      opacity: 0;\n      visibility: hidden;\n      pointer-events: none;\n      transition: opacity 0.15s ease;\n\n      /* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n         bubble to the other sides. */\n      &.-placement-bottom {\n        inset-block: 100% auto;\n        margin-block: var(--instui-spacing-space-xs) 0;\n      }\n\n      &.-placement-start {\n        inset-block-end: auto;\n        inset-inline: auto 100%;\n        top: 50%;\n        transform: translateY(-50%);\n        margin: 0 var(--instui-spacing-space-xs) 0 0;\n      }\n\n      &.-placement-end {\n        inset-block-end: auto;\n        inset-inline: 100% auto;\n        top: 50%;\n        transform: translateY(-50%);\n        margin: 0 0 0 var(--instui-spacing-space-xs);\n      }\n    }\n\n    /* Show on hover or keyboard focus of the trigger. */\n    &:hover > .tip,\n    &:focus-within > .tip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component tooltip\n * @selector .pfx-tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * ```html\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n *   <span class=\"pfx-icon -icon-info\"></span>\n *   <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * ```\n * @structure\n * .pfx-tooltip {\n *   [class*=\"-icon-\"]:optional {}\n *   .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n@scope (.pfx-tooltip) {\n  :scope {\n    position: relative;\n    display: inline-flex;\n\n    > [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .tip {\n      position: absolute;\n      z-index: 1;\n      inset-block-end: 100%;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n      margin-block-end: var(--instui-spacing-space-xs);\n      padding: var(--instui-component-tooltip-padding);\n      background: var(--instui-color-background-inverse);\n      color: var(--instui-color-text-inverse);\n      border-radius: var(--instui-border-radius-sm);\n      font-family: var(--instui-component-tooltip-font-family);\n      font-size: var(--instui-component-tooltip-font-size);\n      font-weight: var(--instui-component-tooltip-font-weight);\n      white-space: nowrap;\n      opacity: 0;\n      visibility: hidden;\n      pointer-events: none;\n      transition: opacity 0.15s ease;\n\n      /* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n         bubble to the other sides. */\n      &.-placement-bottom {\n        inset-block: 100% auto;\n        margin-block: var(--instui-spacing-space-xs) 0;\n      }\n\n      &.-placement-start {\n        inset-block-end: auto;\n        inset-inline: auto 100%;\n        top: 50%;\n        transform: translateY(-50%);\n        margin: 0 var(--instui-spacing-space-xs) 0 0;\n      }\n\n      &.-placement-end {\n        inset-block-end: auto;\n        inset-inline: 100% auto;\n        top: 50%;\n        transform: translateY(-50%);\n        margin: 0 0 0 var(--instui-spacing-space-xs);\n      }\n    }\n\n    /* Show on hover or keyboard focus of the trigger. */\n    &:hover > .tip,\n    &:focus-within > .tip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n}\n"
+	"rebrand": "/**\n * @component tooltip\n * @selector .pfx-tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @remarks Toggling is pure CSS (`:hover`/`:focus-within`), so the bubble only reaches keyboard users through a focusable trigger; unlike `popover`, it isn't dismissible or click-triggered.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * ```html\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n *   <span class=\"pfx-icon -icon-info\"></span>\n *   <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * ```\n * @structure\n * .pfx-tooltip {\n *   [class*=\"-icon-\"]:optional {}\n *   .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n@scope (.pfx-tooltip) {\n  :scope {\n    position: relative;\n    display: inline-flex;\n\n    > [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .tip {\n      position: absolute;\n      z-index: 1;\n      inset-block-end: 100%;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n      margin-block-end: var(--instui-spacing-space-xs);\n      padding: var(--instui-component-tooltip-padding);\n      background: var(--instui-color-background-inverse);\n      color: var(--instui-color-text-inverse);\n      border-radius: var(--instui-border-radius-sm);\n      font-family: var(--instui-component-tooltip-font-family);\n      font-size: var(--instui-component-tooltip-font-size);\n      font-weight: var(--instui-component-tooltip-font-weight);\n      white-space: nowrap;\n      opacity: 0;\n      visibility: hidden;\n      pointer-events: none;\n      transition: opacity 0.15s ease;\n\n      /* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n         bubble to the other sides. */\n      &.-placement-bottom {\n        inset-block: 100% auto;\n        margin-block: var(--instui-spacing-space-xs) 0;\n      }\n\n      &.-placement-start {\n        inset-block-end: auto;\n        inset-inline: auto 100%;\n        top: 50%;\n        transform: translateY(-50%);\n        margin: 0 var(--instui-spacing-space-xs) 0 0;\n      }\n\n      &.-placement-end {\n        inset-block-end: auto;\n        inset-inline: 100% auto;\n        top: 50%;\n        transform: translateY(-50%);\n        margin: 0 0 0 var(--instui-spacing-space-xs);\n      }\n    }\n\n    /* Show on hover or keyboard focus of the trigger. */\n    &:hover > .tip,\n    &:focus-within > .tip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n}\n",
+	"canvas": "/**\n * @component tooltip\n * @selector .pfx-tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @remarks Toggling is pure CSS (`:hover`/`:focus-within`), so the bubble only reaches keyboard users through a focusable trigger; unlike `popover`, it isn't dismissible or click-triggered.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * ```html\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n *   <span class=\"pfx-icon -icon-info\"></span>\n *   <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * ```\n * @structure\n * .pfx-tooltip {\n *   [class*=\"-icon-\"]:optional {}\n *   .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n@scope (.pfx-tooltip) {\n  :scope {\n    position: relative;\n    display: inline-flex;\n\n    > [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .tip {\n      position: absolute;\n      z-index: 1;\n      inset-block-end: 100%;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n      margin-block-end: var(--instui-spacing-space-xs);\n      padding: var(--instui-component-tooltip-padding);\n      background: var(--instui-color-background-inverse);\n      color: var(--instui-color-text-inverse);\n      border-radius: var(--instui-border-radius-sm);\n      font-family: var(--instui-component-tooltip-font-family);\n      font-size: var(--instui-component-tooltip-font-size);\n      font-weight: var(--instui-component-tooltip-font-weight);\n      white-space: nowrap;\n      opacity: 0;\n      visibility: hidden;\n      pointer-events: none;\n      transition: opacity 0.15s ease;\n\n      /* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n         bubble to the other sides. */\n      &.-placement-bottom {\n        inset-block: 100% auto;\n        margin-block: var(--instui-spacing-space-xs) 0;\n      }\n\n      &.-placement-start {\n        inset-block-end: auto;\n        inset-inline: auto 100%;\n        top: 50%;\n        transform: translateY(-50%);\n        margin: 0 var(--instui-spacing-space-xs) 0 0;\n      }\n\n      &.-placement-end {\n        inset-block-end: auto;\n        inset-inline: 100% auto;\n        top: 50%;\n        transform: translateY(-50%);\n        margin: 0 0 0 var(--instui-spacing-space-xs);\n      }\n    }\n\n    /* Show on hover or keyboard focus of the trigger. */\n    &:hover > .tip,\n    &:focus-within > .tip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component tooltip\n * @selector .pfx-tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @remarks Toggling is pure CSS (`:hover`/`:focus-within`), so the bubble only reaches keyboard users through a focusable trigger; unlike `popover`, it isn't dismissible or click-triggered.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * ```html\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n *   <span class=\"pfx-icon -icon-info\"></span>\n *   <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * ```\n * @structure\n * .pfx-tooltip {\n *   [class*=\"-icon-\"]:optional {}\n *   .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n@scope (.pfx-tooltip) {\n  :scope {\n    position: relative;\n    display: inline-flex;\n\n    > [class*=\"-icon-\"] {\n      line-height: 1;\n    }\n\n    > .tip {\n      position: absolute;\n      z-index: 1;\n      inset-block-end: 100%;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n      margin-block-end: var(--instui-spacing-space-xs);\n      padding: var(--instui-component-tooltip-padding);\n      background: var(--instui-color-background-inverse);\n      color: var(--instui-color-text-inverse);\n      border-radius: var(--instui-border-radius-sm);\n      font-family: var(--instui-component-tooltip-font-family);\n      font-size: var(--instui-component-tooltip-font-size);\n      font-weight: var(--instui-component-tooltip-font-weight);\n      white-space: nowrap;\n      opacity: 0;\n      visibility: hidden;\n      pointer-events: none;\n      transition: opacity 0.15s ease;\n\n      /* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n         bubble to the other sides. */\n      &.-placement-bottom {\n        inset-block: 100% auto;\n        margin-block: var(--instui-spacing-space-xs) 0;\n      }\n\n      &.-placement-start {\n        inset-block-end: auto;\n        inset-inline: auto 100%;\n        top: 50%;\n        transform: translateY(-50%);\n        margin: 0 var(--instui-spacing-space-xs) 0 0;\n      }\n\n      &.-placement-end {\n        inset-block-end: auto;\n        inset-inline: 100% auto;\n        top: 50%;\n        transform: translateY(-50%);\n        margin: 0 0 0 var(--instui-spacing-space-xs);\n      }\n    }\n\n    /* Show on hover or keyboard focus of the trigger. */\n    &:hover > .tip,\n    &:focus-within > .tip {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n}\n"
 }.rebrand;
 const tray$1 = {
 	"rebrand": "/**\n * @component tray\n * @selector .pfx-tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-start — (default) Pin to the start (inline-start) edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-md — (default) Medium.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-regular - @deprecated {@link -size-md} is the new default size.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @remarks Start/end placements resolve against `inset-inline` (logical, direction-aware); the slide-in transform mirrors automatically under an ancestor `[dir=\"rtl\"]`, so no extra markup is needed for right-to-left layouts.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-tray -placement-end -size-sm\">\n *   <span class=\"pfx-heading -level-h3\">Filters</span>\n *   <p class=\"-size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * <button class=\"pfx-button -toggle\">toggle tray</button>\n * ```\n * @structure\n * .pfx-tray {\n *   @component close-button:optional {}\n *   slot {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n@scope (.pfx-tray) {\n  & {\n    position: fixed;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: var(--instui-component-tray-width-md);\n    max-inline-size: 100%;\n    /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n       height:fit-content; so the edge shadows fall outside the viewport. */\n    block-size: auto;\n    max-block-size: none;\n    background: var(--instui-component-tray-background-color);\n    border: var(--instui-component-tray-border-width) solid\n      var(--instui-component-tray-border-color);\n    padding: var(--instui-component-tray-padding);\n    z-index: var(--instui-component-tray-z-index);\n    box-shadow: var(--instui-elevation-topmost);\n  }\n\n  &.-placement-start {\n    inset-inline: 0 auto;\n  }\n\n  &.-placement-end {\n    inset-inline: auto 0;\n  }\n\n  &.-placement-top {\n    inset: 0 0 auto 0;\n    inline-size: 100%;\n    block-size: auto;\n  }\n\n  &.-placement-bottom {\n    inset: auto 0 0 0;\n    inline-size: 100%;\n    block-size: auto;\n  }\n\n  &.-size-xs {\n    inline-size: var(--instui-component-tray-width-xs);\n  }\n\n  &.-size-sm {\n    inline-size: var(--instui-component-tray-width-sm);\n  }\n\n  &.-size-md {\n    inline-size: var(--instui-component-tray-width-md);\n  }\n\n  &.-size-lg {\n    inline-size: var(--instui-component-tray-width-lg);\n  }\n\n  &.-size-xl {\n    inline-size: var(--instui-component-tray-width-xl);\n  }\n\n  &[popover] {\n    margin: 0;\n  }\n\n  &[is=\"dialog\"],\n  dialog& {\n    margin: 0;\n    padding: var(--instui-component-tray-padding);\n    border: var(--instui-component-tray-border-width) solid\n      var(--instui-component-tray-border-color);\n  }\n\n  /* Slide in from the docked edge on open (native popover + @starting-style, no JS). --tray-slide-x/y\n     hold the hidden-state offset per placement; inert where allow-discrete transitions aren't supported. */\n  @supports (transition-behavior: allow-discrete) {\n    &[popover] {\n      --tray-slide-x: -100%;\n      --tray-slide-y: 0%;\n      transition:\n        transform 0.2s ease,\n        overlay 0.2s allow-discrete,\n        display 0.2s allow-discrete;\n      transform: translate(0, 0);\n    }\n\n    &[popover]:not(:popover-open) {\n      transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n    }\n\n    @starting-style {\n      &[popover]:popover-open {\n        transform: translate(var(--tray-slide-x), var(--tray-slide-y));\n      }\n    }\n\n    /* Inline placements dock to logical start/end, so the slide direction must mirror under an\n       ancestor [dir=\"rtl\"]; the end-in-rtl override must win, so it needs one extra class of\n       specificity, and the top/bottom resets must come after this generic flip in source order. */\n    [dir=\"rtl\"] & {\n      --tray-slide-x: 100%;\n    }\n\n    &.-placement-end {\n      --tray-slide-x: 100%;\n    }\n\n    [dir=\"rtl\"] &.-placement-end {\n      --tray-slide-x: -100%;\n    }\n\n    &.-placement-top {\n      --tray-slide-x: 0%;\n      --tray-slide-y: -100%;\n    }\n\n    &.-placement-bottom {\n      --tray-slide-x: 0%;\n      --tray-slide-y: 100%;\n    }\n  }\n}\n",
@@ -1160,6 +1160,7 @@ const heading = defineComponent({
 /**
  * @component heading
  * @summary Heading typography from \`-level-h1\` to \`-level-h6\`.
+ * @remarks The \`-variant-*\` presets override a \`-level-*\`'s font-size and font-weight, so combine only one of each family per element.
  * @modifier -level-h1 — Render at the h1 type scale.
  * @modifier -level-h2 — Render at the h2 type scale.
  * @modifier -level-h3 — Render at the h3 type scale.
@@ -1370,6 +1371,7 @@ const inputGroup = defineComponent({
 /**
  * @component input-group
  * @summary A facade around a text input with leading and trailing icon slots.
+ * @remarks Wraps the same field chrome as \`text-input\` with icon slots either side of it; \`-should-not-wrap\` is only needed when the group's contents would otherwise overflow onto a second line.
  * @modifier -disabled — Disabled state.
  * @modifier -invalid — Invalid (error) state.
  * @modifier -readonly — Read-only state.
@@ -1521,6 +1523,7 @@ const numberInput = defineComponent({
 /**
  * @component number-input
  * @summary A number-input facade with a +/- spinner column.
+ * @remarks The \`.arrows\` buttons are \`aria-hidden\` and purely presentational — incrementing/decrementing the value on click is the consumer's JS to wire up.
  * @modifier -disabled — Disabled state.
  * @modifier -invalid — Invalid (error) state.
  * @modifier -readonly — Read-only state.
@@ -1717,6 +1720,7 @@ const simpleSelect = defineComponent({
 /**
  * @component simple-select
  * @summary A styled native \`<select>\` with a caret, matching the text-input states and sizes.
+ * @remarks Wraps a plain native \`<select>\` with no custom dropdown/menu markup, so browser-native option rendering and keyboard behavior apply as-is; it shares its field chrome with \`text-input\` via \`fieldControlBase\`.
  * @modifier -disabled — Disabled state.
  * @modifier -invalid — Invalid (error) state.
  * @modifier -readonly — Read-only state.
@@ -1886,6 +1890,7 @@ const textArea = defineComponent({
 /**
  * @component text-area
  * @summary A styled, resizable native \`<textarea>\` with the same states and sizes as the text input.
+ * @remarks Shares \`fieldControlBase\` with \`text-input\` and \`simple-select\`, so it renders the same border, background, and focus states; only \`resize: vertical\` and the taller minimum height are unique to it.
  * @modifier -disabled — Disabled state.
  * @modifier -invalid — Invalid (error) state.
  * @modifier -readonly — Read-only state.
@@ -1923,6 +1928,7 @@ const textInput = defineComponent({
 /**
  * @component text-input
  * @summary A styled native \`<input>\` — including \`date\`, \`time\`, and \`datetime-local\`, where the browser supplies the picker — with validation states and sizes.
+ * @remarks Shares its border, background, and state chrome with \`text-area\`, \`simple-select\`, \`number-input\`, and \`input-group\` via \`fieldControlBase\`; for \`date\`/\`time\`/\`datetime-local\` types the browser supplies its own picker UI, which this stylesheet doesn't style.
  * @modifier -disabled — Disabled state.
  * @modifier -invalid — Invalid (error) state.
  * @modifier -readonly — Read-only state.
@@ -3141,7 +3147,7 @@ ${base} {
   overflow-wrap: break-word;
   word-break: break-all;
   font-family: var(--instui-component-truncate-text-font-family);
-  line-height: var(--instui-component-truncate-text-line-height);
+  line-height: var(--instui-line-height-paragraph-base);
 }
 
 ${character} { word-break: break-all; }