@pantoken/components 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/assets/fonts/AtkinsonHyperlegibleNext/OFL.txt +93 -0
  2. package/dist/base.css +1 -1
  3. package/dist/component-icons.css +1 -0
  4. package/dist/components.css +1 -1
  5. package/dist/index.d.mts +19 -45
  6. package/dist/index.mjs +307 -227
  7. package/package.json +25 -19
package/dist/index.mjs CHANGED
@@ -1,4 +1,5 @@
1
1
  import { alpha, darken } from "@pantoken/plugin-colors";
2
+ import { ELEVATION_NAMES, FOCUSABLE_SELECTOR, elevationDeclarations, elevationDeclarations as elevationDeclarations$1, focusOutlineDeclarations, focusOutlineDeclarations as focusOutlineDeclarations$1, focusOutlineRules, focusOutlineRules as focusOutlineRules$1 } from "@pantoken/utils";
2
3
  //#region src/lib/aliases.ts
3
4
  /** `@modifier -alias — @deprecated {@link -canonical}` (em-dash or hyphen separator; optional leading dot). */
4
5
  const DEPRECATED_ALIAS = /@modifier\s+(-[\w-]+)\s+[—-]\s+@deprecated\s+\{@link\s+\.?(-[\w-]+)\s*\}/gu;
@@ -156,9 +157,9 @@ function splitLeadingDocComment(raw) {
156
157
  }
157
158
  function make(kind, input) {
158
159
  const { css: cssBuilder } = input;
159
- const aliasPairs = deprecatedAliasPairs(cssBuilder("instui-"));
160
- const rules = (prefix) => {
161
- const { comment, body } = splitLeadingDocComment(cssBuilder(prefix));
160
+ const aliasPairs = deprecatedAliasPairs(cssBuilder("instui-", { theme: "rebrand" }));
161
+ const rules = (prefix, options = {}) => {
162
+ const { comment, body } = splitLeadingDocComment(cssBuilder(prefix, options));
162
163
  return `${withSizeAliasDocs(comment, body)}\n${withAliases(withSizeAliases(body), aliasPairs).trim()}\n`;
163
164
  };
164
165
  return {
@@ -167,7 +168,7 @@ function make(kind, input) {
167
168
  rules,
168
169
  css: (options = {}) => {
169
170
  const prefix = options.prefix || "";
170
- return wrap(input.name, prefix, rules(ns(prefix)));
171
+ return wrap(input.name, prefix, rules(ns(prefix), options));
171
172
  }
172
173
  };
173
174
  }
@@ -202,54 +203,242 @@ const defineRule = (input) => make("rule", input);
202
203
  * A guard test asserts `SENTINEL` never survives into any emitted sheet and never occurs in a token name.
203
204
  */
204
205
  const SENTINEL = "pfx-";
205
- //#endregion
206
- //#region src/generated/component-styles.ts
207
- const alert$1 = "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n";
208
- const avatar$1 = "/**\n * @component avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient.\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — Ash palette colour.\n * @modifier -color-blue — Blue palette colour.\n * @modifier -color-green — Green palette colour.\n * @modifier -color-grey — Grey palette colour.\n * @modifier -color-orange — Orange palette colour.\n * @modifier -color-red — Red palette colour.\n * @modifier -has-inverse-color — Use the inverse (on-dark) text colour.\n * @modifier -shape-rectangle — Square (rectangular) shape instead of a circle.\n * @modifier -show-border — Add a border ring.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-2xl — Two sizes larger.\n * @modifier -color-accent1 — @deprecated {@link -color-blue}\n * @modifier -color-accent2 — @deprecated {@link -color-green}\n * @modifier -color-accent3 — @deprecated {@link -color-red}\n * @modifier -color-accent4 — @deprecated {@link -color-orange}\n * @modifier -color-accent5 — @deprecated {@link -color-ash}\n * @modifier -color-accent6 — @deprecated {@link -color-grey}\n * @example\n * ```html\n * <span class=\"pfx-avatar instui-me-sm\">DW</span>\n * <span class=\"pfx-avatar -color-ai\">AI</span>\n * ```\n * @related byline — Can host an avatar as its leading hero figure.\n */\n.pfx-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-avatar-size-md);\n height: var(--instui-component-avatar-size-md);\n border-radius: 50%;\n overflow: hidden;\n background: var(--instui-component-avatar-background-color);\n color: var(--instui-component-avatar-blue-text-color);\n border: var(--instui-component-avatar-border-width-sm) solid\n var(--instui-component-avatar-border-color);\n font-family: var(--instui-component-avatar-font-family);\n font-size: var(--instui-component-avatar-font-size-md);\n font-weight: var(--instui-component-avatar-font-weight);\n}\n\n.pfx-avatar.-shape-rectangle {\n border-radius: var(--instui-component-avatar-rectangle-radius);\n}\n\n.pfx-avatar.-size-sm {\n width: var(--instui-component-avatar-size-sm);\n height: var(--instui-component-avatar-size-sm);\n font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-2xs {\n width: var(--instui-component-avatar-size2xs);\n height: var(--instui-component-avatar-size2xs);\n font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs {\n width: var(--instui-component-avatar-size-xs);\n height: var(--instui-component-avatar-size-xs);\n font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-lg {\n width: var(--instui-component-avatar-size-lg);\n height: var(--instui-component-avatar-size-lg);\n font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl {\n width: var(--instui-component-avatar-size-xl);\n height: var(--instui-component-avatar-size-xl);\n font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl {\n width: var(--instui-component-avatar-size2xl);\n height: var(--instui-component-avatar-size2xl);\n font-size: var(--instui-component-avatar-font-size2xl);\n}\n\n.pfx-avatar.-color-ash {\n color: var(--instui-component-avatar-ash-text-color);\n}\n\n.pfx-avatar.-color-ash.-has-inverse-color {\n background: var(--instui-component-avatar-ash-background-color);\n}\n\n.pfx-avatar.-color-blue {\n color: var(--instui-component-avatar-blue-text-color);\n}\n\n.pfx-avatar.-color-blue.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n}\n\n.pfx-avatar.-color-green {\n color: var(--instui-component-avatar-green-text-color);\n}\n\n.pfx-avatar.-color-green.-has-inverse-color {\n background: var(--instui-component-avatar-green-background-color);\n}\n\n.pfx-avatar.-color-grey {\n color: var(--instui-component-avatar-grey-text-color);\n}\n\n.pfx-avatar.-color-grey.-has-inverse-color {\n background: var(--instui-component-avatar-grey-background-color);\n}\n\n.pfx-avatar.-color-orange {\n color: var(--instui-component-avatar-orange-text-color);\n}\n\n.pfx-avatar.-color-orange.-has-inverse-color {\n background: var(--instui-component-avatar-orange-background-color);\n}\n\n.pfx-avatar.-color-red {\n color: var(--instui-component-avatar-red-text-color);\n}\n\n.pfx-avatar.-color-red.-has-inverse-color {\n background: var(--instui-component-avatar-red-background-color);\n}\n\n/* ai: always the violet→sea gradient fill with on-colour text (no border). */\n.pfx-avatar.-color-ai {\n background: linear-gradient(\n to bottom,\n var(--instui-component-avatar-ai-top-gradient-color),\n var(--instui-component-avatar-ai-bottom-gradient-color)\n );\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* hasInverseColor: solid fill (default the accent1/blue surface) + on-colour initials, no ring. A\n `-color-*` companion overrides the fill per colour (that rule is more specific). */\n.pfx-avatar.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* showBorder=\"always\": force the ring back on, even over an inverse fill or a photo. */\n.pfx-avatar.-show-border {\n border-width: var(--instui-component-avatar-border-width-md);\n border-style: solid;\n border-color: var(--instui-component-avatar-border-color);\n}\n\n/* A photo: an <img> child fills the chip and covers the initials (image takes priority). */\n.pfx-avatar > img {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n border-radius: inherit;\n}\n";
209
- const badge$1 = "/**\n * @component badge\n * @summary A small count or status dot placed over a target's corner.\n * @modifier -color-success — A positive/complete count.\n * @modifier -color-danger — An attention/error count.\n * @modifier -color-inverse — On-dark: a light chip with dark text.\n * @modifier -type-notification — A dot only, no count.\n * @modifier -pulse — A pulsing attention ring.\n * @modifier -standalone — Render inline, not positioned over a target's corner.\n * @modifier -placement-top-start — Position at the top-start corner.\n * @modifier -placement-top-end — Position at the top-end corner.\n * @modifier -placement-bottom-start — Position at the bottom-start corner.\n * @modifier -placement-bottom-end — Position at the bottom-end corner.\n * @modifier -placement-start-center — Position centred on the start edge.\n * @modifier -placement-end-center — Position centred on the end edge.\n * @pseudo ::before — The pulsing attention ring drawn in the badge's accent colour (the `-pulse` variant).\n * @cssproperty --pantoken-badge-accent <color> — The chip fill; each `-color-*` variant and the pulse ring read from it.\n * @cssproperty --pantoken-badge-text <color> — The text colour, paired to the accent so it stays legible.\n * @remarks To place a badge over a target, wrap both in a `.pfx-badge-wrapper` (the position anchor) and pin the badge with a `-placement-*` modifier.\n * @animation pantoken-badge-pulse — The pulse ring animation.\n * @example\n * <span class=\"pfx-badge-wrapper\">\n * <button class=\"pfx-button\">Inbox</button>\n * <span class=\"pfx-badge -placement-top-end\">4</span>\n * </span>\n * @wrapper pfx-badge-wrapper\n * @structure\n * The badge renders inline on its own, or inside an optional `pfx-badge-wrapper` that anchors it over a target.\n * .pfx-badge-wrapper:opt {\n * slot {}\n * .pfx-badge {}\n * }\n * @related pill — The inline label-chip counterpart.\n * @demo self:badge\n */\n@keyframes pantoken-badge-pulse {\n from {\n transform: scale(1);\n opacity: 0.7;\n }\n to {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n/* Wrap a target in this so a placed badge can sit over its corner. It contains the badge (rather than\n being contained by it), so it's a flat prefixed class, not a scoped element. */\n.pfx-badge-wrapper {\n position: relative;\n display: inline-flex;\n}\n.pfx-badge {\n --pantoken-badge-accent: var(--instui-component-badge-color-primary);\n /* The primary fill is the brand colour, which flips dark→light between light and dark mode; pair the\n text so it stays legible either way (white on the light-mode navy, dark on the dark-mode light\n fill). The saturated status fills below keep white text in both modes. */\n --pantoken-badge-text: light-dark(\n var(--instui-component-badge-color),\n var(--instui-component-badge-color-inverse)\n );\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--instui-component-badge-size);\n height: var(--instui-component-badge-size);\n padding: 0 var(--instui-component-badge-padding);\n font-family: var(--instui-component-badge-font-family);\n font-size: var(--instui-component-badge-font-size);\n font-weight: var(--instui-component-badge-font-weight);\n line-height: 1;\n border-radius: var(--instui-component-badge-border-radius);\n background: var(--pantoken-badge-accent);\n color: var(--pantoken-badge-text);\n}\n.pfx-badge.-color-success {\n --pantoken-badge-accent: var(--instui-component-badge-color-success);\n --pantoken-badge-text: var(--instui-component-badge-color);\n}\n.pfx-badge.-color-danger {\n --pantoken-badge-accent: var(--instui-component-badge-color-danger);\n --pantoken-badge-text: var(--instui-component-badge-color);\n}\n/* Inverse swaps fill and text (InstUI): a light chip with dark text, for a colour/dark surface. */\n.pfx-badge.-color-inverse {\n --pantoken-badge-accent: var(--instui-component-badge-color);\n --pantoken-badge-text: var(--instui-component-badge-color-inverse);\n}\n/* Notification: a small dot, no count. */\n.pfx-badge.-type-notification {\n min-width: 0;\n width: var(--instui-spacing-space-sm);\n height: var(--instui-spacing-space-sm);\n padding: 0;\n font-size: 0;\n}\n/* Pulse: an expanding ring in the badge's accent colour (InstUI `pulse`). */\n.pfx-badge.-pulse::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border: var(--instui-border-width-md) solid var(--pantoken-badge-accent);\n border-radius: inherit;\n animation: pantoken-badge-pulse 1.2s ease-out infinite;\n}\n/* Placement: position the badge over a `.badge-wrapper` target. InstUI's countOffset is 0.5rem. */\n.pfx-badge.-placement-top-end,\n.pfx-badge.-placement-top-start,\n.pfx-badge.-placement-bottom-end,\n.pfx-badge.-placement-bottom-start,\n.pfx-badge.-placement-start-center,\n.pfx-badge.-placement-end-center {\n position: absolute;\n}\n.pfx-badge.-placement-top-end {\n top: -0.5rem;\n inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-top-start {\n top: -0.5rem;\n inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-bottom-end {\n bottom: -0.5rem;\n inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-bottom-start {\n bottom: -0.5rem;\n inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-end-center {\n top: 50%;\n inset-inline-end: -0.5rem;\n transform: translateY(-50%);\n}\n.pfx-badge.-placement-start-center {\n top: 50%;\n inset-inline-start: -0.5rem;\n transform: translateY(-50%);\n}\n/* Standalone: the inline chip, in flow — resets any placement. */\n.pfx-badge.-standalone {\n position: relative;\n inset: auto;\n transform: none;\n}\n";
210
- const billboard$1 = "/**\n * @component billboard\n * @summary A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.\n * @modifier -clickable — Interactive (clickable) styling with hover feedback.\n * @modifier -icon-* — Render a leading icon glyph on `.hero` (e.g. `<span class=\"hero -icon-inbox\"></span>`).\n * @modifier -size-sm — Small: tighter spacing with smaller heading, message, and hero icon.\n * @modifier -size-small — Long-form alias of {@link -size-sm}.\n * @modifier -size-md — Medium (default): standard spacing with medium heading, message, and hero icon.\n * @modifier -size-medium — Long-form alias of {@link -size-md}.\n * @modifier -size-lg — Large: roomier spacing with larger heading, message, and hero icon.\n * @modifier -size-large — Long-form alias of {@link -size-lg}.\n * @part .hero — The optional leading icon or image.\n * @part .heading — The billboard heading.\n * @part .message — The supporting message.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-billboard -size-md -clickable\" tabindex=\"0\">\n * <span class=\"hero -icon-inbox\"></span>\n * <div class=\"heading\">No items yet</div>\n * <div class=\"message\">Create your first item to get started.</div>\n * </div>\n * ```\n * @structure\n * .pfx-billboard {\n * .hero:optional {}\n * .heading {}\n * .message {}\n * }\n * @todo `instructure-design-tokens` is missing several values defined in the `Billboard` component, so we hardcode them here for now. When the tokens are added, we should remove the hardcoded values and use the tokens instead.\n */\n.pfx-billboard {\n display: block;\n text-align: center;\n background: var(--instui-component-billboard-background-color);\n padding: var(--instui-component-billboard-padding-medium);\n margin: var(--instui-component-billboard-medium-margin);\n font-family: var(--instui-component-billboard-font-family);\n color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-size-sm {\n padding: var(--instui-component-billboard-padding-small);\n}\n\n.pfx-billboard.-size-md,\n.pfx-billboard.-size-medium {\n padding: var(--instui-component-billboard-padding-medium);\n}\n\n.pfx-billboard.-size-lg {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-large {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-sm .message {\n font-size: var(--instui-font-size-text-sm);\n}\n\n.pfx-billboard.-size-md .message,\n.pfx-billboard.-size-medium .message {\n font-size: var(--instui-font-size-text-base);\n}\n\n.pfx-billboard.-size-lg .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-size-large .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-clickable {\n cursor: pointer;\n border: var(--instui-component-billboard-button-border-width)\n var(--instui-component-billboard-button-border-style) transparent;\n border-radius: var(--instui-component-billboard-button-border-radius);\n}\n\n.pfx-billboard.-clickable:hover {\n border-style: dashed;\n border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:focus {\n border-style: solid;\n border-color: var(--instui-color-text-base);\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:active {\n background: var(--instui-component-billboard-clickable-active-bg);\n border-style: solid;\n border-color: var(--instui-color-text-base);\n}\n\n/* Fallback for environments where @scope is not applied: keep hero icon sizes in sync with size modifiers. */\n.pfx-billboard > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard > .hero[class*=\"-icon-\"] {\n line-height: 1;\n}\n\n.pfx-billboard.-size-sm > .hero,\n.pfx-billboard.-size-small > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n}\n\n.pfx-billboard.-size-md > .hero,\n.pfx-billboard.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard.-size-lg > .hero,\n.pfx-billboard.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n}\n\n@scope (.pfx-billboard) {\n /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n :scope > .hero {\n display: inline-flex;\n justify-content: center;\n margin-block-end: var(--instui-spacing-space-sm);\n color: var(--instui-color-text-base);\n font-size: var(--instui-component-icon-illu-md);\n }\n\n /* The documented `-icon-*` modifier lives directly on .hero. */\n :scope > .hero[class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope.-size-sm > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-md > .hero,\n :scope.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n :scope.-size-lg > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-sm > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-small > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-md > .hero[class*=\"-icon-\"],\n :scope.-size-medium > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n :scope.-size-lg > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-large > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n :scope > .heading {\n margin: 0 0 var(--instui-spacing-space-xs);\n color: var(--instui-color-text-base);\n font-weight: bold;\n font-size: var(--instui-component-text-font-size-x-x-large);\n }\n\n :scope > .message {\n color: var(--instui-color-text-base);\n font-size: var(--instui-font-size-text-base);\n }\n\n :scope.-clickable:hover > .hero {\n color: var(--instui-component-link-text-color);\n }\n\n :scope.-clickable:active > .hero {\n color: var(--instui-component-link-on-color-text-color);\n }\n}\n";
211
- const breadcrumb$1 = "/**\n * @component breadcrumb\n * @summary A breadcrumb trail with `/` separators; the last crumb is the current page.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -icon-* — Render a glyph icon in a crumb link (for example, home in the first crumb).\n * @part .item — A crumb; the last one is the current page.\n * @pseudo ::after — Renders the `/` separator after every crumb except the last.\n * @a11y Wrap the trail in `<nav aria-label>` and mark the current page's crumb with `aria-current=\"page\"`.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n * <span class=\"item\">\n * <a href=\"#\"><span class=\"pfx-icon -icon-house\"></span> Home</a>\n * </span>\n * <span class=\"item\"><a href=\"#\">Guides</a></span>\n * <span class=\"item\"><a href=\"#\">Components</a></span>\n * <span class=\"item\" aria-current=\"page\">Breadcrumb</span>\n * </nav>\n * @structure\n * .pfx-breadcrumb {\n * .item {\n * a {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * @related link — Styles each crumb as a link.\n */\n.pfx-breadcrumb {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-breadcrumb-gap-md);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm {\n gap: var(--instui-component-breadcrumb-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-lg {\n gap: var(--instui-component-breadcrumb-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n}\n\n.pfx-breadcrumb.-size-sm .item:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n}\n\n.pfx-breadcrumb.-size-lg .item:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n}\n\n@scope (.pfx-breadcrumb) {\n :scope a {\n color: var(--instui-component-link-text-color);\n text-decoration: none;\n }\n\n :scope a [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope a:hover {\n color: var(--instui-component-link-text-hover-color);\n text-decoration: underline;\n }\n\n :scope > .item:not(:last-child)::after {\n content: \"/\";\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n color: var(--instui-color-text-muted);\n }\n}\n";
212
- const byline$1 = "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <div class=\"pfx-byline -size-md\">\n * <span class=\"pfx-icon -icon-megaphone\"></span>\n * <div>\n * <div class=\"title\">What's new</div>\n * <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n * </div>\n * </div>\n * @structure\n * .pfx-byline {\n * [class*=\"-icon-\"]:optional {}\n * div {\n * .title {}\n * .description {}\n * }\n * }\n */\n.pfx-byline {\n display: flex;\n align-items: center;\n gap: var(--instui-component-byline-figure-margin);\n background: var(--instui-component-byline-background);\n color: var(--instui-component-byline-color);\n font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n :scope > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n .title {\n margin: 0 0 var(--instui-component-byline-title-margin);\n font-size: var(--instui-component-byline-title-font-size);\n font-weight: var(--instui-component-byline-title-font-weight);\n line-height: var(--instui-component-byline-title-line-height);\n }\n\n .description {\n font-size: var(--instui-component-byline-description-font-size);\n font-weight: var(--instui-component-byline-description-font-weight);\n line-height: var(--instui-component-byline-description-line-height);\n }\n}\n";
213
- const calendar$1 = "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @part .day — A day cell; `-today`, `-selected`, and `-outside-month` mark its state.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n * <div class=\"nav\">\n * <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n * <strong>March 2026</strong>\n * <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n * </div>\n * <div class=\"grid\">\n * <span class=\"weekday\">Su</span>\n * <span class=\"weekday\">Mo</span>\n * <span class=\"weekday\">Tu</span>\n * <span class=\"weekday\">We</span>\n * <span class=\"weekday\">Th</span>\n * <span class=\"weekday\">Fr</span>\n * <span class=\"weekday\">Sa</span>\n * <span class=\"day -outside-month\">23</span>\n * <span class=\"day -outside-month\">24</span>\n * <span class=\"day -outside-month\">25</span>\n * <span class=\"day -outside-month\">26</span>\n * <span class=\"day -outside-month\">27</span>\n * <span class=\"day -outside-month\">28</span>\n * <span class=\"day\">1</span>\n * <span class=\"day\">2</span>\n * <span class=\"day\">3</span>\n * <span class=\"day\">4</span>\n * <span class=\"day\">5</span>\n * <span class=\"day\">6</span>\n * <span class=\"day -today\">7</span>\n * <span class=\"day\">8</span>\n * <span class=\"day\">9</span>\n * <span class=\"day\">10</span>\n * <span class=\"day\">11</span>\n * <span class=\"day -selected\">12</span>\n * <span class=\"day\">13</span>\n * <span class=\"day\">14</span>\n * <span class=\"day\">15</span>\n * </div>\n * </div>\n * @structure\n * .pfx-calendar {\n * .nav {\n * .pfx-button {}\n * strong {}\n * }\n * .grid {\n * .weekday {}\n * .day {}\n * }\n * }\n */\n.pfx-calendar {\n display: inline-block;\n text-align: center;\n background: var(--instui-component-calendar-background);\n color: var(--instui-component-calendar-color);\n font-family: var(--instui-component-calendar-font-family);\n font-size: var(--instui-component-calendar-font-size);\n font-weight: var(--instui-component-calendar-font-weight);\n line-height: var(--instui-component-calendar-line-height);\n}\n@scope (.pfx-calendar) {\n /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n only spaces the row below itself, so margin is block-end only — no inline inset). */\n :scope > .nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-block-end: var(--instui-component-calendar-nav-margin);\n }\n /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n whose day table spaces cells with the browser-default border-spacing in both directions. */\n :scope > .grid {\n display: grid;\n grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n justify-content: center;\n gap: var(--instui-spacing-space2xs);\n }\n .weekday,\n .day {\n display: flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--instui-component-calendar-day-min-width);\n block-size: var(--instui-component-calendar-day-height);\n }\n .weekday {\n font-weight: var(--instui-font-weight-interactive);\n }\n .day {\n font-size: var(--instui-component-calendar-day-font-size);\n color: var(--instui-component-calendar-day-color);\n background: var(--instui-component-calendar-day-background);\n cursor: pointer;\n }\n .day.-outside-month {\n color: var(--instui-component-calendar-day-outside-month-color);\n }\n .day.-today {\n background: var(--instui-component-calendar-day-today-background);\n color: var(--instui-component-calendar-day-today-color);\n border-radius: var(--instui-component-calendar-day-today-border-radius);\n }\n .day.-selected {\n background: var(--instui-component-calendar-day-selected-background);\n color: var(--instui-component-calendar-day-selected-color);\n border-radius: var(--instui-component-calendar-day-selected-border-radius);\n }\n}\n";
214
- const checkbox$1 = "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * <label class=\"pfx-checkbox\"><input type=\"checkbox\" checked> Checked</label>\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/* 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.pfx-checkbox.-label-placement-start {\n flex-direction: row-reverse;\n}\n.pfx-checkbox.-label-placement-top {\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-checkbox-control-size-md);\n height: var(--instui-component-checkbox-control-size-md);\n margin-block: var(--instui-component-checkbox-control-vertical-margin);\n border: var(--instui-component-checkbox-border-width) solid\n var(--instui-component-checkbox-border-color);\n border-radius: var(--instui-component-checkbox-border-radius);\n background: var(--instui-component-checkbox-background-color);\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease;\n}\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\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.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.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.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/* 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.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.pfx-checkbox:has(input:disabled) {\n color: var(--instui-component-checkbox-label-disabled-color);\n}\n.pfx-checkbox:hover {\n color: var(--instui-component-checkbox-label-hover-color);\n}\n.pfx-checkbox.-size-sm {\n font-size: var(--instui-component-checkbox-font-size-sm);\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.pfx-checkbox.-size-lg {\n font-size: var(--instui-component-checkbox-font-size-lg);\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.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.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.pfx-checkbox.-readonly {\n color: var(--instui-component-checkbox-label-readonly-color);\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@scope (.pfx-checkbox) {\n :scope.-required .asterisk {\n color: var(--instui-component-checkbox-asterisk-color);\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.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/* 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.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n background: var(--instui-component-radio-input-toggle-background-success);\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.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";
215
- const closeButton$1 = "/**\n * @component close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n.pfx-close-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n min-height: var(--instui-component-base-button-medium-height);\n padding: var(--instui-spacing-space-xs);\n border: 0;\n background: transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n color: var(--instui-color-text-interactive-action-secondary-base);\n cursor: pointer;\n}\n.pfx-close-button::before {\n content: \"\";\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n}\n.pfx-close-button:hover {\n background: var(--instui-color-background-interactive-action-tertiary-hover);\n}\n.pfx-close-button:active {\n background: var(--instui-color-background-interactive-action-tertiary-active);\n}\n.pfx-close-button.-size-sm {\n min-height: var(--instui-component-base-button-small-height);\n}\n.pfx-close-button.-size-lg {\n min-height: var(--instui-component-base-button-large-height);\n}\n.pfx-close-button.-color-inverse {\n color: var(--instui-component-base-button-primary-inverse-ghost-color);\n}\n";
216
- const contextView$1 = "/**\n * @component context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n.pfx-context-view {\n position: relative;\n display: inline-block;\n padding: var(--instui-spacing-space-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-component-context-view-arrow-border-width) solid\n var(--instui-component-context-view-arrow-border-color);\n border-radius: var(--instui-component-context-view-border-radius);\n /* ContextView floats over content — InstUI gives it a shadow. */\n box-shadow: var(--instui-elevation-above);\n}\n/* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n without it, a surface-coloured caret is invisible against a matching surface. */\n.pfx-context-view::before,\n.pfx-context-view::after {\n content: \"\";\n position: absolute;\n border-style: solid;\n border-color: transparent;\n}\n.pfx-context-view::before {\n border-width: calc(\n var(--instui-component-context-view-arrow-size) +\n var(--instui-component-context-view-arrow-border-width)\n );\n}\n.pfx-context-view::after {\n border-width: var(--instui-component-context-view-arrow-size);\n}\n/* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n pointing down. */\n.pfx-context-view::before {\n top: 100%;\n inset-inline-start: calc(\n var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n );\n border-top-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view::after {\n top: 100%;\n inset-inline-start: var(--instui-spacing-space-lg);\n border-top-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"bottom\": caret on the top edge, pointing up. */\n.pfx-context-view.-placement-bottom::before {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-bottom::after {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n.pfx-context-view.-placement-start::before,\n.pfx-context-view.-placement-start::after {\n top: 50%;\n inset-inline-start: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n}\n.pfx-context-view.-placement-start::before {\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-start::after {\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n.pfx-context-view.-placement-end::before,\n.pfx-context-view.-placement-end::after {\n top: 50%;\n inset-inline-start: auto;\n inset-inline-end: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n}\n.pfx-context-view.-placement-end::before {\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-end::after {\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n.pfx-context-view.-color-inverse {\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::before {\n border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::after {\n border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::before {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::after {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::before {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::after {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::before {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::after {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n/* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n supported; elsewhere the UA centres it. */\n[popover].pfx-context-view {\n position: fixed;\n overflow: visible;\n margin: 0;\n}\n[popover].pfx-context-view:not(:popover-open) {\n display: none;\n}\n/* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n@supports (position-area: block-end) {\n [popover].pfx-context-view {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n [popover].pfx-context-view.-placement-top {\n position-area: block-start;\n }\n [popover].pfx-context-view.-placement-bottom {\n position-area: block-end;\n }\n [popover].pfx-context-view.-placement-start {\n position-area: inline-start center;\n }\n [popover].pfx-context-view.-placement-end {\n position-area: inline-end center;\n }\n}\n";
217
- const fileDrop$1 = "/**\n * @component file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n * <span class=\"pfx-icon -icon-cloud-upload\"></span>\n * <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n * <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n * <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n * [class*=\"-icon-\"]:optional {}\n * .pfx-text {\n * strong {}\n * }\n * .pfx-text {}\n * input {}\n * }\n */\n.pfx-file-drop {\n display: block;\n text-align: center;\n padding: var(--instui-spacing-space-lg);\n color: var(--instui-color-text-base);\n background: var(--instui-component-file-drop-background-color);\n border: var(--instui-component-file-drop-border-width)\n var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n border-radius: var(--instui-component-file-drop-border-radius);\n}\n\n.pfx-file-drop:hover,\n.pfx-file-drop.-hover {\n border-color: var(--instui-component-file-drop-hover-border-color);\n}\n\n.pfx-file-drop.-accepted {\n border-color: var(--instui-component-file-drop-accepted-color);\n}\n\n.pfx-file-drop.-rejected {\n border-color: var(--instui-component-file-drop-rejected-color);\n}\n\n.pfx-file-drop > [class*=\"-icon-\"] {\n line-height: 1;\n}\n";
218
- const formFieldGroup$1 = "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n * <legend>Shipping address</legend>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">First name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Last name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">City</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">State</span>\n * <span class=\"controls\">\n * <select class=\"pfx-simple-select\">\n * <option>CA</option>\n * <option>NY</option>\n * <option>TX</option>\n * </select>\n * </span>\n * </label>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n * </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n * legend {}\n * .pfx-form-field {}\n * .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n display: grid;\n grid-template-columns: 1fr;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n.pfx-form-field-group > legend {\n grid-column: 1 / -1;\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-form-field-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n.pfx-form-field-group.-row-spacing-none {\n row-gap: 0;\n}\n.pfx-form-field-group.-row-spacing-small {\n row-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-row-spacing-medium {\n row-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-row-spacing-large {\n row-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-col-spacing-none {\n column-gap: 0;\n}\n.pfx-form-field-group.-col-spacing-small {\n column-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-col-spacing-medium {\n column-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-col-spacing-large {\n column-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-v-align-top {\n align-items: start;\n}\n.pfx-form-field-group.-v-align-middle {\n align-items: center;\n}\n.pfx-form-field-group.-v-align-bottom {\n align-items: end;\n}\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n .pfx-form-field-group.-layout-aligned {\n grid-template-columns: auto 1fr;\n align-items: center;\n }\n .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n }\n}\n";
219
- const formFieldMessages$1 = "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field-message {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n}\n.pfx-form-field-message.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n}\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n}\n.pfx-form-field-message.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n";
220
- const formField$1 = "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Email address</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * </label>\n * @structure\n * .pfx-form-field {\n * .label {}\n * .controls {\n * .pfx-text-input {}\n * }\n * .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n gap: var(--instui-component-form-field-layout-gap-inputs);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n}\n@scope (.pfx-form-field) {\n :scope > .label {\n grid-area: label;\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n :scope > .controls {\n grid-area: controls;\n }\n}\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n grid-area: messages;\n}\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n display: none;\n}\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n display: inline-flex;\n}\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field.-readonly .label {\n color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n.pfx-form-field.-layout-stacked {\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n.pfx-form-field.-layout-inline {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field.-layout-inline.-v-align-top {\n align-items: start;\n}\n.pfx-form-field.-layout-inline.-v-align-bottom {\n align-items: end;\n}\n.pfx-form-field.-layout-inline.-label-align-start .label {\n text-align: start;\n}\n.pfx-form-field.-layout-inline.-label-align-end .label {\n text-align: end;\n}\n.pfx-form-field.-inline {\n display: inline-grid;\n inline-size: auto;\n}\n";
221
- const img$1 = "/**\n * @component img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n.pfx-img {\n display: inline-block;\n max-inline-size: 100%;\n block-size: auto;\n --pantoken-img-filter: none;\n filter: var(--pantoken-img-filter);\n transition: filter var(--instui-component-img-effect-transition-duration) ease;\n}\n.pfx-img.-display-block {\n display: block;\n}\n/* constrain: fill a sized box (the consumer sets width/height). */\n.pfx-img.-constrain-cover {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n}\n.pfx-img.-constrain-contain {\n inline-size: 100%;\n block-size: 100%;\n object-fit: contain;\n}\n/* Effects compose through the custom property, so grayscale + blur can apply together. */\n.pfx-img.-with-grayscale {\n --pantoken-img-filter: grayscale(1);\n}\n.pfx-img.-with-blur {\n --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n}\n.pfx-img.-with-grayscale.-with-blur {\n --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n}\n";
222
- const inPlaceEdit$1 = "/**\n * @component in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n.pfx-in-place-edit {\n display: inline-block;\n min-inline-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n border: var(--instui-component-text-input-border-width) solid transparent;\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-color-text-base);\n font: inherit;\n cursor: text;\n}\n/* Hover affordance: it's editable. */\n.pfx-in-place-edit:hover {\n background: var(--instui-color-background-muted);\n}\n/* Focus = edit mode: input chrome + the focus ring. */\n.pfx-in-place-edit:focus {\n background: var(--instui-component-text-input-background-color);\n border-color: var(--instui-component-text-input-border-color);\n outline: none;\n}\n.pfx-in-place-edit:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n.pfx-in-place-edit.-readonly {\n cursor: default;\n}\n.pfx-in-place-edit.-readonly:hover {\n background: transparent;\n}\n";
223
- const link$1 = "/**\n * @component link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links.\n */\n.pfx-link {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-link-gap-md);\n color: var(--instui-component-link-text-color);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n font-weight: var(--instui-component-link-font-weight);\n line-height: var(--instui-component-link-line-height-md);\n text-decoration: var(--instui-component-link-text-decoration-outside-text);\n cursor: pointer;\n}\n.pfx-link:hover {\n color: var(--instui-component-link-text-hover-color);\n}\n.pfx-link[aria-disabled=\"true\"] {\n color: var(--instui-component-link-text-disabled-color);\n cursor: not-allowed;\n}\n.pfx-link.-size-sm {\n gap: var(--instui-component-link-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n line-height: var(--instui-component-link-line-height-sm);\n}\n.pfx-link.-size-lg {\n gap: var(--instui-component-link-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n line-height: var(--instui-component-link-line-height-lg);\n}\n.pfx-link.-color-inverse {\n color: var(--instui-component-link-on-color-text-color);\n}\n.pfx-link.-color-inverse:hover {\n color: var(--instui-component-link-on-color-text-hover-color);\n}\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n color: var(--instui-component-link-on-color-text-disabled-color);\n}\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n display: inline;\n font-family: var(--instui-component-link-inline-link-medium-font-family);\n font-size: var(--instui-component-link-inline-link-medium-font-size);\n font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n line-height: var(--instui-component-link-inline-link-medium-line-height);\n text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n.pfx-link.-inline.-sm {\n font-size: var(--instui-component-link-inline-link-small-font-size);\n font-weight: var(--instui-component-link-inline-link-small-font-weight);\n line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n.pfx-link.-inline.-lg {\n font-size: var(--instui-component-link-inline-link-large-font-size);\n font-weight: var(--instui-component-link-inline-link-large-font-weight);\n line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n.pfx-link.-unstyled {\n color: var(--instui-component-link-unstyled-text-color);\n text-decoration: none;\n}\n";
224
- const list$1 = "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @modifier -ordered — Ordered-list numbering.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -delimiter-solid — Separate items with a solid rule.\n * @modifier -delimiter-dashed — Separate items with a dashed rule.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @example\n * <ul class=\"pfx-list\">\n * <li>First item</li>\n * <li>Second item</li>\n * <li>Third item</li>\n * </ul>\n * @structure\n * .pfx-list {\n * li {}\n * }\n */\n.pfx-list {\n color: var(--instui-component-list-item-color);\n font-family: var(--instui-component-list-item-font-family);\n font-size: var(--instui-component-list-item-font-size-medium);\n font-weight: var(--instui-component-list-item-font-weight);\n line-height: var(--instui-component-list-item-line-height);\n padding-inline-start: var(--instui-component-list-list-padding);\n}\n.pfx-list > li {\n margin: var(--instui-component-list-item-spacing-medium) 0;\n}\n.pfx-list.-size-sm {\n font-size: var(--instui-component-list-item-font-size-small);\n}\n.pfx-list.-size-sm > li {\n margin: var(--instui-component-list-item-spacing-small) 0;\n}\n.pfx-list.-size-lg {\n font-size: var(--instui-component-list-item-font-size-large);\n}\n.pfx-list.-size-lg > li {\n margin: var(--instui-component-list-item-spacing-large) 0;\n}\n.pfx-list.-ordered > li::marker {\n font-weight: var(--instui-component-list-ordered-number-font-weight);\n}\n.pfx-list.-ordered > li {\n padding-inline-start: var(--instui-component-list-ordered-number-margin);\n}\n.pfx-list.-delimiter-solid > li + li {\n border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n var(--instui-component-list-item-delimiter-solid-border-style)\n var(--instui-component-list-item-delimiter-solid-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n}\n.pfx-list.-delimiter-dashed > li + li {\n border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n var(--instui-component-list-item-delimiter-dashed-border-style)\n var(--instui-component-list-item-delimiter-dashed-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n}\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n list-style: none;\n padding-inline-start: 0;\n}\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--instui-component-list-item-spacing-medium);\n list-style: none;\n padding-inline-start: 0;\n}\n.pfx-list.-inline > li {\n margin: 0;\n}\n";
225
- const menu$1 = "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example\n * <div class=\"pfx-menu\">\n * <div class=\"group\">Actions</div>\n * <div class=\"item\">Edit</div>\n * <div class=\"item -active\">Duplicate</div>\n * <div class=\"separator\"></div>\n * <div class=\"item\">Delete</div>\n * </div>\n * @structure\n * .pfx-menu {\n * .group {}\n * .item {}\n * .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n * @demo self:menu\n */\n.pfx-menu {\n min-width: var(--instui-component-menu-min-width);\n max-width: var(--instui-component-menu-max-width);\n background: var(--instui-component-menu-item-background);\n border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-spacing-space-xs) 0;\n}\n@scope (.pfx-menu) {\n :scope > .item {\n display: block;\n padding: var(--instui-component-menu-item-padding-vertical)\n var(--instui-component-menu-item-padding-horizontal);\n color: var(--instui-component-menu-item-label-color);\n font-family: var(--instui-component-menu-item-font-family);\n font-size: var(--instui-component-menu-item-font-size);\n font-weight: var(--instui-component-menu-item-font-weight);\n line-height: var(--instui-component-menu-item-line-height);\n cursor: pointer;\n }\n /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n :scope > .item.-disabled {\n opacity: var(--instui-opacity-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n :scope > .item:hover,\n :scope > .item.-highlighted {\n background: var(--instui-component-menu-item-highlighted-background);\n color: var(--instui-component-menu-item-highlighted-label-color);\n }\n :scope > .item.-active,\n :scope > .item[aria-checked=\"true\"] {\n background: var(--instui-component-menu-item-active-background);\n color: var(--instui-component-menu-item-active-label-color);\n }\n :scope > .item.-active:hover,\n :scope > .item[aria-checked=\"true\"]:hover {\n background: var(--instui-component-menu-item-selected-highlighted-background);\n }\n /* Secondary line inside an item (a description or shortcut). */\n .item-info {\n color: var(--instui-component-menu-item-label-info-color);\n }\n :scope > .item:hover .item-info,\n :scope > .item.-highlighted .item-info {\n color: var(--instui-component-menu-item-highlighted-label-info-color);\n }\n /* A labelled group of items. */\n :scope > .group {\n padding: var(--instui-component-menu-group-padding-vertical)\n var(--instui-component-menu-group-padding-horizontal);\n background: var(--instui-component-menu-group-background);\n color: var(--instui-component-menu-group-color);\n font-family: var(--instui-component-menu-group-font-family);\n font-size: var(--instui-component-menu-group-font-size);\n font-weight: var(--instui-component-menu-group-font-weight);\n }\n :scope > .separator {\n height: var(--instui-component-menu-separator-height);\n background: var(--instui-component-menu-separator-background);\n margin: var(--instui-component-menu-separator-margin-vertical)\n var(--instui-component-menu-separator-margin-horizontal);\n }\n}\n";
226
- const metric$1 = "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n * <span class=\"value\">1,284</span>\n * <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n * .value {}\n * .label {}\n * }\n */\n.pfx-metric {\n display: inline-flex;\n flex-direction: column;\n gap: var(--instui-component-metric-gap-texts);\n padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n@scope (.pfx-metric) {\n :scope > .value {\n color: var(--instui-component-metric-value-color);\n font-family: var(--instui-component-metric-value-font-family);\n font-size: var(--instui-component-metric-value-font-size);\n font-weight: var(--instui-component-metric-value-font-weight);\n line-height: var(--instui-component-metric-value-line-height);\n }\n :scope > .label {\n color: var(--instui-component-metric-label-color);\n font-family: var(--instui-component-metric-label-font-family);\n font-size: var(--instui-component-metric-label-font-size);\n font-weight: var(--instui-component-metric-label-font-weight);\n line-height: var(--instui-component-metric-label-line-height);\n }\n}\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n align-items: flex-start;\n text-align: start;\n}\n.pfx-metric.-text-align-center {\n align-items: center;\n text-align: center;\n}\n.pfx-metric.-text-align-end {\n align-items: flex-end;\n text-align: end;\n}\n";
227
- const modal$1 = "/**\n * @component modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body).\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body.\n * @part .header — The title row.\n * @part .body — The content region (a lone <img> goes full-bleed).\n * @part .footer — The actions row.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n * <div class=\"header\"><strong>Small</strong></div>\n * <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n * <div class=\"footer\">\n * <button class=\"pfx-button\">Close</button>\n * </div>\n * </dialog>\n * @structure\n * .pfx-modal.-size-sm {\n * .header {\n * strong {}\n * }\n * .body {\n * code {}\n * }\n * .footer {\n * .pfx-button {}\n * }\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n.pfx-modal {\n max-width: var(--instui-component-modal-medium-max-width);\n background: var(--instui-component-modal-background-color);\n color: var(--instui-component-modal-text-color);\n border: var(--instui-component-modal-border-width) solid\n var(--instui-component-modal-border-color);\n border-radius: var(--instui-component-modal-border-radius);\n font-family: var(--instui-component-modal-font-family);\n overflow: hidden;\n /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n box-shadow: var(--instui-elevation-topmost);\n}\n/* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\ndialog.pfx-modal {\n margin: auto;\n padding: 0;\n}\ndialog.pfx-modal::backdrop {\n background: var(--instui-component-mask-background-color);\n}\ndialog.pfx-modal.-blur::backdrop {\n backdrop-filter: blur(0.5rem);\n}\n.pfx-modal.-size-sm {\n max-width: var(--instui-component-modal-small-max-width);\n}\n.pfx-modal.-size-lg {\n max-width: var(--instui-component-modal-large-max-width);\n}\n.pfx-modal.-size-auto {\n max-width: none;\n min-width: var(--instui-component-modal-auto-min-width);\n}\n/* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n at the viewport edge. */\n.pfx-modal.-size-fullscreen {\n position: fixed;\n inset: 0;\n width: auto;\n height: auto;\n max-width: none;\n max-height: none;\n margin: 0;\n border-radius: 0;\n}\n/* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n.pfx-modal.-overflow-fit {\n display: flex;\n flex-direction: column;\n max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n}\n.pfx-modal.-color-inverse {\n background: var(--instui-component-modal-inverse-background-color);\n color: var(--instui-component-modal-inverse-text-color);\n border-color: var(--instui-component-modal-inverse-border-color);\n}\n@scope (.pfx-modal) {\n :scope.-overflow-fit > .body {\n overflow-y: auto;\n }\n :scope > .header {\n padding: var(--instui-component-modal-header-padding);\n background: var(--instui-component-modal-header-background-color);\n border-bottom: var(--instui-component-modal-header-border-width) solid\n var(--instui-component-modal-header-border-color);\n }\n :scope > .body {\n padding: var(--instui-component-modal-body-padding);\n }\n /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n :scope > .body:has(> img) {\n padding: 0;\n }\n :scope > .body:has(> img) img {\n display: block;\n width: 100%;\n }\n :scope > .footer {\n padding: var(--instui-component-modal-footer-padding);\n background: var(--instui-component-modal-footer-background-color);\n border-top: var(--instui-component-modal-footer-border-width) solid\n var(--instui-component-modal-footer-border-color);\n border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n var(--instui-component-modal-footer-border-radius);\n }\n :scope.-density-compact > .header {\n padding: var(--instui-component-modal-header-padding-compact);\n }\n :scope.-density-compact > .body {\n padding: var(--instui-component-modal-body-padding-compact);\n }\n :scope.-density-compact > .footer {\n padding: var(--instui-component-modal-footer-padding-compact);\n }\n :scope.-color-inverse > .header {\n background: var(--instui-component-modal-header-inverse-background-color);\n border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n }\n :scope.-color-inverse > .body {\n background: var(--instui-component-modal-body-inverse-background-color);\n }\n :scope.-color-inverse > .footer {\n background: var(--instui-component-modal-footer-inverse-background-color);\n border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n }\n}\n";
228
- const pagination$1 = "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @part .page — A page link or button; the current page carries `[aria-current]`.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate current\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n * <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n * <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n * <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n * <a class=\"page\" href=\"#\">2</a>\n * <a class=\"page\" href=\"#\">3</a>\n * <span class=\"ellipsis\">…</span>\n * <a class=\"page\" href=\"#\">12</a>\n * <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n * <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n * .arrow {\n * [class*=\"-icon-\"]:optional {}\n * }\n * .page {}\n * .ellipsis {}\n * }\n */\n.pfx-pagination {\n display: inline-flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-pagination-page-indicator-gap);\n font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n /* A page number or a nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n :scope > .page,\n :scope > .arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n min-block-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n color: var(--instui-color-text-interactive-navigation-primary-base);\n background: transparent;\n border: var(--instui-border-width-md) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n font: inherit;\n font-weight: var(--instui-font-weight-interactive);\n text-decoration: none;\n cursor: pointer;\n }\n\n :scope > .arrow [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .page:hover,\n :scope > .arrow:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n :scope > .page[aria-current],\n :scope > .page.-current {\n background: var(--instui-color-background-interactive-action-primary-base);\n color: var(--instui-color-text-interactive-action-primary-base);\n border-color: var(--instui-color-background-interactive-action-primary-base);\n }\n\n :scope > .page[aria-current]:hover,\n :scope > .page.-current:hover {\n background: var(--instui-color-background-interactive-action-primary-hover);\n border-color: var(--instui-color-background-interactive-action-primary-hover);\n color: var(--instui-color-text-interactive-action-primary-base);\n }\n\n /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n :scope > .arrow:disabled,\n :scope > .arrow[aria-disabled=\"true\"] {\n color: var(--instui-color-text-muted);\n background: transparent;\n opacity: var(--instui-opacity-disabled);\n cursor: not-allowed;\n }\n\n /* The truncation ellipsis — inert text. */\n :scope > .ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n color: var(--instui-color-text-muted);\n }\n\n /* variant=\"input\" label (\"Page … of N\"). */\n :scope > .page-input-label {\n color: var(--instui-component-pagination-page-input-label-color);\n }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n";
229
- const pill$1 = "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * <span class=\"pfx-pill\">Draft</span>\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n * @demo self:pill\n */\n.pfx-pill {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-pill-height);\n max-width: var(--instui-component-pill-max-width);\n padding: 0 var(--instui-component-pill-padding-horizontal);\n background: var(--instui-component-pill-background-color);\n color: var(--instui-component-pill-base-text-color);\n border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n var(--instui-component-pill-base-border-color);\n border-radius: var(--instui-component-pill-border-radius);\n font-family: var(--instui-component-pill-font-family);\n font-size: var(--instui-component-pill-text-font-size);\n font-weight: var(--instui-component-pill-text-font-weight);\n line-height: var(--instui-component-pill-line-height);\n}\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n inline-size: var(--instui-font-size-text-xs);\n block-size: var(--instui-font-size-text-xs);\n margin-inline-end: 0.375rem;\n}\n.pfx-pill.-color-info {\n color: var(--instui-component-pill-info-text-color);\n border-color: var(--instui-component-pill-info-border-color);\n}\n.pfx-pill.-color-success {\n color: var(--instui-component-pill-success-text-color);\n border-color: var(--instui-component-pill-success-border-color);\n}\n.pfx-pill.-color-warning {\n color: var(--instui-component-pill-warning-text-color);\n border-color: var(--instui-component-pill-warning-border-color);\n}\n.pfx-pill.-color-danger {\n color: var(--instui-component-pill-error-text-color);\n border-color: var(--instui-component-pill-error-border-color);\n}\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n";
230
- const popover$1 = "/**\n * @component popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n * <div class=\"pfx-heading -level-h4\">Share this page</div>\n * <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n * .pfx-heading {}\n * .pfx-text {\n * code {}\n * }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n.pfx-popover {\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n border-radius: var(--instui-component-popover-border-radius);\n padding: var(--instui-spacing-space-sm);\n box-shadow: var(--instui-elevation-above);\n}\n[popover].pfx-popover {\n margin: 0;\n}\n/* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n then centres the popover in the top layer. */\n@supports (position-area: block-end) {\n [popover].pfx-popover {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n [popover].pfx-popover.-placement-top {\n position-area: block-start;\n }\n [popover].pfx-popover.-placement-bottom {\n position-area: block-end;\n }\n [popover].pfx-popover.-placement-start {\n position-area: inline-start center;\n }\n [popover].pfx-popover.-placement-end {\n position-area: inline-end center;\n }\n}\n/* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-popover {\n transition:\n opacity 0.15s ease,\n transform 0.15s ease,\n overlay 0.15s allow-discrete,\n display 0.15s allow-discrete;\n opacity: 1;\n transform: translateY(0);\n }\n [popover].pfx-popover:not(:popover-open) {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n @starting-style {\n [popover].pfx-popover:popover-open {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n }\n}\n";
231
- const progressCircle$1 = "/**\n * @component progress-circle\n * @summary A circular progress ring driven by a `--value` (0–100) custom property.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; the `--value` custom property drives the arc.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @cssproperty --value <number> — The progress percentage (0–100) that drives the arc; registered with @property so it can transition.\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Give it role=\"img\" and an aria-label stating the percentage, since the ring is drawn in CSS.\n * @compat Registers `--value` with `@property` (so the arc can transition) and paints with CSS `mask` and `conic-gradient`; where `@property` is unsupported the ring still renders but won't animate.\n * @example\n * <span class=\"pfx-progress-circle -size-sm\" role=\"img\" aria-label=\"25 percent\">\n * <span class=\"value\">25%</span>\n * </span>\n * @related progress — The linear bar form of the same determinate progress.\n */\n/* --value (0–100) drives the arc; registered so the conic-gradient re-evaluates (and can transition). */\n@property --value {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n.pfx-progress-circle {\n --value: 0;\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n color: var(--instui-component-progress-circle-color);\n font-family: var(--instui-component-progress-circle-font-family);\n font-weight: var(--instui-component-progress-circle-font-weight);\n line-height: var(--instui-component-progress-circle-line-height);\n}\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: conic-gradient(\n var(--pantoken-pc-fill) calc(var(--value) * 1%),\n var(--pantoken-pc-track) 0\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n #0000 calc(100% - var(--pantoken-pc-stroke)),\n #000 0\n );\n mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n}\n.pfx-progress-circle .value {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.pfx-progress-circle.-size-xs {\n width: var(--instui-component-progress-circle-x-small-size);\n height: var(--instui-component-progress-circle-x-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n.pfx-progress-circle.-size-sm {\n width: var(--instui-component-progress-circle-small-size);\n height: var(--instui-component-progress-circle-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n.pfx-progress-circle.-size-lg {\n width: var(--instui-component-progress-circle-large-size);\n height: var(--instui-component-progress-circle-large-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n.pfx-progress-circle.-color-brand {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n.pfx-progress-circle.-color-info {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n.pfx-progress-circle.-color-success {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n.pfx-progress-circle.-color-warning {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n.pfx-progress-circle.-color-danger {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n.pfx-progress-circle.-color-primary-inverse {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n color: var(--instui-component-progress-circle-color-inverse);\n}\n";
232
- const progress$1 = "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks The value label is a separate sibling element (`.pfx-progress-value`), not a child of the bar.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @accessibility Expose progress via `role=\"progressbar\"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` (or `role=\"img\"` plus `aria-label`), mirroring how progress-circle is labelled.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * <div class=\"pfx-progress -color-brand\">\n * <div class=\"bar\"></div>\n * </div>\n * @related progress-circle — The circular form of the same determinate progress.\n */\n.pfx-progress {\n position: relative;\n display: block;\n width: 100%;\n height: var(--instui-component-progress-bar-medium-height);\n background: var(--instui-component-progress-bar-track-color);\n /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n var(--instui-component-progress-bar-border-color);\n border-radius: var(--instui-component-progress-bar-border-radius);\n overflow: hidden;\n}\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: var(--instui-component-progress-bar-track-bottom-border-width);\n background: var(--instui-component-progress-bar-track-bottom-border-color);\n pointer-events: none;\n}\n.pfx-progress.-size-xs {\n height: var(--instui-component-progress-bar-x-small-height);\n}\n.pfx-progress.-size-sm {\n height: var(--instui-component-progress-bar-small-height);\n}\n.pfx-progress.-size-lg {\n height: var(--instui-component-progress-bar-large-height);\n}\n@scope (.pfx-progress) {\n :scope > .bar {\n height: 100%;\n background: var(--instui-color-background-brand);\n border-radius: var(--instui-component-progress-bar-border-radius);\n }\n :scope.-should-animate > .bar {\n transition: width 0.5s ease;\n }\n}\n.pfx-progress.-color-brand .bar {\n background: var(--instui-color-background-brand);\n}\n.pfx-progress.-color-info .bar {\n background: var(--instui-color-background-info);\n}\n.pfx-progress.-color-success .bar {\n background: var(--instui-color-background-success);\n}\n.pfx-progress.-color-warning .bar {\n background: var(--instui-color-background-warning);\n}\n.pfx-progress.-color-danger .bar {\n background: var(--instui-color-background-error);\n}\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n background: var(--instui-component-progress-bar-track-color-inverse);\n border-color: var(--instui-component-progress-bar-border-color-inverse);\n color: var(--instui-component-progress-bar-text-color-inverse);\n}\n.pfx-progress.-color-primary-inverse::after {\n background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n.pfx-progress.-color-primary-inverse .bar {\n background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n.pfx-progress-value {\n padding: 0 var(--instui-component-progress-bar-value-padding);\n color: var(--instui-component-progress-bar-text-color);\n font-family: var(--instui-component-progress-bar-font-family);\n font-size: var(--instui-component-progress-bar-medium-value-font-size);\n font-weight: var(--instui-component-progress-bar-font-weight);\n line-height: var(--instui-component-progress-bar-line-height);\n}\n.pfx-progress.-color-inverse ~ .pfx-progress-value,\n.pfx-progress-value.-color-inverse {\n color: var(--instui-component-progress-bar-text-color-inverse);\n}\n";
233
- const radioInputGroup$1 = "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * <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 * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n";
234
- const radio$1 = "/**\n * @component radio\n * @summary A native radio button and its label.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-radio-input-gap);\n color: var(--instui-component-radio-input-label-base-color);\n font-family: var(--instui-component-radio-input-font-family);\n font-size: var(--instui-component-radio-input-font-size-md);\n font-weight: var(--instui-component-radio-input-font-weight);\n line-height: var(--instui-component-radio-input-line-height-md);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-radio-input-control-size-md);\n height: var(--instui-component-radio-input-control-size-md);\n margin-block: var(--instui-component-radio-input-control-vertical-margin);\n border: var(--instui-component-radio-input-border-width) solid\n var(--instui-component-radio-input-border-color);\n border-radius: 50%;\n background: var(--instui-component-radio-input-background-color);\n cursor: pointer;\n transition:\n border-color 0.15s ease,\n background-color 0.15s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n content: \"\";\n width: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n border-radius: 50%;\n background: var(--instui-component-radio-input-border-selected-color);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n border-color: var(--instui-component-radio-input-border-hover-color);\n background: var(--instui-component-radio-input-background-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n border-color: var(--instui-component-radio-input-border-selected-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n transform: scale(1);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n border-color: var(--instui-component-radio-input-border-disabled-color);\n background: var(--instui-component-radio-input-background-disabled-color);\n cursor: not-allowed;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n color: var(--instui-component-radio-input-label-disabled-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n color: var(--instui-component-radio-input-label-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n font-size: var(--instui-component-radio-input-font-size-sm);\n line-height: var(--instui-component-radio-input-line-height-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-sm);\n height: var(--instui-component-radio-input-control-size-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n font-size: var(--instui-component-radio-input-font-size-lg);\n line-height: var(--instui-component-radio-input-line-height-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-lg);\n height: var(--instui-component-radio-input-control-size-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n color: var(--instui-component-radio-input-label-readonly-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n border-color: var(--instui-component-radio-input-border-readonly-color);\n background: var(--instui-component-radio-input-background-readonly-color);\n}\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n position: relative;\n justify-content: center;\n gap: 0;\n height: var(--instui-component-radio-input-toggle-medium-height);\n padding-inline: 0.875rem;\n border-radius: var(--instui-component-radio-input-toggle-border-radius);\n background: transparent;\n color: var(--instui-component-radio-input-label-base-color);\n font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n color 0.15s ease;\n}\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n}\n.pfx-radio.-variant-toggle.-context-off {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n.pfx-radio.-variant-toggle.-context-success {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n.pfx-radio.-variant-toggle.-context-danger {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n.pfx-radio.-variant-toggle.-context-warning {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n background: var(--pantoken-rt-fill);\n color: var(--instui-component-radio-input-toggle-handle-text);\n box-shadow: var(--instui-elevation-depth1);\n}\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n text-decoration: underline;\n}\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n content: \"\";\n position: absolute;\n inset: -0.25rem;\n border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n pointer-events: none;\n}\n.pfx-radio.-variant-toggle:has(input:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.pfx-radio.-variant-toggle.-size-sm {\n height: var(--instui-component-radio-input-toggle-small-height);\n font-size: var(--instui-component-radio-input-toggle-small-font-size);\n padding-inline: 0.5rem;\n}\n.pfx-radio.-variant-toggle.-size-lg {\n height: var(--instui-component-radio-input-toggle-large-height);\n font-size: var(--instui-component-radio-input-toggle-large-font-size);\n padding-inline: 1rem;\n}\n";
235
- const rangeInput$1 = "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n.pfx-range-input::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n}\n.pfx-range-input-value::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n}\n";
236
- const rating$1 = "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n * <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n * <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n * [class*=\"-icon-\"] {}\n * .label {}\n * }\n */\n.pfx-rating {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-rating-icon-icon-margin);\n font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n .-icon-star-solid {\n color: var(--instui-component-rating-icon-icon-filled-color);\n }\n\n /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n :scope > .label {\n margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n color: var(--instui-color-text-base);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-font-size-text-base);\n }\n}\n";
237
- const select = "/* Experimental: CSS Customizable Select (`appearance: base-select`, Chrome 135+, not yet Baseline).\n Enhances .pfx-simple-select; degrades to the plain control where unsupported. */\n@supports (appearance: base-select) {\n .pfx-simple-select,\n .pfx-simple-select::picker(select) {\n appearance: base-select;\n }\n /* Keep simple-select's own background-image caret; hide the UA-generated picker icon. */\n .pfx-simple-select::picker-icon {\n display: none;\n }\n .pfx-simple-select::picker(select) {\n border: var(--instui-component-select-popover-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-border-radius-lg);\n box-shadow: var(--instui-elevation-topmost);\n background-color: var(--instui-component-options-item-background);\n padding: 0;\n margin: 0;\n overflow: hidden;\n }\n .pfx-simple-select option {\n padding: var(--instui-component-options-item-padding-vertical)\n var(--instui-component-options-item-padding-horizontal);\n background-color: var(--instui-component-options-item-background);\n color: var(--instui-component-options-item-color);\n font-family: var(--instui-component-options-item-font-family);\n font-weight: var(--instui-component-options-item-font-weight);\n font-size: var(--instui-component-options-item-font-size);\n line-height: var(--instui-component-options-item-line-height);\n cursor: pointer;\n }\n /* Hide the UA checkmark; the selected row gets our own trailing check via background-image. */\n .pfx-simple-select option::checkmark {\n display: none;\n }\n .pfx-simple-select option:hover,\n .pfx-simple-select option:focus {\n background-color: var(--instui-component-options-item-highlighted-background);\n color: var(--instui-component-options-item-highlighted-label-color);\n outline: none;\n }\n .pfx-simple-select option:checked {\n background-color: var(--instui-component-options-item-selected-background);\n color: var(--instui-component-options-item-selected-label-color);\n font-weight: var(--instui-component-options-item-font-weight-selected);\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--instui-component-options-item-padding-horizontal) center;\n background-size: 1rem 1rem;\n padding-inline-end: calc(var(--instui-component-options-item-padding-horizontal) + 1.5rem);\n }\n}\n";
238
- const sideNavBar$1 = "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @modifier -minimized — Collapse to icons only (labels hidden).\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .item — A navigation entry; `-selected` marks the active one.\n * @part .label — An item's text label; hidden when the rail is minimized.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n * <a class=\"item -selected\" href=\"#\">\n * <span class=\"pfx-icon -icon-house\"></span>\n * <span class=\"label\">Home</span>\n * </a>\n * <a class=\"item\" href=\"#\">\n * <span class=\"pfx-icon -icon-inbox\"></span>\n * <span class=\"label\">Inbox</span>\n * </a>\n * <a class=\"item\" href=\"#\">\n * <span class=\"pfx-icon -icon-calendar\"></span>\n * <span class=\"label\">Calendar</span>\n * </a>\n * <a class=\"item\" href=\"#\">\n * <span class=\"pfx-icon -icon-settings\"></span>\n * <span class=\"label\">Settings</span>\n * </a>\n * </nav>\n * @structure\n * .pfx-side-nav-bar {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * .label {}\n * }\n * }\n */\n.pfx-side-nav-bar {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-side-nav-bar-content-gap);\n padding: var(--instui-component-side-nav-bar-content-margin);\n box-sizing: border-box;\n inline-size: fit-content;\n /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n block-size: 100%;\n min-block-size: 100%;\n background: var(--instui-component-side-nav-bar-background-color);\n color: var(--instui-component-side-nav-bar-font-color);\n font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n@scope (.pfx-side-nav-bar) {\n :scope > .item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--instui-spacing-space2xs);\n padding: var(--instui-component-side-nav-bar-item-content-padding);\n min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n color: var(--instui-component-side-nav-bar-item-font-color);\n background: var(--instui-component-side-nav-bar-item-background-color);\n border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n font-size: var(--instui-component-side-nav-bar-item-font-size);\n font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n line-height: var(--instui-component-side-nav-bar-item-line-height);\n text-align: center;\n text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n cursor: pointer;\n }\n\n :scope > .item [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .item:hover {\n background: var(--instui-component-side-nav-bar-item-hover-background-color);\n }\n\n :scope > .item.-selected {\n background: var(--instui-component-side-nav-bar-item-selected-background-color);\n color: var(--instui-component-side-nav-bar-item-selected-font-color);\n }\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n display: none;\n}\n";
239
- const spinner$1 = "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * <span class=\"pfx-spinner -size-xs\" role=\"status\" aria-label=\"Loading\"></span>\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n.pfx-spinner {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n.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.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.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.pfx-spinner.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n}\n";
240
- const table$1 = "/**\n * @component table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`.\n * @modifier -hover — Highlight rows on hover.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`.\n * @pseudo ::before — Renders each cell's `data-label` as its column heading in the stacked layout.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n * <caption>Top-rated films</caption>\n * <thead>\n * <tr>\n * <th scope=\"col\">Rank</th>\n * <th scope=\"col\">Title</th>\n * <th scope=\"col\">Year</th>\n * <th scope=\"col\">Rating</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <th scope=\"row\">1</th>\n * <td>The Shawshank Redemption</td>\n * <td>1994</td>\n * <td>9.3</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">2</th>\n * <td>The Godfather</td>\n * <td>1972</td>\n * <td>9.2</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">3</th>\n * <td>The Godfather: Part II</td>\n * <td>1974</td>\n * <td>9.0</td>\n * </tr>\n * </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n * caption {}\n * thead {\n * tr {\n * th {}\n * }\n * }\n * tbody {\n * tr {\n * th {}\n * td {}\n * }\n * }\n * }\n */\n.pfx-table {\n border-collapse: collapse;\n width: 100%;\n background: var(--instui-component-table-background);\n color: var(--instui-component-table-color);\n font-family: var(--instui-component-table-font-family);\n font-size: var(--instui-component-table-font-size);\n}\n.pfx-table caption {\n text-align: start;\n padding: var(--instui-component-table-cell-padding-vertical)\n var(--instui-component-table-cell-padding-horizontal);\n color: var(--instui-component-table-col-header-color);\n font-weight: var(--instui-component-table-head-font-weight);\n}\n/* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n.pfx-table.-layout-fixed {\n table-layout: fixed;\n}\n.pfx-table thead {\n background: var(--instui-component-table-head-background);\n}\n.pfx-table th {\n text-align: start;\n background: var(--instui-component-table-col-header-background);\n color: var(--instui-component-table-col-header-color);\n font-weight: var(--instui-component-table-head-font-weight);\n line-height: var(--instui-component-table-col-header-line-height);\n padding: var(--instui-component-table-col-header-padding-vertical)\n var(--instui-component-table-col-header-padding-horizontal);\n}\n/* The column-header underline lives on the head only — a distinct 2px rule under the header row. */\n.pfx-table thead th {\n border-bottom: var(--instui-border-width-md) solid var(--instui-component-table-row-border-color);\n}\n/* A row-header cell (th scope=row) — styled from the row-header tokens, not the column-header ones. */\n.pfx-table tbody th,\n.pfx-table th[scope=\"row\"] {\n background: var(--instui-component-table-row-header-background);\n color: var(--instui-component-table-row-header-color);\n font-weight: var(--instui-component-table-row-header-font-weight);\n line-height: var(--instui-component-table-row-header-line-height);\n padding: var(--instui-component-table-row-header-padding-vertical)\n var(--instui-component-table-row-header-padding-horizontal);\n}\n.pfx-table td {\n color: var(--instui-component-table-cell-color);\n line-height: var(--instui-component-table-cell-line-height);\n padding: var(--instui-component-table-cell-padding-vertical)\n var(--instui-component-table-cell-padding-horizontal);\n}\n/* Body cells carry no border of their own — the separator lives on the row. Reset with tbody\n specificity (0,1,2) so a host stylesheet's cell borders (e.g. `.pantoken-prose td`, 0,1,1) can't leak\n in and double the row line (very visible in the stacked layout, where cells are display:block). */\n.pfx-table tbody td,\n.pfx-table tbody th {\n border: 0;\n}\n/* The row separator is a single border on the ROW (InstUI puts it there), so it's uniform across the\n row-header and data cells — no mismatched per-cell borders. */\n.pfx-table tbody tr {\n border-bottom: var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color);\n}\n/* hover=\"true\" (InstUI's opt-in `hover` prop): every row reserves a transparent 3px inline border and\n colours it with the brand hover-border on hover — a vertical bar on each edge, NOT a full box, and\n no layout shift. Only rows in a `.-hover` table react. */\n.pfx-table.-hover tbody tr {\n border-inline: 0.1875rem solid transparent;\n}\n.pfx-table.-hover tbody tr:hover {\n border-inline-color: var(--instui-component-table-row-hover-border-color);\n}\n/* layout=\"stacked\": each row becomes a card and cells stack, labelled by their column. InstUI does this\n by re-rendering the DOM; pure CSS can't pull the <th> text into each cell, so the author supplies a\n `data-label` per cell and it's shown via ::before. Always-on (toggle the class responsively). */\n.pfx-table.-layout-stacked thead {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n.pfx-table.-layout-stacked,\n.pfx-table.-layout-stacked tbody,\n.pfx-table.-layout-stacked tr,\n.pfx-table.-layout-stacked td,\n.pfx-table.-layout-stacked th {\n display: block;\n width: auto;\n}\n/* InstUI's stacked row is just padding + the single bottom-border separator (the row's existing\n border-bottom carries over) — NOT a full card box. */\n.pfx-table.-layout-stacked tbody tr {\n padding: var(--instui-component-table-row-padding-vertical)\n var(--instui-component-table-row-padding-horizontal);\n}\n.pfx-table.-layout-stacked tbody td[data-label]::before,\n.pfx-table.-layout-stacked tbody th[data-label]::before {\n content: attr(data-label);\n display: block;\n font-weight: var(--instui-component-table-head-font-weight);\n color: var(--instui-component-table-col-header-color);\n}\n";
241
- const tabs$1 = "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks Selected and disabled styling matches either the `-selected`/`-disabled` class or the `aria-selected`/`aria-disabled` attribute, so you can drive state from markup or from ARIA.\n * @part .list — The row of tabs.\n * @part .tab — A single tab; `-selected` marks the active one.\n * @part .panel — The content panel for a tab.\n * @cssstate selected\n * @cssstate disabled\n * @cssstate hidden\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n * <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n * <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n * <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n * </div>\n * <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n * .list {\n * .tab {}\n * }\n * .panel {}\n * }\n */\n.pfx-tabs {\n display: flex;\n flex-direction: column;\n background: var(--instui-component-tabs-default-background);\n}\n@scope (.pfx-tabs) {\n :scope > .list {\n display: flex;\n width: 100%;\n flex-flow: row wrap;\n }\n :scope.-overflow-scroll > .list {\n flex-wrap: nowrap;\n overflow-x: auto;\n scrollbar-width: none;\n }\n :scope.-overflow-scroll > .list::-webkit-scrollbar {\n display: none;\n }\n .tab {\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n border: 0;\n color: var(--instui-component-tabs-tab-default-text-color);\n font-family: var(--instui-component-tabs-tab-font-family);\n font-size: var(--instui-component-tabs-tab-font-size);\n font-weight: var(--instui-component-tabs-tab-font-weight);\n line-height: 1;\n padding: 1rem 1.25rem;\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n position: relative;\n z-index: 1;\n /* Layout-stable underline: always 0.25rem, coloured only when hovered or selected. */\n border-bottom: 0.25rem solid transparent;\n margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n }\n .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n [aria-disabled=\"true\"]\n ) {\n border-bottom-color: var(--instui-component-tabs-tab-default-hover-border-color);\n }\n .tab.-selected,\n .tab[aria-selected=\"true\"] {\n border-bottom-color: var(--instui-component-tabs-tab-default-selected-border-color);\n }\n .tab.-disabled,\n .tab[aria-disabled=\"true\"],\n .tab:disabled {\n opacity: 0.5;\n font-weight: normal;\n cursor: default;\n }\n /* Secondary variant: rounded \"folder\" tabs; the selected tab's bottom border matches the panel\n background so it visually connects into the panel below. */\n :scope.-variant-secondary .tab {\n padding: 0.75rem 1rem;\n line-height: var(--instui-component-tabs-tab-line-height);\n color: var(--instui-component-tabs-tab-secondary-text-color);\n margin-inline-end: 0.2em;\n margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n border: var(--instui-component-tabs-panel-border-width) solid transparent;\n border-radius: 0.1875rem 0.1875rem 0 0;\n }\n :scope.-variant-secondary .tab:first-of-type {\n margin-inline-start: 0;\n }\n :scope.-variant-secondary\n .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n [aria-disabled=\"true\"]\n ) {\n background: var(--instui-component-tabs-tab-secondary-selected-background);\n border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n }\n :scope.-variant-secondary .tab.-selected,\n :scope.-variant-secondary .tab[aria-selected=\"true\"] {\n background: var(--instui-component-tabs-tab-secondary-selected-background);\n border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n border-bottom-color: var(--instui-component-tabs-tab-secondary-selected-background);\n color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n }\n :scope > .panel {\n box-sizing: border-box;\n border-top: var(--instui-component-tabs-panel-border-width) solid\n var(--instui-component-tabs-panel-border-color);\n background: var(--instui-component-tabs-panel-background);\n color: var(--instui-component-tabs-panel-text-color);\n font-family: var(--instui-component-tabs-panel-font-family);\n font-size: var(--instui-component-tabs-panel-font-size);\n font-weight: var(--instui-component-tabs-panel-font-weight);\n line-height: var(--instui-component-tabs-panel-line-height);\n padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n var(--instui-spacing-space-md);\n }\n :scope > .panel[hidden] {\n display: none;\n }\n}\n";
242
- const tag$1 = "/**\n * @component tag\n * @summary An inline chip for a keyword or filter.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n.pfx-tag {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-tag-height-medium);\n max-width: var(--instui-component-tag-max-width);\n padding: 0 var(--instui-component-tag-padding-horizontal);\n background: var(--instui-component-tag-default-background);\n color: var(--instui-component-tag-default-color);\n border: var(--instui-component-tag-default-border-width)\n var(--instui-component-tag-default-border-style)\n var(--instui-component-tag-default-border-color);\n border-radius: var(--instui-component-tag-default-border-radius);\n font-family: var(--instui-component-tag-font-family);\n font-size: var(--instui-component-tag-font-size-medium);\n}\n.pfx-tag:hover {\n background: var(--instui-component-tag-default-background-hover);\n}\n.pfx-tag.-size-sm {\n height: var(--instui-component-tag-height-small);\n padding: 0 var(--instui-component-tag-padding-horizontal-small);\n font-size: var(--instui-component-tag-font-size-small);\n}\n.pfx-tag.-size-lg {\n height: var(--instui-component-tag-height-large);\n font-size: var(--instui-component-tag-font-size-large);\n}\n.pfx-tag.-inline {\n gap: var(--instui-spacing-space-xs);\n background: var(--instui-component-tag-inline-background);\n color: var(--instui-component-tag-inline-color);\n border-color: var(--instui-component-tag-inline-border-color);\n border-radius: var(--instui-component-tag-inline-border-radius);\n cursor: pointer;\n}\n.pfx-tag.-inline:hover {\n background: var(--instui-component-tag-inline-background-hover);\n}\n.pfx-tag.-inline::after {\n content: \"\";\n flex: none;\n width: 1em;\n height: 1em;\n background: var(--instui-component-tag-inline-icon-color);\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n}\n.pfx-tag.-inline:hover::after {\n background: var(--instui-component-tag-inline-icon-hover-color);\n}\n/* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n.pfx-tag.-readonly {\n cursor: default;\n background: var(--instui-component-tag-default-background);\n}\n.pfx-tag.-readonly.-inline::after {\n display: none;\n}\n";
243
- const text$1 = "/**\n * @component text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — AI-accent text colour.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * <span class=\"pfx-text -size-xs\">x-small text</span>\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n */\n.pfx-text {\n font-family: var(--instui-component-text-content-font-family);\n color: var(--instui-component-text-base-color);\n font-size: var(--instui-component-text-font-size-medium);\n font-weight: var(--instui-component-text-font-weight-normal);\n line-height: var(--instui-component-text-content-line-height);\n}\n.pfx-text.-size-xs {\n font-size: var(--instui-component-text-font-size-x-small);\n}\n.pfx-text.-size-sm {\n font-size: var(--instui-component-text-font-size-small);\n}\n.pfx-text.-size-lg {\n font-size: var(--instui-component-text-font-size-large);\n}\n.pfx-text.-size-xl {\n font-size: var(--instui-component-text-font-size-x-large);\n}\n.pfx-text.-weight-bold {\n font-weight: var(--instui-component-text-font-weight-bold);\n}\n.pfx-text.-style-italic {\n font-style: italic;\n}\n.pfx-text.-color-secondary {\n color: var(--instui-component-text-muted-color);\n}\n.pfx-text.-color-brand {\n color: var(--instui-component-text-primary-color);\n}\n.pfx-text.-color-success {\n color: var(--instui-component-text-success-color);\n}\n.pfx-text.-color-danger {\n color: var(--instui-component-text-error-color);\n}\n.pfx-text.-color-warning {\n color: var(--instui-component-text-warning-color);\n}\n.pfx-text.-color-primary-inverse {\n color: var(--instui-component-text-inverse-color);\n}\n.pfx-text.-color-ai {\n color: var(--instui-component-text-ai-color);\n background: var(--instui-component-text-ai-background-color);\n}\n.pfx-text.-variant-description-page {\n font-size: var(--instui-component-text-description-page-font-size);\n line-height: var(--instui-component-text-description-page-line-height);\n}\n.pfx-text.-variant-description-section {\n font-size: var(--instui-component-text-description-section-font-size);\n line-height: var(--instui-component-text-description-section-line-height);\n}\n.pfx-text.-variant-content-small {\n font-size: var(--instui-component-text-content-small-font-size);\n line-height: var(--instui-component-text-content-small-line-height);\n}\n.pfx-text.-variant-legend {\n font-size: var(--instui-component-text-legend-font-size);\n line-height: var(--instui-component-text-legend-line-height);\n}\n.pfx-text.-transform-uppercase {\n text-transform: uppercase;\n}\n.pfx-text.-transform-lowercase {\n text-transform: lowercase;\n}\n.pfx-text.-transform-capitalize {\n text-transform: capitalize;\n}\n";
244
- const toggleDetails$1 = "/**\n * @component toggle-details\n * @summary A styled native `<details>` disclosure with a rotating chevron.\n * @remarks Built on the native `<details>` element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.\n * @modifier -variant-filled — Filled (surface) variant.\n * @modifier -chevron-end — Place the chevron after the summary.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-details\" open>\n * <summary>What ships in this package?</summary>\n * Class-based component styles, built from the Instructure tokens, plus a prose layer.\n * </details>\n * @structure\n * .pfx-toggle-details {\n * summary {}\n * }\n * @related toggle-group — The bordered, grouped form of the same disclosure.\n */\n.pfx-toggle-details {\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n}\n.pfx-toggle-details > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n font-size: var(--instui-component-toggle-details-font-size-medium);\n padding: var(--instui-component-toggle-details-toggle-padding);\n color: var(--instui-component-toggle-details-text-color);\n}\n/* Kill the native disclosure marker; we supply a rotating chevron. */\n.pfx-toggle-details > summary::-webkit-details-marker {\n display: none;\n}\n.pfx-toggle-details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n.pfx-toggle-details[open] > summary::before {\n transform: rotate(90deg);\n}\n/* iconPosition=\"end\" (named -chevron-end, NOT -icon-position-end — a \"-icon-\" class would collide with the\n generic [class*=\"-icon-\"] glyph painter): push the disclosure chevron to the inline-end. */\n.pfx-toggle-details.-chevron-end > summary::before {\n order: 1;\n margin-inline-start: auto;\n}\n/* variant=\"filled\": the summary reads as an action-secondary button. */\n.pfx-toggle-details.-variant-filled > summary {\n background: var(--instui-color-background-interactive-action-secondary-base);\n border-radius: var(--instui-component-toggle-details-toggle-border-radius);\n}\n.pfx-toggle-details > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-details.-size-sm > summary {\n font-size: var(--instui-component-toggle-details-font-size-small);\n}\n.pfx-toggle-details.-size-sm > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-details.-size-lg > summary {\n font-size: var(--instui-component-toggle-details-font-size-large);\n}\n.pfx-toggle-details.-size-lg > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-large);\n}\n";
245
- const toggleGroup$1 = "/**\n * @component toggle-group\n * @summary A bordered disclosure built on `<details>`: a chevron summary row and collapsible content.\n * @remarks Built on the same native `<details>` foundation as toggle-details; put the `<summary>` first so it becomes the clickable header row and the rest is the collapsible content.\n * @modifier -without-border — Remove the border.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary row's disclosure chevron, a masked glyph that rotates to point down when the group is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-group\" open>\n * <summary>Advanced settings</summary>\n * <div>These options are revealed when the group is expanded. The header row carries a chevron that rotates on open, and the content sits below a divider.</div>\n * </details>\n * @structure\n * .pfx-toggle-group {\n * summary {}\n * div {}\n * }\n * @related toggle-details — The single, unbordered form of the same disclosure.\n */\n.pfx-toggle-group {\n display: block;\n border: var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);\n border-radius: var(--instui-border-radius-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n overflow: hidden;\n}\n.pfx-toggle-group > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n padding: var(--instui-component-toggle-details-content-padding-medium);\n font-size: var(--instui-component-toggle-details-font-size-medium);\n}\n.pfx-toggle-group > summary::-webkit-details-marker {\n display: none;\n}\n.pfx-toggle-group > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n.pfx-toggle-group[open] > summary::before {\n transform: rotate(90deg);\n}\n/* the collapsible content: separated from the header by a top border in the group colour */\n.pfx-toggle-group > :not(summary) {\n border-block-start: var(--instui-border-width-sm) solid\n var(--instui-component-toggle-group-border-color);\n padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-group.-size-sm > summary,\n.pfx-toggle-group.-size-sm > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-small);\n padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-group.-size-lg > summary,\n.pfx-toggle-group.-size-lg > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-large);\n padding: var(--instui-component-toggle-details-content-padding-large);\n}\n/* border={false} */\n.pfx-toggle-group.-without-border {\n border: 0;\n}\n.pfx-toggle-group.-without-border > :not(summary) {\n border-block-start: 0;\n}\n";
246
- const tooltip$1 = "/**\n * @component tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n * <span class=\"pfx-icon -icon-info\"></span>\n * <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * @structure\n * .pfx-tooltip {\n * [class*=\"-icon-\"]:optional {}\n * .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n.pfx-tooltip {\n position: relative;\n display: inline-flex;\n}\n\n@scope (.pfx-tooltip) {\n :scope > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .tip {\n position: absolute;\n z-index: 1;\n inset-block-end: 100%;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n margin-block-end: var(--instui-spacing-space-xs);\n padding: var(--instui-component-tooltip-padding);\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-sm);\n font-family: var(--instui-component-tooltip-font-family);\n font-size: var(--instui-component-tooltip-font-size);\n font-weight: var(--instui-component-tooltip-font-weight);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: opacity 0.15s ease;\n }\n}\n\n/* Show on hover or keyboard focus of the trigger. */\n.pfx-tooltip:hover > .tip,\n.pfx-tooltip:focus-within > .tip {\n opacity: 1;\n visibility: visible;\n}\n\n/* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n bubble to the other sides. */\n.pfx-tooltip > .tip.-placement-bottom {\n inset-block: 100% auto;\n margin-block: var(--instui-spacing-space-xs) 0;\n}\n\n.pfx-tooltip > .tip.-placement-start {\n inset-block-end: auto;\n inset-inline: auto 100%;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 var(--instui-spacing-space-xs) 0 0;\n}\n\n.pfx-tooltip > .tip.-placement-end {\n inset-block-end: auto;\n inset-inline: 100% auto;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 0 0 var(--instui-spacing-space-xs);\n}\n";
247
- const tray$1 = "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * <div class=\"pfx-tray -size-sm\" id=\"tray-start\">\n * <div>\n * <strong>Filters</strong>\n * <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n * </div>\n * <p class=\"pfx-text -size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * @structure\n * .pfx-tray {\n * div {\n * strong {}\n * .pfx-close-button {}\n * }\n * .pfx-text {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n.pfx-tray {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: var(--instui-component-tray-width-md);\n max-inline-size: 100%;\n /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n height:fit-content; so the edge shadows fall outside the viewport. */\n block-size: auto;\n max-block-size: none;\n background: var(--instui-component-tray-background-color);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n padding: var(--instui-component-tray-padding);\n z-index: var(--instui-component-tray-z-index);\n box-shadow: var(--instui-elevation-topmost);\n}\n.pfx-tray.-placement-end {\n inset-inline: auto 0;\n}\n.pfx-tray.-placement-top {\n inset: 0 0 auto 0;\n inline-size: 100%;\n block-size: auto;\n}\n.pfx-tray.-placement-bottom {\n inset: auto 0 0 0;\n inline-size: 100%;\n block-size: auto;\n}\n.pfx-tray.-size-xs {\n inline-size: var(--instui-component-tray-width-xs);\n}\n.pfx-tray.-size-sm {\n inline-size: var(--instui-component-tray-width-sm);\n}\n.pfx-tray.-size-lg {\n inline-size: var(--instui-component-tray-width-lg);\n}\n.pfx-tray.-size-xl {\n inline-size: var(--instui-component-tray-width-xl);\n}\n[popover].pfx-tray {\n margin: 0;\n}\ndialog.pfx-tray {\n margin: 0;\n padding: var(--instui-component-tray-padding);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n/* Slide in from the docked edge on open (native popover + @starting-style, no JS). The transform is\n keyed to placement; inert where allow-discrete transitions aren't supported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-tray {\n transition:\n transform 0.2s ease,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n transform: translateX(0);\n }\n [popover].pfx-tray:not(:popover-open) {\n transform: translateX(-100%);\n }\n @starting-style {\n [popover].pfx-tray:popover-open {\n transform: translateX(-100%);\n }\n }\n [popover].pfx-tray.-placement-end:not(:popover-open) {\n transform: translateX(100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-end:popover-open {\n transform: translateX(100%);\n }\n }\n [popover].pfx-tray.-placement-top:not(:popover-open) {\n transform: translateY(-100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-top:popover-open {\n transform: translateY(-100%);\n }\n }\n [popover].pfx-tray.-placement-bottom:not(:popover-open) {\n transform: translateY(100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-bottom:popover-open {\n transform: translateY(100%);\n }\n }\n}\n";
248
- const treeBrowser$1 = "/**\n * @component tree-browser\n * @summary A disclosure tree of nested collections and leaf items, with rotating chevrons.\n * @remarks Each collection is a native `<details>`; nesting them inside one another builds the tree, and the browser handles opening and closing every branch.\n * @modifier -icon-* — Render folder/file glyph icons in summaries and leaf items.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .item — A leaf entry in the tree.\n * @pseudo ::before — Draws each collection's disclosure chevron, a masked glyph that rotates to point down when the branch is open.\n * @cssstate open\n * @a11y Mark the root with role=\"tree\" and each nested list with role=\"group\".\n * @example\n * <div class=\"pfx-tree-browser\" role=\"tree\">\n * <details open>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Course files</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Syllabus.pdf</a>\n * </li>\n * <li>\n * <details>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Week 1</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item -selected\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Reading.pdf</a>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Slides.pptx</a>\n * </li>\n * </ul>\n * </details>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Rubric.docx</a>\n * </li>\n * </ul>\n * </details>\n * </div>\n * @structure\n * .pfx-tree-browser {\n * details {\n * summary {\n * [class*=\"-icon-\"]:optional {}\n * }\n * ul {\n * li {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * }\n * }\n * @related menu — Both present nested, selectable entries.\n */\n.pfx-tree-browser {\n border-radius: var(--instui-component-tree-browser-border-radius);\n font-family: var(--instui-component-tree-browser-tree-collection-font-family);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n}\n\n/* A collection node (a <details><summary>) and a leaf (.item) share the button chrome. */\n.pfx-tree-browser details > summary,\n.pfx-tree-browser .item {\n display: flex;\n align-items: center;\n gap: var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-medium);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-medium);\n line-height: var(--instui-component-tree-browser-tree-button-text-line-height);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n border-radius: var(--instui-component-tree-browser-tree-button-border-radius);\n cursor: pointer;\n list-style: none;\n}\n\n.pfx-tree-browser details > summary [class*=\"-icon-\"],\n.pfx-tree-browser .item [class*=\"-icon-\"] {\n line-height: 1;\n}\n\n.pfx-tree-browser details > summary::-webkit-details-marker {\n display: none;\n}\n\n/* The disclosure chevron rotates open (same technique as toggle-details). */\n.pfx-tree-browser details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n\n.pfx-tree-browser details[open] > summary::before {\n transform: rotate(90deg);\n}\n\n.pfx-tree-browser details > summary:hover,\n.pfx-tree-browser .item:hover {\n background: var(--instui-component-tree-browser-tree-button-hover-background-color);\n color: var(--instui-component-tree-browser-tree-button-hover-text-color);\n}\n\n.pfx-tree-browser details > summary.-selected,\n.pfx-tree-browser .item.-selected {\n background: var(--instui-component-tree-browser-tree-button-selected-background-color);\n color: var(--instui-component-tree-browser-tree-button-selected-text-color);\n}\n\n/* Nested lists indent; the leaf list carries no bullets. */\n.pfx-tree-browser ul {\n margin: 0;\n padding-inline-start: var(--instui-component-tree-browser-tree-collection-base-spacing-medium);\n list-style: none;\n}\n\n.pfx-tree-browser.-size-sm details > summary,\n.pfx-tree-browser.-size-sm .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-small);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-small);\n}\n\n.pfx-tree-browser.-size-lg details > summary,\n.pfx-tree-browser.-size-lg .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-large);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-large);\n}\n";
249
- const truncate$1 = "/**\n * @component truncate\n * @summary Single-line ellipsis truncation, or a multi-line clamp via `--lines`.\n * @remarks The `-lines` clamp switches to `display: -webkit-box` and reads the `--lines` custom property, so the text wraps to that many lines before it ends in an ellipsis.\n * @modifier -lines — Multi-line clamp; set the line count via the `--lines` custom property (default 2).\n * @compat The `-lines` clamp relies on `-webkit-line-clamp` with `display: -webkit-box`, paired with the standard `line-clamp`.\n * @example\n * <div class=\"pfx-truncate\">This single line keeps going past the edge of its box, so it ends in an ellipsis.</div>\n * @related text — Body typography that this truncates.\n */\n.pfx-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-family: var(--instui-component-truncate-text-font-family);\n line-height: var(--instui-component-truncate-text-line-height);\n}\n.pfx-truncate.-lines {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--lines, 2);\n line-clamp: var(--lines, 2);\n white-space: normal;\n overflow: hidden;\n}\n";
250
- const icon$1 = "/**\n * @utility icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n.pfx-icon {\n display: inline-flex;\n}\n[class*=\"-icon-\"]::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n flex: none;\n vertical-align: -0.125em;\n background: currentColor;\n -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n";
251
- const mask$1 = "/**\n * @utility mask\n * @summary An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native `<dialog>` (its `::backdrop` is the mask).\n * @modifier -fullscreen — Fixed to the viewport, covering it at a high z-index.\n * @modifier -blur — Blur what's behind the mask with a backdrop-filter.\n * @example\n * <div style=\"position: relative\">\n * <div class=\"instui-mask\">\n * <span class=\"instui-spinner\"></span>\n * </div>\n * </div>\n */\n/* An in-flow overlay for non-modal cases (e.g. a spinner over a card). For a modal, prefer a native\n <dialog>: its ::backdrop is the mask and reuses the same `--instui-component-mask-background-color`\n token (see modalRules). */\n.pfx-mask {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--instui-component-mask-background-color);\n}\n.pfx-mask.-fullscreen {\n position: fixed;\n z-index: 999;\n}\n.pfx-mask.-blur {\n backdrop-filter: blur(0.5rem);\n}\n";
252
- const screenReaderContent$1 = "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n.pfx-screen-reader-content {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n";
206
+ const alert$1 = {
207
+ "rebrand": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
208
+ "canvas": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
209
+ "canvasHighContrast": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n"
210
+ }.rebrand;
211
+ const avatar$1 = {
212
+ "rebrand": "/**\n * @component avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient.\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — Ash palette colour.\n * @modifier -color-blue — Blue palette colour.\n * @modifier -color-green — Green palette colour.\n * @modifier -color-grey — Grey palette colour.\n * @modifier -color-orange — Orange palette colour.\n * @modifier -color-red — Red palette colour.\n * @modifier -has-inverse-color — Use the inverse (on-dark) text colour.\n * @modifier -shape-rectangle — Square (rectangular) shape instead of a circle.\n * @modifier -show-border — Add a border ring.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-2xl — Two sizes larger.\n * @modifier -color-accent1 — @deprecated {@link -color-blue}\n * @modifier -color-accent2 — @deprecated {@link -color-green}\n * @modifier -color-accent3 — @deprecated {@link -color-red}\n * @modifier -color-accent4 — @deprecated {@link -color-orange}\n * @modifier -color-accent5 — @deprecated {@link -color-ash}\n * @modifier -color-accent6 — @deprecated {@link -color-grey}\n * @example\n * ```html\n * <span class=\"pfx-avatar instui-me-sm\">DW</span>\n * <span class=\"pfx-avatar -color-ai\">AI</span>\n * ```\n * @related byline — Can host an avatar as its leading hero figure.\n */\n.pfx-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-avatar-size-md);\n height: var(--instui-component-avatar-size-md);\n border-radius: 50%;\n overflow: hidden;\n background: var(--instui-component-avatar-background-color);\n color: var(--instui-component-avatar-blue-text-color);\n border: var(--instui-component-avatar-border-width-sm) solid\n var(--instui-component-avatar-border-color);\n font-family: var(--instui-component-avatar-font-family);\n font-size: var(--instui-component-avatar-font-size-md);\n font-weight: var(--instui-component-avatar-font-weight);\n}\n\n.pfx-avatar.-shape-rectangle {\n border-radius: var(--instui-component-avatar-rectangle-radius);\n}\n\n.pfx-avatar.-size-sm {\n width: var(--instui-component-avatar-size-sm);\n height: var(--instui-component-avatar-size-sm);\n font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-2xs {\n width: var(--instui-component-avatar-size2xs);\n height: var(--instui-component-avatar-size2xs);\n font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs {\n width: var(--instui-component-avatar-size-xs);\n height: var(--instui-component-avatar-size-xs);\n font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-lg {\n width: var(--instui-component-avatar-size-lg);\n height: var(--instui-component-avatar-size-lg);\n font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl {\n width: var(--instui-component-avatar-size-xl);\n height: var(--instui-component-avatar-size-xl);\n font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl {\n width: var(--instui-component-avatar-size2xl);\n height: var(--instui-component-avatar-size2xl);\n font-size: var(--instui-component-avatar-font-size2xl);\n}\n\n.pfx-avatar.-color-ash {\n color: var(--instui-component-avatar-ash-text-color);\n}\n\n.pfx-avatar.-color-ash.-has-inverse-color {\n background: var(--instui-component-avatar-ash-background-color);\n}\n\n.pfx-avatar.-color-blue {\n color: var(--instui-component-avatar-blue-text-color);\n}\n\n.pfx-avatar.-color-blue.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n}\n\n.pfx-avatar.-color-green {\n color: var(--instui-component-avatar-green-text-color);\n}\n\n.pfx-avatar.-color-green.-has-inverse-color {\n background: var(--instui-component-avatar-green-background-color);\n}\n\n.pfx-avatar.-color-grey {\n color: var(--instui-component-avatar-grey-text-color);\n}\n\n.pfx-avatar.-color-grey.-has-inverse-color {\n background: var(--instui-component-avatar-grey-background-color);\n}\n\n.pfx-avatar.-color-orange {\n color: var(--instui-component-avatar-orange-text-color);\n}\n\n.pfx-avatar.-color-orange.-has-inverse-color {\n background: var(--instui-component-avatar-orange-background-color);\n}\n\n.pfx-avatar.-color-red {\n color: var(--instui-component-avatar-red-text-color);\n}\n\n.pfx-avatar.-color-red.-has-inverse-color {\n background: var(--instui-component-avatar-red-background-color);\n}\n\n/* ai: always the violet→sea gradient fill with on-colour text (no border). */\n.pfx-avatar.-color-ai {\n background: linear-gradient(\n to bottom,\n var(--instui-component-avatar-ai-top-gradient-color),\n var(--instui-component-avatar-ai-bottom-gradient-color)\n );\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* hasInverseColor: solid fill (default the accent1/blue surface) + on-colour initials, no ring. A\n `-color-*` companion overrides the fill per colour (that rule is more specific). */\n.pfx-avatar.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* showBorder=\"always\": force the ring back on, even over an inverse fill or a photo. */\n.pfx-avatar.-show-border {\n border-width: var(--instui-component-avatar-border-width-md);\n border-style: solid;\n border-color: var(--instui-component-avatar-border-color);\n}\n\n/* A photo: an <img> child fills the chip and covers the initials (image takes priority). */\n.pfx-avatar > img {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n border-radius: inherit;\n}\n",
213
+ "canvas": "/**\n * @component avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient.\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — Ash palette colour.\n * @modifier -color-blue — Blue palette colour.\n * @modifier -color-green — Green palette colour.\n * @modifier -color-grey — Grey palette colour.\n * @modifier -color-orange — Orange palette colour.\n * @modifier -color-red — Red palette colour.\n * @modifier -has-inverse-color — Use the inverse (on-dark) text colour.\n * @modifier -shape-rectangle — Square (rectangular) shape instead of a circle.\n * @modifier -show-border — Add a border ring.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-2xl — Two sizes larger.\n * @modifier -color-accent1 — @deprecated {@link -color-blue}\n * @modifier -color-accent2 — @deprecated {@link -color-green}\n * @modifier -color-accent3 — @deprecated {@link -color-red}\n * @modifier -color-accent4 — @deprecated {@link -color-orange}\n * @modifier -color-accent5 — @deprecated {@link -color-ash}\n * @modifier -color-accent6 — @deprecated {@link -color-grey}\n * @example\n * ```html\n * <span class=\"pfx-avatar instui-me-sm\">DW</span>\n * <span class=\"pfx-avatar -color-ai\">AI</span>\n * ```\n * @related byline — Can host an avatar as its leading hero figure.\n */\n.pfx-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-avatar-size-md);\n height: var(--instui-component-avatar-size-md);\n border-radius: 50%;\n overflow: hidden;\n background: var(--instui-component-avatar-background-color);\n color: var(--instui-component-avatar-blue-text-color);\n border: var(--instui-component-avatar-border-width-sm) solid\n var(--instui-component-avatar-border-color);\n font-family: var(--instui-component-avatar-font-family);\n font-size: var(--instui-component-avatar-font-size-md);\n font-weight: var(--instui-component-avatar-font-weight);\n}\n\n.pfx-avatar.-shape-rectangle {\n border-radius: var(--instui-component-avatar-rectangle-radius);\n}\n\n.pfx-avatar.-size-sm {\n width: var(--instui-component-avatar-size-sm);\n height: var(--instui-component-avatar-size-sm);\n font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-2xs {\n width: var(--instui-component-avatar-size2xs);\n height: var(--instui-component-avatar-size2xs);\n font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs {\n width: var(--instui-component-avatar-size-xs);\n height: var(--instui-component-avatar-size-xs);\n font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-lg {\n width: var(--instui-component-avatar-size-lg);\n height: var(--instui-component-avatar-size-lg);\n font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl {\n width: var(--instui-component-avatar-size-xl);\n height: var(--instui-component-avatar-size-xl);\n font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl {\n width: var(--instui-component-avatar-size2xl);\n height: var(--instui-component-avatar-size2xl);\n font-size: var(--instui-component-avatar-font-size2xl);\n}\n\n.pfx-avatar.-color-ash {\n color: var(--instui-component-avatar-ash-text-color);\n}\n\n.pfx-avatar.-color-ash.-has-inverse-color {\n background: var(--instui-component-avatar-ash-background-color);\n}\n\n.pfx-avatar.-color-blue {\n color: var(--instui-component-avatar-blue-text-color);\n}\n\n.pfx-avatar.-color-blue.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n}\n\n.pfx-avatar.-color-green {\n color: var(--instui-component-avatar-green-text-color);\n}\n\n.pfx-avatar.-color-green.-has-inverse-color {\n background: var(--instui-component-avatar-green-background-color);\n}\n\n.pfx-avatar.-color-grey {\n color: var(--instui-component-avatar-grey-text-color);\n}\n\n.pfx-avatar.-color-grey.-has-inverse-color {\n background: var(--instui-component-avatar-grey-background-color);\n}\n\n.pfx-avatar.-color-orange {\n color: var(--instui-component-avatar-orange-text-color);\n}\n\n.pfx-avatar.-color-orange.-has-inverse-color {\n background: var(--instui-component-avatar-orange-background-color);\n}\n\n.pfx-avatar.-color-red {\n color: var(--instui-component-avatar-red-text-color);\n}\n\n.pfx-avatar.-color-red.-has-inverse-color {\n background: var(--instui-component-avatar-red-background-color);\n}\n\n/* ai: always the violet→sea gradient fill with on-colour text (no border). */\n.pfx-avatar.-color-ai {\n background: linear-gradient(\n to bottom,\n var(--instui-component-avatar-ai-top-gradient-color),\n var(--instui-component-avatar-ai-bottom-gradient-color)\n );\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* hasInverseColor: solid fill (default the accent1/blue surface) + on-colour initials, no ring. A\n `-color-*` companion overrides the fill per colour (that rule is more specific). */\n.pfx-avatar.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* showBorder=\"always\": force the ring back on, even over an inverse fill or a photo. */\n.pfx-avatar.-show-border {\n border-width: var(--instui-component-avatar-border-width-md);\n border-style: solid;\n border-color: var(--instui-component-avatar-border-color);\n}\n\n/* A photo: an <img> child fills the chip and covers the initials (image takes priority). */\n.pfx-avatar > img {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n border-radius: inherit;\n}\n",
214
+ "canvasHighContrast": "/**\n * @component avatar\n * @summary A user avatar showing initials or an image, circular by default.\n * @remarks By default the palette colour tints the initials on a transparent surface; `-has-inverse-color` fills the surface with the colour and puts the initials on-colour. The `-color-ai` variant always fills with the violet→sea gradient.\n * @modifier -color-ai — AI-accent palette colour.\n * @modifier -color-ash — Ash palette colour.\n * @modifier -color-blue — Blue palette colour.\n * @modifier -color-green — Green palette colour.\n * @modifier -color-grey — Grey palette colour.\n * @modifier -color-orange — Orange palette colour.\n * @modifier -color-red — Red palette colour.\n * @modifier -has-inverse-color — Use the inverse (on-dark) text colour.\n * @modifier -shape-rectangle — Square (rectangular) shape instead of a circle.\n * @modifier -show-border — Add a border ring.\n * @modifier -size-2xs — Two sizes smaller.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @modifier -size-2xl — Two sizes larger.\n * @modifier -color-accent1 — @deprecated {@link -color-blue}\n * @modifier -color-accent2 — @deprecated {@link -color-green}\n * @modifier -color-accent3 — @deprecated {@link -color-red}\n * @modifier -color-accent4 — @deprecated {@link -color-orange}\n * @modifier -color-accent5 — @deprecated {@link -color-ash}\n * @modifier -color-accent6 — @deprecated {@link -color-grey}\n * @example\n * ```html\n * <span class=\"pfx-avatar instui-me-sm\">DW</span>\n * <span class=\"pfx-avatar -color-ai\">AI</span>\n * ```\n * @related byline — Can host an avatar as its leading hero figure.\n */\n.pfx-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-avatar-size-md);\n height: var(--instui-component-avatar-size-md);\n border-radius: 50%;\n overflow: hidden;\n background: var(--instui-component-avatar-background-color);\n color: var(--instui-component-avatar-blue-text-color);\n border: var(--instui-component-avatar-border-width-sm) solid\n var(--instui-component-avatar-border-color);\n font-family: var(--instui-component-avatar-font-family);\n font-size: var(--instui-component-avatar-font-size-md);\n font-weight: var(--instui-component-avatar-font-weight);\n}\n\n.pfx-avatar.-shape-rectangle {\n border-radius: var(--instui-component-avatar-rectangle-radius);\n}\n\n.pfx-avatar.-size-sm {\n width: var(--instui-component-avatar-size-sm);\n height: var(--instui-component-avatar-size-sm);\n font-size: var(--instui-component-avatar-font-size-sm);\n}\n\n.pfx-avatar.-size-2xs {\n width: var(--instui-component-avatar-size2xs);\n height: var(--instui-component-avatar-size2xs);\n font-size: var(--instui-component-avatar-font-size2xs);\n}\n\n.pfx-avatar.-size-xs {\n width: var(--instui-component-avatar-size-xs);\n height: var(--instui-component-avatar-size-xs);\n font-size: var(--instui-component-avatar-font-size-xs);\n}\n\n.pfx-avatar.-size-lg {\n width: var(--instui-component-avatar-size-lg);\n height: var(--instui-component-avatar-size-lg);\n font-size: var(--instui-component-avatar-font-size-lg);\n}\n\n.pfx-avatar.-size-xl {\n width: var(--instui-component-avatar-size-xl);\n height: var(--instui-component-avatar-size-xl);\n font-size: var(--instui-component-avatar-font-size-xl);\n}\n\n.pfx-avatar.-size-2xl {\n width: var(--instui-component-avatar-size2xl);\n height: var(--instui-component-avatar-size2xl);\n font-size: var(--instui-component-avatar-font-size2xl);\n}\n\n.pfx-avatar.-color-ash {\n color: var(--instui-component-avatar-ash-text-color);\n}\n\n.pfx-avatar.-color-ash.-has-inverse-color {\n background: var(--instui-component-avatar-ash-background-color);\n}\n\n.pfx-avatar.-color-blue {\n color: var(--instui-component-avatar-blue-text-color);\n}\n\n.pfx-avatar.-color-blue.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n}\n\n.pfx-avatar.-color-green {\n color: var(--instui-component-avatar-green-text-color);\n}\n\n.pfx-avatar.-color-green.-has-inverse-color {\n background: var(--instui-component-avatar-green-background-color);\n}\n\n.pfx-avatar.-color-grey {\n color: var(--instui-component-avatar-grey-text-color);\n}\n\n.pfx-avatar.-color-grey.-has-inverse-color {\n background: var(--instui-component-avatar-grey-background-color);\n}\n\n.pfx-avatar.-color-orange {\n color: var(--instui-component-avatar-orange-text-color);\n}\n\n.pfx-avatar.-color-orange.-has-inverse-color {\n background: var(--instui-component-avatar-orange-background-color);\n}\n\n.pfx-avatar.-color-red {\n color: var(--instui-component-avatar-red-text-color);\n}\n\n.pfx-avatar.-color-red.-has-inverse-color {\n background: var(--instui-component-avatar-red-background-color);\n}\n\n/* ai: always the violet→sea gradient fill with on-colour text (no border). */\n.pfx-avatar.-color-ai {\n background: linear-gradient(\n to bottom,\n var(--instui-component-avatar-ai-top-gradient-color),\n var(--instui-component-avatar-ai-bottom-gradient-color)\n );\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* hasInverseColor: solid fill (default the accent1/blue surface) + on-colour initials, no ring. A\n `-color-*` companion overrides the fill per colour (that rule is more specific). */\n.pfx-avatar.-has-inverse-color {\n background: var(--instui-component-avatar-blue-background-color);\n color: var(--instui-component-avatar-text-on-color);\n border-color: transparent;\n}\n\n/* showBorder=\"always\": force the ring back on, even over an inverse fill or a photo. */\n.pfx-avatar.-show-border {\n border-width: var(--instui-component-avatar-border-width-md);\n border-style: solid;\n border-color: var(--instui-component-avatar-border-color);\n}\n\n/* A photo: an <img> child fills the chip and covers the initials (image takes priority). */\n.pfx-avatar > img {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n border-radius: inherit;\n}\n"
215
+ }.rebrand;
216
+ const badge$1 = {
217
+ "rebrand": "/**\n * @component badge\n * @summary A small count or status dot placed over a target's corner.\n * @modifier -color-success — A positive/complete count.\n * @modifier -color-danger — An attention/error count.\n * @modifier -color-inverse — On-dark: a light chip with dark text.\n * @modifier -type-notification — A dot only, no count.\n * @modifier -pulse — A pulsing attention ring.\n * @modifier -standalone — Render inline, not positioned over a target's corner.\n * @modifier -placement-top-start — Position at the top-start corner.\n * @modifier -placement-top-end — Position at the top-end corner.\n * @modifier -placement-bottom-start — Position at the bottom-start corner.\n * @modifier -placement-bottom-end — Position at the bottom-end corner.\n * @modifier -placement-start-center — Position centred on the start edge.\n * @modifier -placement-end-center — Position centred on the end edge.\n * @pseudo ::before — The pulsing attention ring drawn in the badge's accent colour (the `-pulse` variant).\n * @cssproperty --pantoken-badge-accent <color> — The chip fill; each `-color-*` variant and the pulse ring read from it.\n * @cssproperty --pantoken-badge-text <color> — The text colour, paired to the accent so it stays legible.\n * @remarks To place a badge over a target, wrap both in a `.pfx-badge-wrapper` (the position anchor) and pin the badge with a `-placement-*` modifier.\n * @animation pantoken-badge-pulse — The pulse ring animation.\n * @example\n * <span class=\"pfx-badge-wrapper\">\n * <button class=\"pfx-button\">Inbox</button>\n * <span class=\"pfx-badge -placement-top-end\">4</span>\n * </span>\n * @wrapper pfx-badge-wrapper\n * @structure\n * The badge renders inline on its own, or inside an optional `pfx-badge-wrapper` that anchors it over a target.\n * .pfx-badge-wrapper:opt {\n * slot {}\n * .pfx-badge {}\n * }\n * @related pill — The inline label-chip counterpart.\n * @demo self:badge\n */\n@keyframes pantoken-badge-pulse {\n from {\n transform: scale(1);\n opacity: 0.7;\n }\n to {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n/* Wrap a target in this so a placed badge can sit over its corner. It contains the badge (rather than\n being contained by it), so it's a flat prefixed class, not a scoped element. */\n.pfx-badge-wrapper {\n position: relative;\n display: inline-flex;\n}\n.pfx-badge {\n --pantoken-badge-accent: var(--instui-component-badge-color-primary);\n /* The primary fill is the brand colour, which flips dark→light between light and dark mode; pair the\n text so it stays legible either way (white on the light-mode navy, dark on the dark-mode light\n fill). The saturated status fills below keep white text in both modes. */\n --pantoken-badge-text: light-dark(\n var(--instui-component-badge-color),\n var(--instui-component-badge-color-inverse)\n );\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--instui-component-badge-size);\n height: var(--instui-component-badge-size);\n padding: 0 var(--instui-component-badge-padding);\n font-family: var(--instui-component-badge-font-family);\n font-size: var(--instui-component-badge-font-size);\n font-weight: var(--instui-component-badge-font-weight);\n line-height: 1;\n border-radius: var(--instui-component-badge-border-radius);\n background: var(--pantoken-badge-accent);\n color: var(--pantoken-badge-text);\n}\n.pfx-badge.-color-success {\n --pantoken-badge-accent: var(--instui-component-badge-color-success);\n --pantoken-badge-text: var(--instui-component-badge-color);\n}\n.pfx-badge.-color-danger {\n --pantoken-badge-accent: var(--instui-component-badge-color-danger);\n --pantoken-badge-text: var(--instui-component-badge-color);\n}\n/* Inverse swaps fill and text (InstUI): a light chip with dark text, for a colour/dark surface. */\n.pfx-badge.-color-inverse {\n --pantoken-badge-accent: var(--instui-component-badge-color);\n --pantoken-badge-text: var(--instui-component-badge-color-inverse);\n}\n/* Notification: a small dot, no count. */\n.pfx-badge.-type-notification {\n min-width: 0;\n width: var(--instui-spacing-space-sm);\n height: var(--instui-spacing-space-sm);\n padding: 0;\n font-size: 0;\n}\n/* Pulse: an expanding ring in the badge's accent colour (InstUI `pulse`). */\n.pfx-badge.-pulse::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border: var(--instui-border-width-md) solid var(--pantoken-badge-accent);\n border-radius: inherit;\n animation: pantoken-badge-pulse 1.2s ease-out infinite;\n}\n/* Placement: position the badge over a `.badge-wrapper` target. InstUI's countOffset is 0.5rem. */\n.pfx-badge.-placement-top-end,\n.pfx-badge.-placement-top-start,\n.pfx-badge.-placement-bottom-end,\n.pfx-badge.-placement-bottom-start,\n.pfx-badge.-placement-start-center,\n.pfx-badge.-placement-end-center {\n position: absolute;\n}\n.pfx-badge.-placement-top-end {\n top: -0.5rem;\n inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-top-start {\n top: -0.5rem;\n inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-bottom-end {\n bottom: -0.5rem;\n inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-bottom-start {\n bottom: -0.5rem;\n inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-end-center {\n top: 50%;\n inset-inline-end: -0.5rem;\n transform: translateY(-50%);\n}\n.pfx-badge.-placement-start-center {\n top: 50%;\n inset-inline-start: -0.5rem;\n transform: translateY(-50%);\n}\n/* Standalone: the inline chip, in flow — resets any placement. */\n.pfx-badge.-standalone {\n position: relative;\n inset: auto;\n transform: none;\n}\n",
218
+ "canvas": "/**\n * @component badge\n * @summary A small count or status dot placed over a target's corner.\n * @modifier -color-success — A positive/complete count.\n * @modifier -color-danger — An attention/error count.\n * @modifier -color-inverse — On-dark: a light chip with dark text.\n * @modifier -type-notification — A dot only, no count.\n * @modifier -pulse — A pulsing attention ring.\n * @modifier -standalone — Render inline, not positioned over a target's corner.\n * @modifier -placement-top-start — Position at the top-start corner.\n * @modifier -placement-top-end — Position at the top-end corner.\n * @modifier -placement-bottom-start — Position at the bottom-start corner.\n * @modifier -placement-bottom-end — Position at the bottom-end corner.\n * @modifier -placement-start-center — Position centred on the start edge.\n * @modifier -placement-end-center — Position centred on the end edge.\n * @pseudo ::before — The pulsing attention ring drawn in the badge's accent colour (the `-pulse` variant).\n * @cssproperty --pantoken-badge-accent <color> — The chip fill; each `-color-*` variant and the pulse ring read from it.\n * @cssproperty --pantoken-badge-text <color> — The text colour, paired to the accent so it stays legible.\n * @remarks To place a badge over a target, wrap both in a `.pfx-badge-wrapper` (the position anchor) and pin the badge with a `-placement-*` modifier.\n * @animation pantoken-badge-pulse — The pulse ring animation.\n * @example\n * <span class=\"pfx-badge-wrapper\">\n * <button class=\"pfx-button\">Inbox</button>\n * <span class=\"pfx-badge -placement-top-end\">4</span>\n * </span>\n * @wrapper pfx-badge-wrapper\n * @structure\n * The badge renders inline on its own, or inside an optional `pfx-badge-wrapper` that anchors it over a target.\n * .pfx-badge-wrapper:opt {\n * slot {}\n * .pfx-badge {}\n * }\n * @related pill — The inline label-chip counterpart.\n * @demo self:badge\n */\n@keyframes pantoken-badge-pulse {\n from {\n transform: scale(1);\n opacity: 0.7;\n }\n to {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n/* Wrap a target in this so a placed badge can sit over its corner. It contains the badge (rather than\n being contained by it), so it's a flat prefixed class, not a scoped element. */\n.pfx-badge-wrapper {\n position: relative;\n display: inline-flex;\n}\n.pfx-badge {\n --pantoken-badge-accent: var(--instui-component-badge-color-primary);\n /* The primary fill is the brand colour, which flips dark→light between light and dark mode; pair the\n text so it stays legible either way (white on the light-mode navy, dark on the dark-mode light\n fill). The saturated status fills below keep white text in both modes. */\n --pantoken-badge-text: light-dark(\n var(--instui-component-badge-color),\n var(--instui-component-badge-color-inverse)\n );\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--instui-component-badge-size);\n height: var(--instui-component-badge-size);\n padding: 0 var(--instui-component-badge-padding);\n font-family: var(--instui-component-badge-font-family);\n font-size: var(--instui-component-badge-font-size);\n font-weight: var(--instui-component-badge-font-weight);\n line-height: 1;\n border-radius: var(--instui-component-badge-border-radius);\n background: var(--pantoken-badge-accent);\n color: var(--pantoken-badge-text);\n}\n.pfx-badge.-color-success {\n --pantoken-badge-accent: var(--instui-component-badge-color-success);\n --pantoken-badge-text: var(--instui-component-badge-color);\n}\n.pfx-badge.-color-danger {\n --pantoken-badge-accent: var(--instui-component-badge-color-danger);\n --pantoken-badge-text: var(--instui-component-badge-color);\n}\n/* Inverse swaps fill and text (InstUI): a light chip with dark text, for a colour/dark surface. */\n.pfx-badge.-color-inverse {\n --pantoken-badge-accent: var(--instui-component-badge-color);\n --pantoken-badge-text: var(--instui-component-badge-color-inverse);\n}\n/* Notification: a small dot, no count. */\n.pfx-badge.-type-notification {\n min-width: 0;\n width: var(--instui-spacing-space-sm);\n height: var(--instui-spacing-space-sm);\n padding: 0;\n font-size: 0;\n}\n/* Pulse: an expanding ring in the badge's accent colour (InstUI `pulse`). */\n.pfx-badge.-pulse::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border: var(--instui-border-width-md) solid var(--pantoken-badge-accent);\n border-radius: inherit;\n animation: pantoken-badge-pulse 1.2s ease-out infinite;\n}\n/* Placement: position the badge over a `.badge-wrapper` target. InstUI's countOffset is 0.5rem. */\n.pfx-badge.-placement-top-end,\n.pfx-badge.-placement-top-start,\n.pfx-badge.-placement-bottom-end,\n.pfx-badge.-placement-bottom-start,\n.pfx-badge.-placement-start-center,\n.pfx-badge.-placement-end-center {\n position: absolute;\n}\n.pfx-badge.-placement-top-end {\n top: -0.5rem;\n inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-top-start {\n top: -0.5rem;\n inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-bottom-end {\n bottom: -0.5rem;\n inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-bottom-start {\n bottom: -0.5rem;\n inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-end-center {\n top: 50%;\n inset-inline-end: -0.5rem;\n transform: translateY(-50%);\n}\n.pfx-badge.-placement-start-center {\n top: 50%;\n inset-inline-start: -0.5rem;\n transform: translateY(-50%);\n}\n/* Standalone: the inline chip, in flow — resets any placement. */\n.pfx-badge.-standalone {\n position: relative;\n inset: auto;\n transform: none;\n}\n",
219
+ "canvasHighContrast": "/**\n * @component badge\n * @summary A small count or status dot placed over a target's corner.\n * @modifier -color-success — A positive/complete count.\n * @modifier -color-danger — An attention/error count.\n * @modifier -color-inverse — On-dark: a light chip with dark text.\n * @modifier -type-notification — A dot only, no count.\n * @modifier -pulse — A pulsing attention ring.\n * @modifier -standalone — Render inline, not positioned over a target's corner.\n * @modifier -placement-top-start — Position at the top-start corner.\n * @modifier -placement-top-end — Position at the top-end corner.\n * @modifier -placement-bottom-start — Position at the bottom-start corner.\n * @modifier -placement-bottom-end — Position at the bottom-end corner.\n * @modifier -placement-start-center — Position centred on the start edge.\n * @modifier -placement-end-center — Position centred on the end edge.\n * @pseudo ::before — The pulsing attention ring drawn in the badge's accent colour (the `-pulse` variant).\n * @cssproperty --pantoken-badge-accent <color> — The chip fill; each `-color-*` variant and the pulse ring read from it.\n * @cssproperty --pantoken-badge-text <color> — The text colour, paired to the accent so it stays legible.\n * @remarks To place a badge over a target, wrap both in a `.pfx-badge-wrapper` (the position anchor) and pin the badge with a `-placement-*` modifier.\n * @animation pantoken-badge-pulse — The pulse ring animation.\n * @example\n * <span class=\"pfx-badge-wrapper\">\n * <button class=\"pfx-button\">Inbox</button>\n * <span class=\"pfx-badge -placement-top-end\">4</span>\n * </span>\n * @wrapper pfx-badge-wrapper\n * @structure\n * The badge renders inline on its own, or inside an optional `pfx-badge-wrapper` that anchors it over a target.\n * .pfx-badge-wrapper:opt {\n * slot {}\n * .pfx-badge {}\n * }\n * @related pill — The inline label-chip counterpart.\n * @demo self:badge\n */\n@keyframes pantoken-badge-pulse {\n from {\n transform: scale(1);\n opacity: 0.7;\n }\n to {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n/* Wrap a target in this so a placed badge can sit over its corner. It contains the badge (rather than\n being contained by it), so it's a flat prefixed class, not a scoped element. */\n.pfx-badge-wrapper {\n position: relative;\n display: inline-flex;\n}\n.pfx-badge {\n --pantoken-badge-accent: var(--instui-component-badge-color-primary);\n /* The primary fill is the brand colour, which flips dark→light between light and dark mode; pair the\n text so it stays legible either way (white on the light-mode navy, dark on the dark-mode light\n fill). The saturated status fills below keep white text in both modes. */\n --pantoken-badge-text: light-dark(\n var(--instui-component-badge-color),\n var(--instui-component-badge-color-inverse)\n );\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--instui-component-badge-size);\n height: var(--instui-component-badge-size);\n padding: 0 var(--instui-component-badge-padding);\n font-family: var(--instui-component-badge-font-family);\n font-size: var(--instui-component-badge-font-size);\n font-weight: var(--instui-component-badge-font-weight);\n line-height: 1;\n border-radius: var(--instui-component-badge-border-radius);\n background: var(--pantoken-badge-accent);\n color: var(--pantoken-badge-text);\n}\n.pfx-badge.-color-success {\n --pantoken-badge-accent: var(--instui-component-badge-color-success);\n --pantoken-badge-text: var(--instui-component-badge-color);\n}\n.pfx-badge.-color-danger {\n --pantoken-badge-accent: var(--instui-component-badge-color-danger);\n --pantoken-badge-text: var(--instui-component-badge-color);\n}\n/* Inverse swaps fill and text (InstUI): a light chip with dark text, for a colour/dark surface. */\n.pfx-badge.-color-inverse {\n --pantoken-badge-accent: var(--instui-component-badge-color);\n --pantoken-badge-text: var(--instui-component-badge-color-inverse);\n}\n/* Notification: a small dot, no count. */\n.pfx-badge.-type-notification {\n min-width: 0;\n width: var(--instui-spacing-space-sm);\n height: var(--instui-spacing-space-sm);\n padding: 0;\n font-size: 0;\n}\n/* Pulse: an expanding ring in the badge's accent colour (InstUI `pulse`). */\n.pfx-badge.-pulse::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border: var(--instui-border-width-md) solid var(--pantoken-badge-accent);\n border-radius: inherit;\n animation: pantoken-badge-pulse 1.2s ease-out infinite;\n}\n/* Placement: position the badge over a `.badge-wrapper` target. InstUI's countOffset is 0.5rem. */\n.pfx-badge.-placement-top-end,\n.pfx-badge.-placement-top-start,\n.pfx-badge.-placement-bottom-end,\n.pfx-badge.-placement-bottom-start,\n.pfx-badge.-placement-start-center,\n.pfx-badge.-placement-end-center {\n position: absolute;\n}\n.pfx-badge.-placement-top-end {\n top: -0.5rem;\n inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-top-start {\n top: -0.5rem;\n inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-bottom-end {\n bottom: -0.5rem;\n inset-inline-end: -0.5rem;\n}\n.pfx-badge.-placement-bottom-start {\n bottom: -0.5rem;\n inset-inline-start: -0.5rem;\n}\n.pfx-badge.-placement-end-center {\n top: 50%;\n inset-inline-end: -0.5rem;\n transform: translateY(-50%);\n}\n.pfx-badge.-placement-start-center {\n top: 50%;\n inset-inline-start: -0.5rem;\n transform: translateY(-50%);\n}\n/* Standalone: the inline chip, in flow — resets any placement. */\n.pfx-badge.-standalone {\n position: relative;\n inset: auto;\n transform: none;\n}\n"
220
+ }.rebrand;
221
+ const billboardByTheme = {
222
+ "rebrand": "/**\n * @component billboard\n * @summary A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.\n * @modifier -clickable — Interactive (clickable) styling with hover feedback.\n * @modifier -icon-* — Render a leading icon glyph on `.hero` (e.g. `<span class=\"hero -icon-inbox\"></span>`).\n * @modifier -size-sm — Small: tighter spacing with smaller heading, message, and hero icon.\n * @modifier -size-small — Long-form alias of {@link -size-sm}.\n * @modifier -size-md — Medium (default): standard spacing with medium heading, message, and hero icon.\n * @modifier -size-medium — Long-form alias of {@link -size-md}.\n * @modifier -size-lg — Large: roomier spacing with larger heading, message, and hero icon.\n * @modifier -size-large — Long-form alias of {@link -size-lg}.\n * @part .hero — The optional leading icon or image.\n * @part .heading — The billboard heading.\n * @part .message — The supporting message.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * ```html\n * <div class=\"pfx-billboard -size-md -clickable\" tabindex=\"0\">\n * <span class=\"hero -icon-inbox\"></span>\n * <div class=\"heading\">No items yet</div>\n * <div class=\"message\">Create your first item to get started.</div>\n * </div>\n * ```\n * @structure\n * .pfx-billboard {\n * .hero:optional {}\n * .heading {}\n * .message {}\n * }\n * @todo `instructure-design-tokens` is missing several values defined in the `Billboard` component, so we hardcode them here for now. When the tokens are added, we should remove the hardcoded values and use the tokens instead.\n */\n.pfx-billboard {\n display: block;\n text-align: center;\n background: var(--instui-component-billboard-background-color);\n padding: var(--instui-component-billboard-padding-medium);\n margin: var(--instui-component-billboard-medium-margin);\n font-family: var(--instui-component-billboard-font-family);\n color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-size-sm {\n padding: var(--instui-component-billboard-padding-small);\n}\n\n.pfx-billboard.-size-md,\n.pfx-billboard.-size-medium {\n padding: var(--instui-component-billboard-padding-medium);\n}\n\n.pfx-billboard.-size-lg {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-large {\n padding: var(--instui-component-billboard-padding-large);\n margin: var(--instui-component-billboard-large-margin);\n}\n\n.pfx-billboard.-size-sm .message {\n font-size: var(--instui-font-size-text-sm);\n}\n\n.pfx-billboard.-size-md .message,\n.pfx-billboard.-size-medium .message {\n font-size: var(--instui-font-size-text-base);\n}\n\n.pfx-billboard.-size-lg .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-size-large .message {\n font-size: 1.375rem;\n}\n\n.pfx-billboard.-clickable {\n cursor: pointer;\n border: var(--instui-component-billboard-button-border-width)\n var(--instui-component-billboard-button-border-style) transparent;\n border-radius: var(--instui-component-billboard-button-border-radius);\n}\n\n.pfx-billboard.-clickable:hover {\n border-style: dashed;\n border-color: var(--instui-color-text-base);\n}\n\n.pfx-billboard.-clickable:focus {\n border-style: solid;\n border-color: var(--instui-color-text-base);\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n\n.pfx-billboard.-clickable:active {\n background: var(--instui-component-billboard-clickable-active-bg);\n border-style: solid;\n border-color: var(--instui-color-text-base);\n}\n\n/* Fallback for environments where @scope is not applied: keep hero icon sizes in sync with size modifiers. */\n.pfx-billboard > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard > .hero[class*=\"-icon-\"] {\n line-height: 1;\n}\n\n.pfx-billboard.-size-sm > .hero,\n.pfx-billboard.-size-small > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n}\n\n.pfx-billboard.-size-md > .hero,\n.pfx-billboard.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n}\n\n.pfx-billboard.-size-lg > .hero,\n.pfx-billboard.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n}\n\n@scope (.pfx-billboard) {\n /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n :scope > .hero {\n display: inline-flex;\n justify-content: center;\n margin-block-end: var(--instui-spacing-space-sm);\n color: var(--instui-color-text-base);\n font-size: var(--instui-component-icon-illu-md);\n }\n\n /* The documented `-icon-*` modifier lives directly on .hero. */\n :scope > .hero[class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope.-size-sm > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-md > .hero,\n :scope.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n :scope.-size-lg > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-sm > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-small > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-md > .hero[class*=\"-icon-\"],\n :scope.-size-medium > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n :scope.-size-lg > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-large > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n :scope > .heading {\n margin: 0 0 var(--instui-spacing-space-xs);\n color: var(--instui-color-text-base);\n font-weight: bold;\n font-size: var(--instui-component-text-font-size-x-x-large);\n }\n\n :scope > .message {\n color: var(--instui-color-text-base);\n font-size: var(--instui-font-size-text-base);\n }\n\n :scope.-clickable:hover > .hero {\n color: var(--instui-component-link-text-color);\n }\n\n :scope.-clickable:active > .hero {\n color: var(--instui-component-link-on-color-text-color);\n }\n}\n",
223
+ "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 /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n :scope > .hero {\n display: inline-flex;\n justify-content: center;\n margin-block-end: var(--instui-spacing-space-sm);\n color: var(--instui-color-text-base);\n font-size: var(--instui-component-icon-illu-md);\n }\n\n /* The documented `-icon-*` modifier lives directly on .hero. */\n :scope > .hero[class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope.-size-sm > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-md > .hero,\n :scope.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n :scope.-size-lg > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-sm > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-small > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-md > .hero[class*=\"-icon-\"],\n :scope.-size-medium > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n :scope.-size-lg > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-large > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n :scope > .heading {\n margin: 0 0 var(--instui-spacing-space-xs);\n color: var(--instui-color-text-base);\n font-weight: bold;\n font-size: var(--instui-component-text-font-size-x-x-large);\n }\n\n :scope > .message {\n color: var(--instui-color-text-base);\n font-size: var(--instui-font-size-text-base);\n }\n\n :scope.-clickable:hover > .hero {\n color: var(--instui-component-link-text-color);\n }\n\n :scope.-clickable:active > .hero {\n color: var(--instui-component-link-on-color-text-color);\n }\n}\n",
224
+ "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 /* The hero (an icon or image) leads the block. Size it via font-size on the glyph in the markup. */\n :scope > .hero {\n display: inline-flex;\n justify-content: center;\n margin-block-end: var(--instui-spacing-space-sm);\n color: var(--instui-color-text-base);\n font-size: var(--instui-component-icon-illu-md);\n }\n\n /* The documented `-icon-*` modifier lives directly on .hero. */\n :scope > .hero[class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope.-size-sm > .hero {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-md > .hero,\n :scope.-size-medium > .hero {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n :scope.-size-lg > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-large > .hero {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-sm > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-small > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-sm);\n }\n\n :scope.-size-md > .hero[class*=\"-icon-\"],\n :scope.-size-medium > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-md);\n }\n\n :scope.-size-lg > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n :scope.-size-large > .hero[class*=\"-icon-\"] {\n font-size: var(--instui-component-icon-illu-lg);\n }\n\n /* The heading sits above the message — bolder and larger (Billboard renders a Heading here). */\n :scope > .heading {\n margin: 0 0 var(--instui-spacing-space-xs);\n color: var(--instui-color-text-base);\n font-weight: bold;\n font-size: var(--instui-component-text-font-size-x-x-large);\n }\n\n :scope > .message {\n color: var(--instui-color-text-base);\n font-size: var(--instui-font-size-text-base);\n }\n\n :scope.-clickable:hover > .hero {\n color: var(--instui-component-link-text-color);\n }\n\n :scope.-clickable:active > .hero {\n color: var(--instui-component-link-on-color-text-color);\n }\n}\n"
225
+ };
226
+ billboardByTheme.rebrand;
227
+ const breadcrumb$1 = {
228
+ "rebrand": "/**\n * @component breadcrumb\n * @summary A breadcrumb trail with `/` separators; the last crumb is the current page.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -icon-* — Render a glyph icon in a crumb link (for example, home in the first crumb).\n * @part .item — A crumb; the last one is the current page.\n * @pseudo ::after — Renders the `/` separator after every crumb except the last.\n * @a11y Wrap the trail in `<nav aria-label>` and mark the current page's crumb with `aria-current=\"page\"`.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n * <span class=\"item\">\n * <a href=\"#\"><span class=\"pfx-icon -icon-house\"></span> Home</a>\n * </span>\n * <span class=\"item\"><a href=\"#\">Guides</a></span>\n * <span class=\"item\"><a href=\"#\">Components</a></span>\n * <span class=\"item\" aria-current=\"page\">Breadcrumb</span>\n * </nav>\n * @structure\n * .pfx-breadcrumb {\n * .item {\n * a {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * @related link — Styles each crumb as a link.\n */\n.pfx-breadcrumb {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-breadcrumb-gap-md);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm {\n gap: var(--instui-component-breadcrumb-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-lg {\n gap: var(--instui-component-breadcrumb-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n}\n\n.pfx-breadcrumb.-size-sm .item:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n}\n\n.pfx-breadcrumb.-size-lg .item:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n}\n\n@scope (.pfx-breadcrumb) {\n :scope a {\n color: var(--instui-component-link-text-color);\n text-decoration: none;\n }\n\n :scope a [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope a:hover {\n color: var(--instui-component-link-text-hover-color);\n text-decoration: underline;\n }\n\n :scope > .item:not(:last-child)::after {\n content: \"/\";\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n color: var(--instui-color-text-muted);\n }\n}\n",
229
+ "canvas": "/**\n * @component breadcrumb\n * @summary A breadcrumb trail with `/` separators; the last crumb is the current page.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -icon-* — Render a glyph icon in a crumb link (for example, home in the first crumb).\n * @part .item — A crumb; the last one is the current page.\n * @pseudo ::after — Renders the `/` separator after every crumb except the last.\n * @a11y Wrap the trail in `<nav aria-label>` and mark the current page's crumb with `aria-current=\"page\"`.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n * <span class=\"item\">\n * <a href=\"#\"><span class=\"pfx-icon -icon-house\"></span> Home</a>\n * </span>\n * <span class=\"item\"><a href=\"#\">Guides</a></span>\n * <span class=\"item\"><a href=\"#\">Components</a></span>\n * <span class=\"item\" aria-current=\"page\">Breadcrumb</span>\n * </nav>\n * @structure\n * .pfx-breadcrumb {\n * .item {\n * a {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * @related link — Styles each crumb as a link.\n */\n.pfx-breadcrumb {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-breadcrumb-gap-md);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm {\n gap: var(--instui-component-breadcrumb-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-lg {\n gap: var(--instui-component-breadcrumb-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n}\n\n.pfx-breadcrumb.-size-sm .item:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n}\n\n.pfx-breadcrumb.-size-lg .item:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n}\n\n@scope (.pfx-breadcrumb) {\n :scope a {\n color: var(--instui-component-link-text-color);\n text-decoration: none;\n }\n\n :scope a [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope a:hover {\n color: var(--instui-component-link-text-hover-color);\n text-decoration: underline;\n }\n\n :scope > .item:not(:last-child)::after {\n content: \"/\";\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n color: var(--instui-color-text-muted);\n }\n}\n",
230
+ "canvasHighContrast": "/**\n * @component breadcrumb\n * @summary A breadcrumb trail with `/` separators; the last crumb is the current page.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -icon-* — Render a glyph icon in a crumb link (for example, home in the first crumb).\n * @part .item — A crumb; the last one is the current page.\n * @pseudo ::after — Renders the `/` separator after every crumb except the last.\n * @a11y Wrap the trail in `<nav aria-label>` and mark the current page's crumb with `aria-current=\"page\"`.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <nav class=\"pfx-breadcrumb\" aria-label=\"Breadcrumb\">\n * <span class=\"item\">\n * <a href=\"#\"><span class=\"pfx-icon -icon-house\"></span> Home</a>\n * </span>\n * <span class=\"item\"><a href=\"#\">Guides</a></span>\n * <span class=\"item\"><a href=\"#\">Components</a></span>\n * <span class=\"item\" aria-current=\"page\">Breadcrumb</span>\n * </nav>\n * @structure\n * .pfx-breadcrumb {\n * .item {\n * a {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * @related link — Styles each crumb as a link.\n */\n.pfx-breadcrumb {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-breadcrumb-gap-md);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n}\n\n.pfx-breadcrumb.-size-sm {\n gap: var(--instui-component-breadcrumb-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n}\n\n.pfx-breadcrumb.-size-lg {\n gap: var(--instui-component-breadcrumb-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n}\n\n.pfx-breadcrumb.-size-sm .item:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-sm);\n}\n\n.pfx-breadcrumb.-size-lg .item:not(:last-child)::after {\n margin-inline-start: var(--instui-component-breadcrumb-gap-lg);\n}\n\n@scope (.pfx-breadcrumb) {\n :scope a {\n color: var(--instui-component-link-text-color);\n text-decoration: none;\n }\n\n :scope a [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope a:hover {\n color: var(--instui-component-link-text-hover-color);\n text-decoration: underline;\n }\n\n :scope > .item:not(:last-child)::after {\n content: \"/\";\n margin-inline-start: var(--instui-component-breadcrumb-gap-md);\n color: var(--instui-color-text-muted);\n }\n}\n"
231
+ }.rebrand;
232
+ const byline$1 = {
233
+ "rebrand": "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <div class=\"pfx-byline -size-md\">\n * <span class=\"pfx-icon -icon-megaphone\"></span>\n * <div>\n * <div class=\"title\">What's new</div>\n * <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n * </div>\n * </div>\n * @structure\n * .pfx-byline {\n * [class*=\"-icon-\"]:optional {}\n * div {\n * .title {}\n * .description {}\n * }\n * }\n */\n.pfx-byline {\n display: flex;\n align-items: center;\n gap: var(--instui-component-byline-figure-margin);\n background: var(--instui-component-byline-background);\n color: var(--instui-component-byline-color);\n font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n :scope > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n .title {\n margin: 0 0 var(--instui-component-byline-title-margin);\n font-size: var(--instui-component-byline-title-font-size);\n font-weight: var(--instui-component-byline-title-font-weight);\n line-height: var(--instui-component-byline-title-line-height);\n }\n\n .description {\n font-size: var(--instui-component-byline-description-font-size);\n font-weight: var(--instui-component-byline-description-font-weight);\n line-height: var(--instui-component-byline-description-line-height);\n }\n}\n",
234
+ "canvas": "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <div class=\"pfx-byline -size-md\">\n * <span class=\"pfx-icon -icon-megaphone\"></span>\n * <div>\n * <div class=\"title\">What's new</div>\n * <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n * </div>\n * </div>\n * @structure\n * .pfx-byline {\n * [class*=\"-icon-\"]:optional {}\n * div {\n * .title {}\n * .description {}\n * }\n * }\n */\n.pfx-byline {\n display: flex;\n align-items: center;\n gap: var(--instui-component-byline-figure-margin);\n background: var(--instui-component-byline-background);\n color: var(--instui-component-byline-color);\n font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n :scope > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n .title {\n margin: 0 0 var(--instui-component-byline-title-margin);\n font-size: var(--instui-component-byline-title-font-size);\n font-weight: var(--instui-component-byline-title-font-weight);\n line-height: var(--instui-component-byline-title-line-height);\n }\n\n .description {\n font-size: var(--instui-component-byline-description-font-size);\n font-weight: var(--instui-component-byline-description-font-weight);\n line-height: var(--instui-component-byline-description-line-height);\n }\n}\n",
235
+ "canvasHighContrast": "/**\n * @component byline\n * @summary A media object: a hero figure beside a title and description.\n * @modifier -align-content-center — Vertically centre the text beside the hero.\n * @modifier -align-content-top — Align the text to the top of the hero.\n * @modifier -icon-* — Render a leading glyph icon before the text block.\n * @modifier -size-sm — Small.\n * @modifier -size-md — Medium.\n * @modifier -size-lg — Large.\n * @part .title — The heading text.\n * @part .description — The supporting body text.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <div class=\"pfx-byline -size-md\">\n * <span class=\"pfx-icon -icon-megaphone\"></span>\n * <div>\n * <div class=\"title\">What's new</div>\n * <div class=\"description\">The figure can be any leading visual — an icon, an avatar, or an image.</div>\n * </div>\n * </div>\n * @structure\n * .pfx-byline {\n * [class*=\"-icon-\"]:optional {}\n * div {\n * .title {}\n * .description {}\n * }\n * }\n */\n.pfx-byline {\n display: flex;\n align-items: center;\n gap: var(--instui-component-byline-figure-margin);\n background: var(--instui-component-byline-background);\n color: var(--instui-component-byline-color);\n font-family: var(--instui-component-byline-font-family);\n}\n\n/* alignContent=\"top\" (default is center, from align-items above). */\n.pfx-byline.-align-content-top {\n align-items: flex-start;\n}\n\n.pfx-byline.-align-content-center {\n align-items: center;\n}\n\n/* size sets a max-width (InstUI's byline small/medium/large). The size tokens are @property-only\n (registered, unvalued) in the IR, so each carries a literal fallback. */\n.pfx-byline.-size-sm {\n max-width: var(--instui-component-byline-small, 20rem);\n}\n\n.pfx-byline.-size-md {\n max-width: var(--instui-component-byline-medium, 30rem);\n}\n\n.pfx-byline.-size-lg {\n max-width: var(--instui-component-byline-large, 40rem);\n}\n\n@scope (.pfx-byline) {\n :scope > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n .title {\n margin: 0 0 var(--instui-component-byline-title-margin);\n font-size: var(--instui-component-byline-title-font-size);\n font-weight: var(--instui-component-byline-title-font-weight);\n line-height: var(--instui-component-byline-title-line-height);\n }\n\n .description {\n font-size: var(--instui-component-byline-description-font-size);\n font-weight: var(--instui-component-byline-description-font-weight);\n line-height: var(--instui-component-byline-description-line-height);\n }\n}\n"
236
+ }.rebrand;
237
+ const calendar$1 = {
238
+ "rebrand": "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @part .day — A day cell; `-today`, `-selected`, and `-outside-month` mark its state.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n * <div class=\"nav\">\n * <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n * <strong>March 2026</strong>\n * <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n * </div>\n * <div class=\"grid\">\n * <span class=\"weekday\">Su</span>\n * <span class=\"weekday\">Mo</span>\n * <span class=\"weekday\">Tu</span>\n * <span class=\"weekday\">We</span>\n * <span class=\"weekday\">Th</span>\n * <span class=\"weekday\">Fr</span>\n * <span class=\"weekday\">Sa</span>\n * <span class=\"day -outside-month\">23</span>\n * <span class=\"day -outside-month\">24</span>\n * <span class=\"day -outside-month\">25</span>\n * <span class=\"day -outside-month\">26</span>\n * <span class=\"day -outside-month\">27</span>\n * <span class=\"day -outside-month\">28</span>\n * <span class=\"day\">1</span>\n * <span class=\"day\">2</span>\n * <span class=\"day\">3</span>\n * <span class=\"day\">4</span>\n * <span class=\"day\">5</span>\n * <span class=\"day\">6</span>\n * <span class=\"day -today\">7</span>\n * <span class=\"day\">8</span>\n * <span class=\"day\">9</span>\n * <span class=\"day\">10</span>\n * <span class=\"day\">11</span>\n * <span class=\"day -selected\">12</span>\n * <span class=\"day\">13</span>\n * <span class=\"day\">14</span>\n * <span class=\"day\">15</span>\n * </div>\n * </div>\n * @structure\n * .pfx-calendar {\n * .nav {\n * .pfx-button {}\n * strong {}\n * }\n * .grid {\n * .weekday {}\n * .day {}\n * }\n * }\n */\n.pfx-calendar {\n display: inline-block;\n text-align: center;\n background: var(--instui-component-calendar-background);\n color: var(--instui-component-calendar-color);\n font-family: var(--instui-component-calendar-font-family);\n font-size: var(--instui-component-calendar-font-size);\n font-weight: var(--instui-component-calendar-font-weight);\n line-height: var(--instui-component-calendar-line-height);\n}\n@scope (.pfx-calendar) {\n /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n only spaces the row below itself, so margin is block-end only — no inline inset). */\n :scope > .nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-block-end: var(--instui-component-calendar-nav-margin);\n }\n /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n whose day table spaces cells with the browser-default border-spacing in both directions. */\n :scope > .grid {\n display: grid;\n grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n justify-content: center;\n gap: var(--instui-spacing-space2xs);\n }\n .weekday,\n .day {\n display: flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--instui-component-calendar-day-min-width);\n block-size: var(--instui-component-calendar-day-height);\n }\n .weekday {\n font-weight: var(--instui-font-weight-interactive);\n }\n .day {\n font-size: var(--instui-component-calendar-day-font-size);\n color: var(--instui-component-calendar-day-color);\n background: var(--instui-component-calendar-day-background);\n cursor: pointer;\n }\n .day.-outside-month {\n color: var(--instui-component-calendar-day-outside-month-color);\n }\n .day.-today {\n background: var(--instui-component-calendar-day-today-background);\n color: var(--instui-component-calendar-day-today-color);\n border-radius: var(--instui-component-calendar-day-today-border-radius);\n }\n .day.-selected {\n background: var(--instui-component-calendar-day-selected-background);\n color: var(--instui-component-calendar-day-selected-color);\n border-radius: var(--instui-component-calendar-day-selected-border-radius);\n }\n}\n",
239
+ "canvas": "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @part .day — A day cell; `-today`, `-selected`, and `-outside-month` mark its state.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n * <div class=\"nav\">\n * <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n * <strong>March 2026</strong>\n * <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n * </div>\n * <div class=\"grid\">\n * <span class=\"weekday\">Su</span>\n * <span class=\"weekday\">Mo</span>\n * <span class=\"weekday\">Tu</span>\n * <span class=\"weekday\">We</span>\n * <span class=\"weekday\">Th</span>\n * <span class=\"weekday\">Fr</span>\n * <span class=\"weekday\">Sa</span>\n * <span class=\"day -outside-month\">23</span>\n * <span class=\"day -outside-month\">24</span>\n * <span class=\"day -outside-month\">25</span>\n * <span class=\"day -outside-month\">26</span>\n * <span class=\"day -outside-month\">27</span>\n * <span class=\"day -outside-month\">28</span>\n * <span class=\"day\">1</span>\n * <span class=\"day\">2</span>\n * <span class=\"day\">3</span>\n * <span class=\"day\">4</span>\n * <span class=\"day\">5</span>\n * <span class=\"day\">6</span>\n * <span class=\"day -today\">7</span>\n * <span class=\"day\">8</span>\n * <span class=\"day\">9</span>\n * <span class=\"day\">10</span>\n * <span class=\"day\">11</span>\n * <span class=\"day -selected\">12</span>\n * <span class=\"day\">13</span>\n * <span class=\"day\">14</span>\n * <span class=\"day\">15</span>\n * </div>\n * </div>\n * @structure\n * .pfx-calendar {\n * .nav {\n * .pfx-button {}\n * strong {}\n * }\n * .grid {\n * .weekday {}\n * .day {}\n * }\n * }\n */\n.pfx-calendar {\n display: inline-block;\n text-align: center;\n background: var(--instui-component-calendar-background);\n color: var(--instui-component-calendar-color);\n font-family: var(--instui-component-calendar-font-family);\n font-size: var(--instui-component-calendar-font-size);\n font-weight: var(--instui-component-calendar-font-weight);\n line-height: var(--instui-component-calendar-line-height);\n}\n@scope (.pfx-calendar) {\n /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n only spaces the row below itself, so margin is block-end only — no inline inset). */\n :scope > .nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-block-end: var(--instui-component-calendar-nav-margin);\n }\n /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n whose day table spaces cells with the browser-default border-spacing in both directions. */\n :scope > .grid {\n display: grid;\n grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n justify-content: center;\n gap: var(--instui-spacing-space2xs);\n }\n .weekday,\n .day {\n display: flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--instui-component-calendar-day-min-width);\n block-size: var(--instui-component-calendar-day-height);\n }\n .weekday {\n font-weight: var(--instui-font-weight-interactive);\n }\n .day {\n font-size: var(--instui-component-calendar-day-font-size);\n color: var(--instui-component-calendar-day-color);\n background: var(--instui-component-calendar-day-background);\n cursor: pointer;\n }\n .day.-outside-month {\n color: var(--instui-component-calendar-day-outside-month-color);\n }\n .day.-today {\n background: var(--instui-component-calendar-day-today-background);\n color: var(--instui-component-calendar-day-today-color);\n border-radius: var(--instui-component-calendar-day-today-border-radius);\n }\n .day.-selected {\n background: var(--instui-component-calendar-day-selected-background);\n color: var(--instui-component-calendar-day-selected-color);\n border-radius: var(--instui-component-calendar-day-selected-border-radius);\n }\n}\n",
240
+ "canvasHighContrast": "/**\n * @component calendar\n * @summary A static month grid with navigation, weekday headers, and day cells.\n * @part .nav — The month navigation row.\n * @part .grid — The seven-column day grid.\n * @part .weekday — A weekday column header.\n * @part .day — A day cell; `-today`, `-selected`, and `-outside-month` mark its state.\n * @a11y Expose the grid with `role=\"table\"` and a descriptive `aria-label`, and give each navigation button its own `aria-label`.\n * @example\n * <div class=\"pfx-calendar\" role=\"table\" aria-label=\"March 2026\">\n * <div class=\"nav\">\n * <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-left\" aria-label=\"Previous month\"></button>\n * <strong>March 2026</strong>\n * <button class=\"pfx-button -color-tertiary -shape-square -without-border -icon-chevron-right\" aria-label=\"Next month\"></button>\n * </div>\n * <div class=\"grid\">\n * <span class=\"weekday\">Su</span>\n * <span class=\"weekday\">Mo</span>\n * <span class=\"weekday\">Tu</span>\n * <span class=\"weekday\">We</span>\n * <span class=\"weekday\">Th</span>\n * <span class=\"weekday\">Fr</span>\n * <span class=\"weekday\">Sa</span>\n * <span class=\"day -outside-month\">23</span>\n * <span class=\"day -outside-month\">24</span>\n * <span class=\"day -outside-month\">25</span>\n * <span class=\"day -outside-month\">26</span>\n * <span class=\"day -outside-month\">27</span>\n * <span class=\"day -outside-month\">28</span>\n * <span class=\"day\">1</span>\n * <span class=\"day\">2</span>\n * <span class=\"day\">3</span>\n * <span class=\"day\">4</span>\n * <span class=\"day\">5</span>\n * <span class=\"day\">6</span>\n * <span class=\"day -today\">7</span>\n * <span class=\"day\">8</span>\n * <span class=\"day\">9</span>\n * <span class=\"day\">10</span>\n * <span class=\"day\">11</span>\n * <span class=\"day -selected\">12</span>\n * <span class=\"day\">13</span>\n * <span class=\"day\">14</span>\n * <span class=\"day\">15</span>\n * </div>\n * </div>\n * @structure\n * .pfx-calendar {\n * .nav {\n * .pfx-button {}\n * strong {}\n * }\n * .grid {\n * .weekday {}\n * .day {}\n * }\n * }\n */\n.pfx-calendar {\n display: inline-block;\n text-align: center;\n background: var(--instui-component-calendar-background);\n color: var(--instui-component-calendar-color);\n font-family: var(--instui-component-calendar-font-family);\n font-size: var(--instui-component-calendar-font-size);\n font-weight: var(--instui-component-calendar-font-weight);\n line-height: var(--instui-component-calendar-line-height);\n}\n@scope (.pfx-calendar) {\n /* Full-width nav: prev/next hug the calendar edges, the month label centres between them (InstUI\n only spaces the row below itself, so margin is block-end only — no inline inset). */\n :scope > .nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-block-end: var(--instui-component-calendar-nav-margin);\n }\n /* Fixed square day cells, centred as a block (1fr columns would stretch the cells unevenly and\n off-centre inside the inline-block calendar). The gap is symmetric on both axes to match InstUI,\n whose day table spaces cells with the browser-default border-spacing in both directions. */\n :scope > .grid {\n display: grid;\n grid-template-columns: repeat(7, var(--instui-component-calendar-day-min-width));\n justify-content: center;\n gap: var(--instui-spacing-space2xs);\n }\n .weekday,\n .day {\n display: flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--instui-component-calendar-day-min-width);\n block-size: var(--instui-component-calendar-day-height);\n }\n .weekday {\n font-weight: var(--instui-font-weight-interactive);\n }\n .day {\n font-size: var(--instui-component-calendar-day-font-size);\n color: var(--instui-component-calendar-day-color);\n background: var(--instui-component-calendar-day-background);\n cursor: pointer;\n }\n .day.-outside-month {\n color: var(--instui-component-calendar-day-outside-month-color);\n }\n .day.-today {\n background: var(--instui-component-calendar-day-today-background);\n color: var(--instui-component-calendar-day-today-color);\n border-radius: var(--instui-component-calendar-day-today-border-radius);\n }\n .day.-selected {\n background: var(--instui-component-calendar-day-selected-background);\n color: var(--instui-component-calendar-day-selected-color);\n border-radius: var(--instui-component-calendar-day-selected-border-radius);\n }\n}\n"
241
+ }.rebrand;
242
+ const checkbox$1 = {
243
+ "rebrand": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * <label class=\"pfx-checkbox\"><input type=\"checkbox\" checked> Checked</label>\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/* 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.pfx-checkbox.-label-placement-start {\n flex-direction: row-reverse;\n}\n.pfx-checkbox.-label-placement-top {\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-checkbox-control-size-md);\n height: var(--instui-component-checkbox-control-size-md);\n margin-block: var(--instui-component-checkbox-control-vertical-margin);\n border: var(--instui-component-checkbox-border-width) solid\n var(--instui-component-checkbox-border-color);\n border-radius: var(--instui-component-checkbox-border-radius);\n background: var(--instui-component-checkbox-background-color);\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease;\n}\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\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.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.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.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/* 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.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.pfx-checkbox:has(input:disabled) {\n color: var(--instui-component-checkbox-label-disabled-color);\n}\n.pfx-checkbox:hover {\n color: var(--instui-component-checkbox-label-hover-color);\n}\n.pfx-checkbox.-size-sm {\n font-size: var(--instui-component-checkbox-font-size-sm);\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.pfx-checkbox.-size-lg {\n font-size: var(--instui-component-checkbox-font-size-lg);\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.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.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.pfx-checkbox.-readonly {\n color: var(--instui-component-checkbox-label-readonly-color);\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@scope (.pfx-checkbox) {\n :scope.-required .asterisk {\n color: var(--instui-component-checkbox-asterisk-color);\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.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/* 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.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n background: var(--instui-component-radio-input-toggle-background-success);\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.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",
244
+ "canvas": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * <label class=\"pfx-checkbox\"><input type=\"checkbox\" checked> Checked</label>\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/* 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.pfx-checkbox.-label-placement-start {\n flex-direction: row-reverse;\n}\n.pfx-checkbox.-label-placement-top {\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-checkbox-control-size-md);\n height: var(--instui-component-checkbox-control-size-md);\n margin-block: var(--instui-component-checkbox-control-vertical-margin);\n border: var(--instui-component-checkbox-border-width) solid\n var(--instui-component-checkbox-border-color);\n border-radius: var(--instui-component-checkbox-border-radius);\n background: var(--instui-component-checkbox-background-color);\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease;\n}\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\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.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.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.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/* 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.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.pfx-checkbox:has(input:disabled) {\n color: var(--instui-component-checkbox-label-disabled-color);\n}\n.pfx-checkbox:hover {\n color: var(--instui-component-checkbox-label-hover-color);\n}\n.pfx-checkbox.-size-sm {\n font-size: var(--instui-component-checkbox-font-size-sm);\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.pfx-checkbox.-size-lg {\n font-size: var(--instui-component-checkbox-font-size-lg);\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.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.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.pfx-checkbox.-readonly {\n color: var(--instui-component-checkbox-label-readonly-color);\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@scope (.pfx-checkbox) {\n :scope.-required .asterisk {\n color: var(--instui-component-checkbox-asterisk-color);\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.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/* 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.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n background: var(--instui-component-radio-input-toggle-background-success);\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.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",
245
+ "canvasHighContrast": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * <label class=\"pfx-checkbox\"><input type=\"checkbox\" checked> Checked</label>\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/* 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.pfx-checkbox.-label-placement-start {\n flex-direction: row-reverse;\n}\n.pfx-checkbox.-label-placement-top {\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-checkbox-control-size-md);\n height: var(--instui-component-checkbox-control-size-md);\n margin-block: var(--instui-component-checkbox-control-vertical-margin);\n border: var(--instui-component-checkbox-border-width) solid\n var(--instui-component-checkbox-border-color);\n border-radius: var(--instui-component-checkbox-border-radius);\n background: var(--instui-component-checkbox-background-color);\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease;\n}\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\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.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.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.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/* 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.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.pfx-checkbox:has(input:disabled) {\n color: var(--instui-component-checkbox-label-disabled-color);\n}\n.pfx-checkbox:hover {\n color: var(--instui-component-checkbox-label-hover-color);\n}\n.pfx-checkbox.-size-sm {\n font-size: var(--instui-component-checkbox-font-size-sm);\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.pfx-checkbox.-size-lg {\n font-size: var(--instui-component-checkbox-font-size-lg);\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.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.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.pfx-checkbox.-readonly {\n color: var(--instui-component-checkbox-label-readonly-color);\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@scope (.pfx-checkbox) {\n :scope.-required .asterisk {\n color: var(--instui-component-checkbox-asterisk-color);\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.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/* 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.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n background: var(--instui-component-radio-input-toggle-background-success);\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.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"
246
+ }.rebrand;
247
+ const closeButton$1 = {
248
+ "rebrand": "/**\n * @component close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n.pfx-close-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n min-height: var(--instui-component-base-button-medium-height);\n padding: var(--instui-spacing-space-xs);\n border: 0;\n background: transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n color: var(--instui-color-text-interactive-action-secondary-base);\n cursor: pointer;\n}\n.pfx-close-button::before {\n content: \"\";\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n}\n.pfx-close-button:hover {\n background: var(--instui-color-background-interactive-action-tertiary-hover);\n}\n.pfx-close-button:active {\n background: var(--instui-color-background-interactive-action-tertiary-active);\n}\n.pfx-close-button.-size-sm {\n min-height: var(--instui-component-base-button-small-height);\n}\n.pfx-close-button.-size-lg {\n min-height: var(--instui-component-base-button-large-height);\n}\n.pfx-close-button.-color-inverse {\n color: var(--instui-component-base-button-primary-inverse-ghost-color);\n}\n",
249
+ "canvas": "/**\n * @component close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n.pfx-close-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n min-height: var(--instui-component-base-button-medium-height);\n padding: var(--instui-spacing-space-xs);\n border: 0;\n background: transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n color: var(--instui-color-text-interactive-action-secondary-base);\n cursor: pointer;\n}\n.pfx-close-button::before {\n content: \"\";\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n}\n.pfx-close-button:hover {\n background: var(--instui-color-background-interactive-action-tertiary-hover);\n}\n.pfx-close-button:active {\n background: var(--instui-color-background-interactive-action-tertiary-active);\n}\n.pfx-close-button.-size-sm {\n min-height: var(--instui-component-base-button-small-height);\n}\n.pfx-close-button.-size-lg {\n min-height: var(--instui-component-base-button-large-height);\n}\n.pfx-close-button.-color-inverse {\n color: var(--instui-component-base-button-primary-inverse-ghost-color);\n}\n",
250
+ "canvasHighContrast": "/**\n * @component close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n.pfx-close-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n min-height: var(--instui-component-base-button-medium-height);\n padding: var(--instui-spacing-space-xs);\n border: 0;\n background: transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n color: var(--instui-color-text-interactive-action-secondary-base);\n cursor: pointer;\n}\n.pfx-close-button::before {\n content: \"\";\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n}\n.pfx-close-button:hover {\n background: var(--instui-color-background-interactive-action-tertiary-hover);\n}\n.pfx-close-button:active {\n background: var(--instui-color-background-interactive-action-tertiary-active);\n}\n.pfx-close-button.-size-sm {\n min-height: var(--instui-component-base-button-small-height);\n}\n.pfx-close-button.-size-lg {\n min-height: var(--instui-component-base-button-large-height);\n}\n.pfx-close-button.-color-inverse {\n color: var(--instui-component-base-button-primary-inverse-ghost-color);\n}\n"
251
+ }.rebrand;
252
+ const contextView$1 = {
253
+ "rebrand": "/**\n * @component context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n.pfx-context-view {\n position: relative;\n display: inline-block;\n padding: var(--instui-spacing-space-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-component-context-view-arrow-border-width) solid\n var(--instui-component-context-view-arrow-border-color);\n border-radius: var(--instui-component-context-view-border-radius);\n /* ContextView floats over content — InstUI gives it a shadow. */\n box-shadow: var(--instui-elevation-above);\n}\n/* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n without it, a surface-coloured caret is invisible against a matching surface. */\n.pfx-context-view::before,\n.pfx-context-view::after {\n content: \"\";\n position: absolute;\n border-style: solid;\n border-color: transparent;\n}\n.pfx-context-view::before {\n border-width: calc(\n var(--instui-component-context-view-arrow-size) +\n var(--instui-component-context-view-arrow-border-width)\n );\n}\n.pfx-context-view::after {\n border-width: var(--instui-component-context-view-arrow-size);\n}\n/* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n pointing down. */\n.pfx-context-view::before {\n top: 100%;\n inset-inline-start: calc(\n var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n );\n border-top-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view::after {\n top: 100%;\n inset-inline-start: var(--instui-spacing-space-lg);\n border-top-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"bottom\": caret on the top edge, pointing up. */\n.pfx-context-view.-placement-bottom::before {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-bottom::after {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n.pfx-context-view.-placement-start::before,\n.pfx-context-view.-placement-start::after {\n top: 50%;\n inset-inline-start: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n}\n.pfx-context-view.-placement-start::before {\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-start::after {\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n.pfx-context-view.-placement-end::before,\n.pfx-context-view.-placement-end::after {\n top: 50%;\n inset-inline-start: auto;\n inset-inline-end: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n}\n.pfx-context-view.-placement-end::before {\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-end::after {\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n.pfx-context-view.-color-inverse {\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::before {\n border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::after {\n border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::before {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::after {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::before {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::after {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::before {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::after {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n/* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n supported; elsewhere the UA centres it. */\n[popover].pfx-context-view {\n position: fixed;\n overflow: visible;\n margin: 0;\n}\n[popover].pfx-context-view:not(:popover-open) {\n display: none;\n}\n/* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n@supports (position-area: block-end) {\n [popover].pfx-context-view {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n [popover].pfx-context-view.-placement-top {\n position-area: block-start;\n }\n [popover].pfx-context-view.-placement-bottom {\n position-area: block-end;\n }\n [popover].pfx-context-view.-placement-start {\n position-area: inline-start center;\n }\n [popover].pfx-context-view.-placement-end {\n position-area: inline-end center;\n }\n}\n",
254
+ "canvas": "/**\n * @component context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n.pfx-context-view {\n position: relative;\n display: inline-block;\n padding: var(--instui-spacing-space-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-component-context-view-arrow-border-width) solid\n var(--instui-component-context-view-arrow-border-color);\n border-radius: var(--instui-component-context-view-border-radius);\n /* ContextView floats over content — InstUI gives it a shadow. */\n box-shadow: var(--instui-elevation-above);\n}\n/* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n without it, a surface-coloured caret is invisible against a matching surface. */\n.pfx-context-view::before,\n.pfx-context-view::after {\n content: \"\";\n position: absolute;\n border-style: solid;\n border-color: transparent;\n}\n.pfx-context-view::before {\n border-width: calc(\n var(--instui-component-context-view-arrow-size) +\n var(--instui-component-context-view-arrow-border-width)\n );\n}\n.pfx-context-view::after {\n border-width: var(--instui-component-context-view-arrow-size);\n}\n/* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n pointing down. */\n.pfx-context-view::before {\n top: 100%;\n inset-inline-start: calc(\n var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n );\n border-top-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view::after {\n top: 100%;\n inset-inline-start: var(--instui-spacing-space-lg);\n border-top-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"bottom\": caret on the top edge, pointing up. */\n.pfx-context-view.-placement-bottom::before {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-bottom::after {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n.pfx-context-view.-placement-start::before,\n.pfx-context-view.-placement-start::after {\n top: 50%;\n inset-inline-start: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n}\n.pfx-context-view.-placement-start::before {\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-start::after {\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n.pfx-context-view.-placement-end::before,\n.pfx-context-view.-placement-end::after {\n top: 50%;\n inset-inline-start: auto;\n inset-inline-end: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n}\n.pfx-context-view.-placement-end::before {\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-end::after {\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n.pfx-context-view.-color-inverse {\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::before {\n border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::after {\n border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::before {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::after {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::before {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::after {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::before {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::after {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n/* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n supported; elsewhere the UA centres it. */\n[popover].pfx-context-view {\n position: fixed;\n overflow: visible;\n margin: 0;\n}\n[popover].pfx-context-view:not(:popover-open) {\n display: none;\n}\n/* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n@supports (position-area: block-end) {\n [popover].pfx-context-view {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n [popover].pfx-context-view.-placement-top {\n position-area: block-start;\n }\n [popover].pfx-context-view.-placement-bottom {\n position-area: block-end;\n }\n [popover].pfx-context-view.-placement-start {\n position-area: inline-start center;\n }\n [popover].pfx-context-view.-placement-end {\n position-area: inline-end center;\n }\n}\n",
255
+ "canvasHighContrast": "/**\n * @component context-view\n * @summary An elevated callout with a caret, positionable on any side; works as a native `[popover]`.\n * @modifier -color-inverse — Dark (inverse) colour scheme.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @pseudo ::before — Renders the caret's outer border triangle.\n * @pseudo ::after — Renders the caret's inner fill triangle.\n * @cssstate open\n * @compat Uses CSS anchor positioning (`position-anchor`, `position-area`, `position-try-fallbacks`) and the native `[popover]` API behind an `@supports` guard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.\n * @example\n * <div class=\"pfx-context-view -placement-bottom\" id=\"cv-popover\">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>\n * @related popover — The generic top-layer popover.\n * @related tooltip — A smaller hover or focus callout.\n */\n.pfx-context-view {\n position: relative;\n display: inline-block;\n padding: var(--instui-spacing-space-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-component-context-view-arrow-border-width) solid\n var(--instui-component-context-view-arrow-border-color);\n border-radius: var(--instui-component-context-view-border-radius);\n /* ContextView floats over content — InstUI gives it a shadow. */\n box-shadow: var(--instui-elevation-above);\n}\n/* The caret is two stacked triangles: ::before is the border (outer, one border-width larger) and\n ::after is the fill (inner). Both are anchored to the same edge so the border peeks around the fill —\n without it, a surface-coloured caret is invisible against a matching surface. */\n.pfx-context-view::before,\n.pfx-context-view::after {\n content: \"\";\n position: absolute;\n border-style: solid;\n border-color: transparent;\n}\n.pfx-context-view::before {\n border-width: calc(\n var(--instui-component-context-view-arrow-size) +\n var(--instui-component-context-view-arrow-border-width)\n );\n}\n.pfx-context-view::after {\n border-width: var(--instui-component-context-view-arrow-size);\n}\n/* Default placement=\"top\": the view sits above its target, so the caret is on the bottom edge\n pointing down. */\n.pfx-context-view::before {\n top: 100%;\n inset-inline-start: calc(\n var(--instui-spacing-space-lg) - var(--instui-component-context-view-arrow-border-width)\n );\n border-top-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view::after {\n top: 100%;\n inset-inline-start: var(--instui-spacing-space-lg);\n border-top-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"bottom\": caret on the top edge, pointing up. */\n.pfx-context-view.-placement-bottom::before {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-bottom::after {\n top: auto;\n bottom: 100%;\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"start\": the view sits before its target, caret on the inline-end edge pointing toward it. */\n.pfx-context-view.-placement-start::before,\n.pfx-context-view.-placement-start::after {\n top: 50%;\n inset-inline-start: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n}\n.pfx-context-view.-placement-start::before {\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-start::after {\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* placement=\"end\": the view sits after its target, caret on the inline-start edge pointing toward it. */\n.pfx-context-view.-placement-end::before,\n.pfx-context-view.-placement-end::after {\n top: 50%;\n inset-inline-start: auto;\n inset-inline-end: 100%;\n transform: translateY(-50%);\n border-top-color: transparent;\n}\n.pfx-context-view.-placement-end::before {\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color);\n}\n.pfx-context-view.-placement-end::after {\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color);\n}\n/* background=\"inverse\": dark surface, inverse text, and inverse-coloured caret layers per placement. */\n.pfx-context-view.-color-inverse {\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::before {\n border-top-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse::after {\n border-top-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::before {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-bottom::after {\n border-top-color: transparent;\n border-bottom-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::before {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-start::after {\n border-top-color: transparent;\n border-inline-start-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::before {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-border-color-inverse);\n}\n.pfx-context-view.-color-inverse.-placement-end::after {\n border-top-color: transparent;\n border-inline-end-color: var(--instui-component-context-view-arrow-background-color-inverse);\n}\n/* Popover use: as a [popover] the UA hides the element until it's opened, but the base `display`\n above out-ranks the UA `[popover]:not(:popover-open){display:none}` rule — so restore the hide here,\n and float it in the top layer when open. Position it at a trigger with CSS anchor positioning where\n supported; elsewhere the UA centres it. */\n[popover].pfx-context-view {\n position: fixed;\n overflow: visible;\n margin: 0;\n}\n[popover].pfx-context-view:not(:popover-open) {\n display: none;\n}\n/* CSS anchor positioning (Chromium): with `anchor-name: --pantoken-anchor` on the trigger (or a\n popovertarget invoker's implicit anchor), the -placement-* modifier docks the caret side to the\n trigger and flips to stay on-screen. Inert elsewhere — the UA centres it in the top layer. */\n@supports (position-area: block-end) {\n [popover].pfx-context-view {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n [popover].pfx-context-view.-placement-top {\n position-area: block-start;\n }\n [popover].pfx-context-view.-placement-bottom {\n position-area: block-end;\n }\n [popover].pfx-context-view.-placement-start {\n position-area: inline-start center;\n }\n [popover].pfx-context-view.-placement-end {\n position-area: inline-end center;\n }\n}\n"
256
+ }.rebrand;
257
+ const fileDrop$1 = {
258
+ "rebrand": "/**\n * @component file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n * <span class=\"pfx-icon -icon-cloud-upload\"></span>\n * <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n * <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n * <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n * [class*=\"-icon-\"]:optional {}\n * .pfx-text {\n * strong {}\n * }\n * .pfx-text {}\n * input {}\n * }\n */\n.pfx-file-drop {\n display: block;\n text-align: center;\n padding: var(--instui-spacing-space-lg);\n color: var(--instui-color-text-base);\n background: var(--instui-component-file-drop-background-color);\n border: var(--instui-component-file-drop-border-width)\n var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n border-radius: var(--instui-component-file-drop-border-radius);\n}\n\n.pfx-file-drop:hover,\n.pfx-file-drop.-hover {\n border-color: var(--instui-component-file-drop-hover-border-color);\n}\n\n.pfx-file-drop.-accepted {\n border-color: var(--instui-component-file-drop-accepted-color);\n}\n\n.pfx-file-drop.-rejected {\n border-color: var(--instui-component-file-drop-rejected-color);\n}\n\n.pfx-file-drop > [class*=\"-icon-\"] {\n line-height: 1;\n}\n",
259
+ "canvas": "/**\n * @component file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n * <span class=\"pfx-icon -icon-cloud-upload\"></span>\n * <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n * <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n * <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n * [class*=\"-icon-\"]:optional {}\n * .pfx-text {\n * strong {}\n * }\n * .pfx-text {}\n * input {}\n * }\n */\n.pfx-file-drop {\n display: block;\n text-align: center;\n padding: var(--instui-spacing-space-lg);\n color: var(--instui-color-text-base);\n background: var(--instui-component-file-drop-background-color);\n border: var(--instui-component-file-drop-border-width)\n var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n border-radius: var(--instui-component-file-drop-border-radius);\n}\n\n.pfx-file-drop:hover,\n.pfx-file-drop.-hover {\n border-color: var(--instui-component-file-drop-hover-border-color);\n}\n\n.pfx-file-drop.-accepted {\n border-color: var(--instui-component-file-drop-accepted-color);\n}\n\n.pfx-file-drop.-rejected {\n border-color: var(--instui-component-file-drop-rejected-color);\n}\n\n.pfx-file-drop > [class*=\"-icon-\"] {\n line-height: 1;\n}\n",
260
+ "canvasHighContrast": "/**\n * @component file-drop\n * @summary A file dropzone with hover, accepted, and rejected states.\n * @modifier -icon-* — Render the leading dropzone glyph icon.\n * @modifier -accepted — Drag state for an acceptable file.\n * @modifier -hover — Hover or drag-over state.\n * @modifier -rejected — Drag state for a rejected file.\n * @accessibility Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.\n * @example\n * <label class=\"pfx-file-drop\" id=\"fd\">\n * <span class=\"pfx-icon -icon-cloud-upload\"></span>\n * <div class=\"pfx-text\"><strong>Drag an image here</strong>, or click to browse.</div>\n * <div class=\"pfx-text -size-sm pfx-fg-muted\" id=\"fd-msg\">PNG or JPG up to 5&nbsp;MB.</div>\n * <input type=\"file\" id=\"fd-input\">\n * </label>\n * @structure\n * .pfx-file-drop {\n * [class*=\"-icon-\"]:optional {}\n * .pfx-text {\n * strong {}\n * }\n * .pfx-text {}\n * input {}\n * }\n */\n.pfx-file-drop {\n display: block;\n text-align: center;\n padding: var(--instui-spacing-space-lg);\n color: var(--instui-color-text-base);\n background: var(--instui-component-file-drop-background-color);\n border: var(--instui-component-file-drop-border-width)\n var(--instui-component-file-drop-border-style) var(--instui-component-file-drop-border-color);\n border-radius: var(--instui-component-file-drop-border-radius);\n}\n\n.pfx-file-drop:hover,\n.pfx-file-drop.-hover {\n border-color: var(--instui-component-file-drop-hover-border-color);\n}\n\n.pfx-file-drop.-accepted {\n border-color: var(--instui-component-file-drop-accepted-color);\n}\n\n.pfx-file-drop.-rejected {\n border-color: var(--instui-component-file-drop-rejected-color);\n}\n\n.pfx-file-drop > [class*=\"-icon-\"] {\n line-height: 1;\n}\n"
261
+ }.rebrand;
262
+ const formFieldGroup$1 = {
263
+ "rebrand": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n * <legend>Shipping address</legend>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">First name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Last name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">City</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">State</span>\n * <span class=\"controls\">\n * <select class=\"pfx-simple-select\">\n * <option>CA</option>\n * <option>NY</option>\n * <option>TX</option>\n * </select>\n * </span>\n * </label>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n * </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n * legend {}\n * .pfx-form-field {}\n * .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n display: grid;\n grid-template-columns: 1fr;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n.pfx-form-field-group > legend {\n grid-column: 1 / -1;\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-form-field-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n.pfx-form-field-group.-row-spacing-none {\n row-gap: 0;\n}\n.pfx-form-field-group.-row-spacing-small {\n row-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-row-spacing-medium {\n row-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-row-spacing-large {\n row-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-col-spacing-none {\n column-gap: 0;\n}\n.pfx-form-field-group.-col-spacing-small {\n column-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-col-spacing-medium {\n column-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-col-spacing-large {\n column-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-v-align-top {\n align-items: start;\n}\n.pfx-form-field-group.-v-align-middle {\n align-items: center;\n}\n.pfx-form-field-group.-v-align-bottom {\n align-items: end;\n}\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n .pfx-form-field-group.-layout-aligned {\n grid-template-columns: auto 1fr;\n align-items: center;\n }\n .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n }\n}\n",
264
+ "canvas": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n * <legend>Shipping address</legend>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">First name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Last name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">City</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">State</span>\n * <span class=\"controls\">\n * <select class=\"pfx-simple-select\">\n * <option>CA</option>\n * <option>NY</option>\n * <option>TX</option>\n * </select>\n * </span>\n * </label>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n * </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n * legend {}\n * .pfx-form-field {}\n * .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n display: grid;\n grid-template-columns: 1fr;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n.pfx-form-field-group > legend {\n grid-column: 1 / -1;\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-form-field-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n.pfx-form-field-group.-row-spacing-none {\n row-gap: 0;\n}\n.pfx-form-field-group.-row-spacing-small {\n row-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-row-spacing-medium {\n row-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-row-spacing-large {\n row-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-col-spacing-none {\n column-gap: 0;\n}\n.pfx-form-field-group.-col-spacing-small {\n column-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-col-spacing-medium {\n column-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-col-spacing-large {\n column-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-v-align-top {\n align-items: start;\n}\n.pfx-form-field-group.-v-align-middle {\n align-items: center;\n}\n.pfx-form-field-group.-v-align-bottom {\n align-items: end;\n}\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n .pfx-form-field-group.-layout-aligned {\n grid-template-columns: auto 1fr;\n align-items: center;\n }\n .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n }\n}\n",
265
+ "canvasHighContrast": "/**\n * @component form-field-group\n * @summary A `<fieldset>` group with a legend, a column or inline layout, and configurable spacing.\n * @modifier -col-spacing-none — No column gap.\n * @modifier -col-spacing-small — Small column gap.\n * @modifier -col-spacing-medium — Medium column gap.\n * @modifier -col-spacing-large — Large column gap.\n * @modifier -row-spacing-none — No row gap.\n * @modifier -row-spacing-small — Small row gap.\n * @modifier -row-spacing-medium — Medium row gap.\n * @modifier -row-spacing-large — Large row gap.\n * @modifier -layout-aligned — Align child fields to a shared grid.\n * @modifier -layout-columns — Lay child fields out in columns.\n * @modifier -layout-inline — Lay child fields inline, in a row.\n * @modifier -required — Mark the group as required.\n * @modifier -v-align-top — Top-align the fields.\n * @modifier -v-align-middle — Middle-align the fields.\n * @modifier -v-align-bottom — Bottom-align the fields.\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>`, so the legend text names the whole group for assistive tech.\n * @compat The `-layout-aligned` mode uses CSS subgrid behind an `@supports` guard; where subgrid is unsupported, the fields fall back to their own stacked layout.\n * @example\n * <fieldset class=\"pfx-form-field-group -layout-columns -col-spacing-medium\">\n * <legend>Shipping address</legend>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">First name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Last name</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">City</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\"></span>\n * </label>\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">State</span>\n * <span class=\"controls\">\n * <select class=\"pfx-simple-select\">\n * <option>CA</option>\n * <option>NY</option>\n * <option>TX</option>\n * </select>\n * </span>\n * </label>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">All fields are used for delivery only.</span>\n * </div>\n * </fieldset>\n * @structure\n * .pfx-form-field-group.-layout-columns.-col-spacing-medium {\n * legend {}\n * .pfx-form-field {}\n * .pfx-form-field-messages {}\n * }\n * @related form-field — The single field this group repeats.\n * @related radio-input-group — Groups radio inputs under a legend.\n */\n.pfx-form-field-group {\n display: grid;\n grid-template-columns: 1fr;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n.pfx-form-field-group > legend {\n grid-column: 1 / -1;\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-form-field-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field-group.-layout-columns,\n.pfx-form-field-group.-layout-inline {\n grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));\n}\n.pfx-form-field-group.-row-spacing-none {\n row-gap: 0;\n}\n.pfx-form-field-group.-row-spacing-small {\n row-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-row-spacing-medium {\n row-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-row-spacing-large {\n row-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-col-spacing-none {\n column-gap: 0;\n}\n.pfx-form-field-group.-col-spacing-small {\n column-gap: var(--instui-spacing-space-sm);\n}\n.pfx-form-field-group.-col-spacing-medium {\n column-gap: var(--instui-spacing-space-md);\n}\n.pfx-form-field-group.-col-spacing-large {\n column-gap: var(--instui-spacing-space-lg);\n}\n.pfx-form-field-group.-v-align-top {\n align-items: start;\n}\n.pfx-form-field-group.-v-align-middle {\n align-items: center;\n}\n.pfx-form-field-group.-v-align-bottom {\n align-items: end;\n}\n/* -layout-aligned: the group's inline fields share one [label | controls] grid via subgrid, so every\n label lines up in a single column (Chromium/Firefox). Inert where subgrid is unsupported — the fields\n just fall back to their own stacked layout. */\n@supports (grid-template-columns: subgrid) {\n .pfx-form-field-group.-layout-aligned {\n grid-template-columns: auto 1fr;\n align-items: center;\n }\n .pfx-form-field-group.-layout-aligned > .pfx-form-field {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n }\n}\n"
266
+ }.rebrand;
267
+ const formFieldMessages$1 = {
268
+ "rebrand": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field-message {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n}\n.pfx-form-field-message.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n}\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n}\n.pfx-form-field-message.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
269
+ "canvas": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field-message {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n}\n.pfx-form-field-message.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n}\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n}\n.pfx-form-field-message.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
270
+ "canvasHighContrast": "/**\n * @component form-field-messages\n * @summary Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success.\n * @modifier -type-new-error — @deprecated {@link -type-error}\n * @part .pfx-form-field-message — An individual message; its `-type-*` picks the hint, error, success, or screen-reader-only variant.\n * @pseudo ::before — Renders the leading status glyph on error and success messages: an alert circle for errors and a check circle for success.\n * @accessibility A `-type-screenreader-only` message is visually hidden but stays in the accessibility tree, so it's still announced; pair error and success messages with the field via aria-describedby so assistive tech reads them with the control.\n * @example\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * @structure\n * .pfx-form-field-messages {\n * .pfx-form-field-message {}\n * }\n * @related form-field — Wraps a label, controls, and these messages.\n */\n.pfx-form-field-messages {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field-message {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-family: var(--instui-component-form-field-message-font-family);\n font-size: var(--instui-component-form-field-message-font-size);\n font-weight: var(--instui-component-form-field-message-font-weight);\n line-height: var(--instui-component-form-field-message-line-height);\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-hint {\n color: var(--instui-component-form-field-message-hint-text-color);\n}\n.pfx-form-field-message.-type-error {\n color: var(--instui-component-form-field-message-error-text-color);\n}\n.pfx-form-field-message.-type-success {\n color: var(--instui-component-form-field-message-success-text-color);\n}\n.pfx-form-field-message.-type-error::before,\n.pfx-form-field-message.-type-success::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n}\n.pfx-form-field-message.-type-error::before {\n -webkit-mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n mask: var(--instui-icon-circle-alert) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-success::before {\n -webkit-mask: var(--instui-icon-circle-check) center / contain no-repeat;\n mask: var(--instui-icon-circle-check) center / contain no-repeat;\n}\n.pfx-form-field-message.-type-screenreader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n"
271
+ }.rebrand;
272
+ const formField$1 = {
273
+ "rebrand": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Email address</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * </label>\n * @structure\n * .pfx-form-field {\n * .label {}\n * .controls {\n * .pfx-text-input {}\n * }\n * .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n gap: var(--instui-component-form-field-layout-gap-inputs);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n}\n@scope (.pfx-form-field) {\n :scope > .label {\n grid-area: label;\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n :scope > .controls {\n grid-area: controls;\n }\n}\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n grid-area: messages;\n}\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n display: none;\n}\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n display: inline-flex;\n}\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field.-readonly .label {\n color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n.pfx-form-field.-layout-stacked {\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n.pfx-form-field.-layout-inline {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field.-layout-inline.-v-align-top {\n align-items: start;\n}\n.pfx-form-field.-layout-inline.-v-align-bottom {\n align-items: end;\n}\n.pfx-form-field.-layout-inline.-label-align-start .label {\n text-align: start;\n}\n.pfx-form-field.-layout-inline.-label-align-end .label {\n text-align: end;\n}\n.pfx-form-field.-inline {\n display: inline-grid;\n inline-size: auto;\n}\n",
274
+ "canvas": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Email address</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * </label>\n * @structure\n * .pfx-form-field {\n * .label {}\n * .controls {\n * .pfx-text-input {}\n * }\n * .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n gap: var(--instui-component-form-field-layout-gap-inputs);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n}\n@scope (.pfx-form-field) {\n :scope > .label {\n grid-area: label;\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n :scope > .controls {\n grid-area: controls;\n }\n}\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n grid-area: messages;\n}\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n display: none;\n}\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n display: inline-flex;\n}\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field.-readonly .label {\n color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n.pfx-form-field.-layout-stacked {\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n.pfx-form-field.-layout-inline {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field.-layout-inline.-v-align-top {\n align-items: start;\n}\n.pfx-form-field.-layout-inline.-v-align-bottom {\n align-items: end;\n}\n.pfx-form-field.-layout-inline.-label-align-start .label {\n text-align: start;\n}\n.pfx-form-field.-layout-inline.-label-align-end .label {\n text-align: end;\n}\n.pfx-form-field.-inline {\n display: inline-grid;\n inline-size: auto;\n}\n",
275
+ "canvasHighContrast": "/**\n * @component form-field\n * @summary A form-field wrapper: a label, its controls, and inline, required, or readonly layouts.\n * @remarks An error message stays hidden until the field's control is `:user-invalid` (after the user interacts) or you add the `-invalid` class. Use `-layout-inline` to put the label beside the controls and `-layout-stacked` to put it above.\n * @modifier -inline — Inline layout (shorthand for `-layout-inline`).\n * @modifier -layout-inline — Inline layout: label beside the controls.\n * @modifier -layout-stacked — Stacked layout: label above the controls.\n * @modifier -label-align-start — Start-align the label text.\n * @modifier -label-align-end — End-align the label text.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -readonly — Read-only state.\n * @modifier -v-align-top — Top-align the label with the controls.\n * @modifier -v-align-bottom — Bottom-align the label with the controls.\n * @part .label — The field label.\n * @part .controls — The control area beside or below the label.\n * @pseudo ::after — Renders the decorative required-field asterisk after the label text when the field is required.\n * @accessibility The `<label>` element wraps the control, so the label text names it natively; the required asterisk is decorative and should be hidden from assistive tech (aria-hidden), and the error message surfaces once the control is `:user-invalid` or you add the `-invalid` class.\n * @compat Contains its element styles with the CSS `@scope` at-rule; needs a recent Chromium, Firefox, or Safari.\n * @example\n * <label class=\"pfx-form-field\">\n * <span class=\"label\">Email address</span>\n * <span class=\"controls\"><input class=\"pfx-text-input\" type=\"email\" placeholder=\"you@example.com\"></span>\n * <div class=\"pfx-form-field-messages\">\n * <span class=\"pfx-form-field-message -type-hint\">We'll never share it.</span>\n * <span class=\"pfx-form-field-message -type-error\">Enter a valid email address.</span>\n * </div>\n * </label>\n * @structure\n * .pfx-form-field {\n * .label {}\n * .controls {\n * .pfx-text-input {}\n * }\n * .pfx-form-field-messages {}\n * }\n * @related form-field-messages — Renders the field's hint, error, and success messages.\n * @related form-field-group — Groups related fields under a shared legend.\n */\n.pfx-form-field {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n gap: var(--instui-component-form-field-layout-gap-inputs);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n}\n@scope (.pfx-form-field) {\n :scope > .label {\n grid-area: label;\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n }\n :scope > .controls {\n grid-area: controls;\n }\n}\n/* Messages region — kept OUTSIDE @scope: the messages class shares the form-field prefix. */\n.pfx-form-field > .pfx-form-field-messages {\n grid-area: messages;\n}\n/* Client-side validation: an error message stays hidden until the field's control is :user-invalid\n (after the user has interacted), per MDN guidance; then it shows. The explicit -invalid class on the\n control (and a standalone .instui-form-field-messages outside a field) are unaffected. */\n.pfx-form-field .pfx-form-field-message.-type-error,\n.pfx-form-field .pfx-form-field-message.-type-new-error {\n display: none;\n}\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-error,\n.pfx-form-field:has(:user-invalid) .pfx-form-field-message.-type-new-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-error,\n.pfx-form-field.-invalid .pfx-form-field-message.-type-new-error {\n display: inline-flex;\n}\n/* Required indicator: native [required] control OR the -required class; decorative (aria-hidden). */\n.pfx-form-field:is(.-required, :has(:required)) .label::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n.pfx-form-field.-readonly .label {\n color: var(--instui-component-form-field-layout-readonly-text-color);\n}\n.pfx-form-field.-layout-stacked {\n grid-template-columns: 1fr;\n grid-template-areas: \"label\" \"controls\" \"messages\";\n}\n.pfx-form-field.-layout-inline {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"label controls\" \". messages\";\n align-items: center;\n column-gap: var(--instui-component-form-field-layout-gap-primitives);\n}\n.pfx-form-field.-layout-inline.-v-align-top {\n align-items: start;\n}\n.pfx-form-field.-layout-inline.-v-align-bottom {\n align-items: end;\n}\n.pfx-form-field.-layout-inline.-label-align-start .label {\n text-align: start;\n}\n.pfx-form-field.-layout-inline.-label-align-end .label {\n text-align: end;\n}\n.pfx-form-field.-inline {\n display: inline-grid;\n inline-size: auto;\n}\n"
276
+ }.rebrand;
277
+ const img$1 = {
278
+ "rebrand": "/**\n * @component img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n.pfx-img {\n display: inline-block;\n max-inline-size: 100%;\n block-size: auto;\n --pantoken-img-filter: none;\n filter: var(--pantoken-img-filter);\n transition: filter var(--instui-component-img-effect-transition-duration) ease;\n}\n.pfx-img.-display-block {\n display: block;\n}\n/* constrain: fill a sized box (the consumer sets width/height). */\n.pfx-img.-constrain-cover {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n}\n.pfx-img.-constrain-contain {\n inline-size: 100%;\n block-size: 100%;\n object-fit: contain;\n}\n/* Effects compose through the custom property, so grayscale + blur can apply together. */\n.pfx-img.-with-grayscale {\n --pantoken-img-filter: grayscale(1);\n}\n.pfx-img.-with-blur {\n --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n}\n.pfx-img.-with-grayscale.-with-blur {\n --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n}\n",
279
+ "canvas": "/**\n * @component img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n.pfx-img {\n display: inline-block;\n max-inline-size: 100%;\n block-size: auto;\n --pantoken-img-filter: none;\n filter: var(--pantoken-img-filter);\n transition: filter var(--instui-component-img-effect-transition-duration) ease;\n}\n.pfx-img.-display-block {\n display: block;\n}\n/* constrain: fill a sized box (the consumer sets width/height). */\n.pfx-img.-constrain-cover {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n}\n.pfx-img.-constrain-contain {\n inline-size: 100%;\n block-size: 100%;\n object-fit: contain;\n}\n/* Effects compose through the custom property, so grayscale + blur can apply together. */\n.pfx-img.-with-grayscale {\n --pantoken-img-filter: grayscale(1);\n}\n.pfx-img.-with-blur {\n --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n}\n.pfx-img.-with-grayscale.-with-blur {\n --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n}\n",
280
+ "canvasHighContrast": "/**\n * @component img\n * @summary A styled `<img>` with display, crop, and effect modifiers that stack.\n * @modifier -display-block — Display as a block element.\n * @modifier -constrain-cover — Scale to fill the box (cover).\n * @modifier -constrain-contain — Scale to fit within the box (contain).\n * @modifier -with-grayscale — Apply a grayscale effect.\n * @modifier -with-blur — Apply a blur effect.\n * @cssproperty --pantoken-img-filter <filter-value-list> | none — The composed CSS filter on the image; the effect modifiers set it, and you can override it for a custom filter.\n * @accessibility Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.\n * @example\n * <img class=\"pfx-img\" alt=\"Gradient\">\n */\n.pfx-img {\n display: inline-block;\n max-inline-size: 100%;\n block-size: auto;\n --pantoken-img-filter: none;\n filter: var(--pantoken-img-filter);\n transition: filter var(--instui-component-img-effect-transition-duration) ease;\n}\n.pfx-img.-display-block {\n display: block;\n}\n/* constrain: fill a sized box (the consumer sets width/height). */\n.pfx-img.-constrain-cover {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n}\n.pfx-img.-constrain-contain {\n inline-size: 100%;\n block-size: 100%;\n object-fit: contain;\n}\n/* Effects compose through the custom property, so grayscale + blur can apply together. */\n.pfx-img.-with-grayscale {\n --pantoken-img-filter: grayscale(1);\n}\n.pfx-img.-with-blur {\n --pantoken-img-filter: blur(var(--instui-component-img-image-blur-amount));\n}\n.pfx-img.-with-grayscale.-with-blur {\n --pantoken-img-filter: grayscale(1) blur(var(--instui-component-img-image-blur-amount));\n}\n"
281
+ }.rebrand;
282
+ const inPlaceEdit$1 = {
283
+ "rebrand": "/**\n * @component in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n.pfx-in-place-edit {\n display: inline-block;\n min-inline-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n border: var(--instui-component-text-input-border-width) solid transparent;\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-color-text-base);\n font: inherit;\n cursor: text;\n}\n/* Hover affordance: it's editable. */\n.pfx-in-place-edit:hover {\n background: var(--instui-color-background-muted);\n}\n/* Focus = edit mode: input chrome + the focus ring. */\n.pfx-in-place-edit:focus {\n background: var(--instui-component-text-input-background-color);\n border-color: var(--instui-component-text-input-border-color);\n outline: none;\n}\n.pfx-in-place-edit:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n.pfx-in-place-edit.-readonly {\n cursor: default;\n}\n.pfx-in-place-edit.-readonly:hover {\n background: transparent;\n}\n",
284
+ "canvas": "/**\n * @component in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n.pfx-in-place-edit {\n display: inline-block;\n min-inline-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n border: var(--instui-component-text-input-border-width) solid transparent;\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-color-text-base);\n font: inherit;\n cursor: text;\n}\n/* Hover affordance: it's editable. */\n.pfx-in-place-edit:hover {\n background: var(--instui-color-background-muted);\n}\n/* Focus = edit mode: input chrome + the focus ring. */\n.pfx-in-place-edit:focus {\n background: var(--instui-component-text-input-background-color);\n border-color: var(--instui-component-text-input-border-color);\n outline: none;\n}\n.pfx-in-place-edit:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n.pfx-in-place-edit.-readonly {\n cursor: default;\n}\n.pfx-in-place-edit.-readonly:hover {\n background: transparent;\n}\n",
285
+ "canvasHighContrast": "/**\n * @component in-place-edit\n * @summary A [contenteditable] that reads as text until focused, then shows input chrome.\n * @modifier -readonly — Shown inline but not editable (no hover/focus affordance).\n * @a11y Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).\n * @example\n * <span class=\"pfx-in-place-edit\" contenteditable=\"true\" role=\"textbox\" aria-label=\"Project name\">Untitled</span>\n * @related text-input — On focus it shows the same input chrome as a text input.\n * @demo self:in-place-edit\n */\n.pfx-in-place-edit {\n display: inline-block;\n min-inline-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n border: var(--instui-component-text-input-border-width) solid transparent;\n border-radius: var(--instui-component-text-input-border-radius);\n color: var(--instui-color-text-base);\n font: inherit;\n cursor: text;\n}\n/* Hover affordance: it's editable. */\n.pfx-in-place-edit:hover {\n background: var(--instui-color-background-muted);\n}\n/* Focus = edit mode: input chrome + the focus ring. */\n.pfx-in-place-edit:focus {\n background: var(--instui-component-text-input-background-color);\n border-color: var(--instui-component-text-input-border-color);\n outline: none;\n}\n.pfx-in-place-edit:focus-visible {\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n outline-offset: var(--instui-focus-outline-offset);\n}\n.pfx-in-place-edit.-readonly {\n cursor: default;\n}\n.pfx-in-place-edit.-readonly:hover {\n background: transparent;\n}\n"
286
+ }.rebrand;
287
+ const link$1 = {
288
+ "rebrand": "/**\n * @component link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links.\n */\n.pfx-link {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-link-gap-md);\n color: var(--instui-component-link-text-color);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n font-weight: var(--instui-component-link-font-weight);\n line-height: var(--instui-component-link-line-height-md);\n text-decoration: var(--instui-component-link-text-decoration-outside-text);\n cursor: pointer;\n}\n.pfx-link:hover {\n color: var(--instui-component-link-text-hover-color);\n}\n.pfx-link[aria-disabled=\"true\"] {\n color: var(--instui-component-link-text-disabled-color);\n cursor: not-allowed;\n}\n.pfx-link.-size-sm {\n gap: var(--instui-component-link-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n line-height: var(--instui-component-link-line-height-sm);\n}\n.pfx-link.-size-lg {\n gap: var(--instui-component-link-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n line-height: var(--instui-component-link-line-height-lg);\n}\n.pfx-link.-color-inverse {\n color: var(--instui-component-link-on-color-text-color);\n}\n.pfx-link.-color-inverse:hover {\n color: var(--instui-component-link-on-color-text-hover-color);\n}\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n color: var(--instui-component-link-on-color-text-disabled-color);\n}\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n display: inline;\n font-family: var(--instui-component-link-inline-link-medium-font-family);\n font-size: var(--instui-component-link-inline-link-medium-font-size);\n font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n line-height: var(--instui-component-link-inline-link-medium-line-height);\n text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n.pfx-link.-inline.-sm {\n font-size: var(--instui-component-link-inline-link-small-font-size);\n font-weight: var(--instui-component-link-inline-link-small-font-weight);\n line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n.pfx-link.-inline.-lg {\n font-size: var(--instui-component-link-inline-link-large-font-size);\n font-weight: var(--instui-component-link-inline-link-large-font-weight);\n line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n.pfx-link.-unstyled {\n color: var(--instui-component-link-unstyled-text-color);\n text-decoration: none;\n}\n",
289
+ "canvas": "/**\n * @component link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links.\n */\n.pfx-link {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-link-gap-md);\n color: var(--instui-component-link-text-color);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n font-weight: var(--instui-component-link-font-weight);\n line-height: var(--instui-component-link-line-height-md);\n text-decoration: var(--instui-component-link-text-decoration-outside-text);\n cursor: pointer;\n}\n.pfx-link:hover {\n color: var(--instui-component-link-text-hover-color);\n}\n.pfx-link[aria-disabled=\"true\"] {\n color: var(--instui-component-link-text-disabled-color);\n cursor: not-allowed;\n}\n.pfx-link.-size-sm {\n gap: var(--instui-component-link-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n line-height: var(--instui-component-link-line-height-sm);\n}\n.pfx-link.-size-lg {\n gap: var(--instui-component-link-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n line-height: var(--instui-component-link-line-height-lg);\n}\n.pfx-link.-color-inverse {\n color: var(--instui-component-link-on-color-text-color);\n}\n.pfx-link.-color-inverse:hover {\n color: var(--instui-component-link-on-color-text-hover-color);\n}\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n color: var(--instui-component-link-on-color-text-disabled-color);\n}\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n display: inline;\n font-family: var(--instui-component-link-inline-link-medium-font-family);\n font-size: var(--instui-component-link-inline-link-medium-font-size);\n font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n line-height: var(--instui-component-link-inline-link-medium-line-height);\n text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n.pfx-link.-inline.-sm {\n font-size: var(--instui-component-link-inline-link-small-font-size);\n font-weight: var(--instui-component-link-inline-link-small-font-weight);\n line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n.pfx-link.-inline.-lg {\n font-size: var(--instui-component-link-inline-link-large-font-size);\n font-weight: var(--instui-component-link-inline-link-large-font-weight);\n line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n.pfx-link.-unstyled {\n color: var(--instui-component-link-unstyled-text-color);\n text-decoration: none;\n}\n",
290
+ "canvasHighContrast": "/**\n * @component link\n * @summary A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -inline — Inline link, underlined within flowing text.\n * @modifier -sm — Small inline link (used with `-inline`).\n * @modifier -lg — Large inline link (used with `-inline`).\n * @modifier -unstyled — Strip link styling: inherit colour, no underline.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @cssstate disabled\n * @a11y Mark a disabled link with `aria-disabled=\"true\"`.\n * @example\n * <a class=\"pfx-link\" href=\"#\">A styled link</a>\n * @related breadcrumb — A breadcrumb trail is built from links.\n */\n.pfx-link {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-link-gap-md);\n color: var(--instui-component-link-text-color);\n font-family: var(--instui-component-link-font-family);\n font-size: var(--instui-component-link-font-size-md);\n font-weight: var(--instui-component-link-font-weight);\n line-height: var(--instui-component-link-line-height-md);\n text-decoration: var(--instui-component-link-text-decoration-outside-text);\n cursor: pointer;\n}\n.pfx-link:hover {\n color: var(--instui-component-link-text-hover-color);\n}\n.pfx-link[aria-disabled=\"true\"] {\n color: var(--instui-component-link-text-disabled-color);\n cursor: not-allowed;\n}\n.pfx-link.-size-sm {\n gap: var(--instui-component-link-gap-sm);\n font-size: var(--instui-component-link-font-size-sm);\n line-height: var(--instui-component-link-line-height-sm);\n}\n.pfx-link.-size-lg {\n gap: var(--instui-component-link-gap-lg);\n font-size: var(--instui-component-link-font-size-lg);\n line-height: var(--instui-component-link-line-height-lg);\n}\n.pfx-link.-color-inverse {\n color: var(--instui-component-link-on-color-text-color);\n}\n.pfx-link.-color-inverse:hover {\n color: var(--instui-component-link-on-color-text-hover-color);\n}\n.pfx-link.-color-inverse[aria-disabled=\"true\"] {\n color: var(--instui-component-link-on-color-text-disabled-color);\n}\n/* An inline link, decorated within the flow of text. */\n.pfx-link.-inline {\n display: inline;\n font-family: var(--instui-component-link-inline-link-medium-font-family);\n font-size: var(--instui-component-link-inline-link-medium-font-size);\n font-weight: var(--instui-component-link-inline-link-medium-font-weight);\n line-height: var(--instui-component-link-inline-link-medium-line-height);\n text-decoration: var(--instui-component-link-text-decoration-within-text);\n}\n.pfx-link.-inline.-sm {\n font-size: var(--instui-component-link-inline-link-small-font-size);\n font-weight: var(--instui-component-link-inline-link-small-font-weight);\n line-height: var(--instui-component-link-inline-link-small-line-height);\n}\n.pfx-link.-inline.-lg {\n font-size: var(--instui-component-link-inline-link-large-font-size);\n font-weight: var(--instui-component-link-inline-link-large-font-weight);\n line-height: var(--instui-component-link-inline-link-large-line-height);\n}\n.pfx-link.-unstyled {\n color: var(--instui-component-link-unstyled-text-color);\n text-decoration: none;\n}\n"
291
+ }.rebrand;
292
+ const list$1 = {
293
+ "rebrand": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @modifier -ordered — Ordered-list numbering.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -delimiter-solid — Separate items with a solid rule.\n * @modifier -delimiter-dashed — Separate items with a dashed rule.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @example\n * <ul class=\"pfx-list\">\n * <li>First item</li>\n * <li>Second item</li>\n * <li>Third item</li>\n * </ul>\n * @structure\n * .pfx-list {\n * li {}\n * }\n */\n.pfx-list {\n color: var(--instui-component-list-item-color);\n font-family: var(--instui-component-list-item-font-family);\n font-size: var(--instui-component-list-item-font-size-medium);\n font-weight: var(--instui-component-list-item-font-weight);\n line-height: var(--instui-component-list-item-line-height);\n padding-inline-start: var(--instui-component-list-list-padding);\n}\n.pfx-list > li {\n margin: var(--instui-component-list-item-spacing-medium) 0;\n}\n.pfx-list.-size-sm {\n font-size: var(--instui-component-list-item-font-size-small);\n}\n.pfx-list.-size-sm > li {\n margin: var(--instui-component-list-item-spacing-small) 0;\n}\n.pfx-list.-size-lg {\n font-size: var(--instui-component-list-item-font-size-large);\n}\n.pfx-list.-size-lg > li {\n margin: var(--instui-component-list-item-spacing-large) 0;\n}\n.pfx-list.-ordered > li::marker {\n font-weight: var(--instui-component-list-ordered-number-font-weight);\n}\n.pfx-list.-ordered > li {\n padding-inline-start: var(--instui-component-list-ordered-number-margin);\n}\n.pfx-list.-delimiter-solid > li + li {\n border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n var(--instui-component-list-item-delimiter-solid-border-style)\n var(--instui-component-list-item-delimiter-solid-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n}\n.pfx-list.-delimiter-dashed > li + li {\n border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n var(--instui-component-list-item-delimiter-dashed-border-style)\n var(--instui-component-list-item-delimiter-dashed-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n}\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n list-style: none;\n padding-inline-start: 0;\n}\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--instui-component-list-item-spacing-medium);\n list-style: none;\n padding-inline-start: 0;\n}\n.pfx-list.-inline > li {\n margin: 0;\n}\n",
294
+ "canvas": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @modifier -ordered — Ordered-list numbering.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -delimiter-solid — Separate items with a solid rule.\n * @modifier -delimiter-dashed — Separate items with a dashed rule.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @example\n * <ul class=\"pfx-list\">\n * <li>First item</li>\n * <li>Second item</li>\n * <li>Third item</li>\n * </ul>\n * @structure\n * .pfx-list {\n * li {}\n * }\n */\n.pfx-list {\n color: var(--instui-component-list-item-color);\n font-family: var(--instui-component-list-item-font-family);\n font-size: var(--instui-component-list-item-font-size-medium);\n font-weight: var(--instui-component-list-item-font-weight);\n line-height: var(--instui-component-list-item-line-height);\n padding-inline-start: var(--instui-component-list-list-padding);\n}\n.pfx-list > li {\n margin: var(--instui-component-list-item-spacing-medium) 0;\n}\n.pfx-list.-size-sm {\n font-size: var(--instui-component-list-item-font-size-small);\n}\n.pfx-list.-size-sm > li {\n margin: var(--instui-component-list-item-spacing-small) 0;\n}\n.pfx-list.-size-lg {\n font-size: var(--instui-component-list-item-font-size-large);\n}\n.pfx-list.-size-lg > li {\n margin: var(--instui-component-list-item-spacing-large) 0;\n}\n.pfx-list.-ordered > li::marker {\n font-weight: var(--instui-component-list-ordered-number-font-weight);\n}\n.pfx-list.-ordered > li {\n padding-inline-start: var(--instui-component-list-ordered-number-margin);\n}\n.pfx-list.-delimiter-solid > li + li {\n border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n var(--instui-component-list-item-delimiter-solid-border-style)\n var(--instui-component-list-item-delimiter-solid-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n}\n.pfx-list.-delimiter-dashed > li + li {\n border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n var(--instui-component-list-item-delimiter-dashed-border-style)\n var(--instui-component-list-item-delimiter-dashed-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n}\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n list-style: none;\n padding-inline-start: 0;\n}\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--instui-component-list-item-spacing-medium);\n list-style: none;\n padding-inline-start: 0;\n}\n.pfx-list.-inline > li {\n margin: 0;\n}\n",
295
+ "canvasHighContrast": "/**\n * @component list\n * @summary A list with token-driven item spacing.\n * @modifier -ordered — Ordered-list numbering.\n * @modifier -inline — Lay items out inline (horizontal).\n * @modifier -unstyled — Remove markers and padding.\n * @modifier -delimiter-solid — Separate items with a solid rule.\n * @modifier -delimiter-dashed — Separate items with a dashed rule.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::marker — Renders the list bullet or ordered-list number.\n * @example\n * <ul class=\"pfx-list\">\n * <li>First item</li>\n * <li>Second item</li>\n * <li>Third item</li>\n * </ul>\n * @structure\n * .pfx-list {\n * li {}\n * }\n */\n.pfx-list {\n color: var(--instui-component-list-item-color);\n font-family: var(--instui-component-list-item-font-family);\n font-size: var(--instui-component-list-item-font-size-medium);\n font-weight: var(--instui-component-list-item-font-weight);\n line-height: var(--instui-component-list-item-line-height);\n padding-inline-start: var(--instui-component-list-list-padding);\n}\n.pfx-list > li {\n margin: var(--instui-component-list-item-spacing-medium) 0;\n}\n.pfx-list.-size-sm {\n font-size: var(--instui-component-list-item-font-size-small);\n}\n.pfx-list.-size-sm > li {\n margin: var(--instui-component-list-item-spacing-small) 0;\n}\n.pfx-list.-size-lg {\n font-size: var(--instui-component-list-item-font-size-large);\n}\n.pfx-list.-size-lg > li {\n margin: var(--instui-component-list-item-spacing-large) 0;\n}\n.pfx-list.-ordered > li::marker {\n font-weight: var(--instui-component-list-ordered-number-font-weight);\n}\n.pfx-list.-ordered > li {\n padding-inline-start: var(--instui-component-list-ordered-number-margin);\n}\n.pfx-list.-delimiter-solid > li + li {\n border-top: var(--instui-component-list-item-delimiter-solid-border-width)\n var(--instui-component-list-item-delimiter-solid-border-style)\n var(--instui-component-list-item-delimiter-solid-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n}\n.pfx-list.-delimiter-dashed > li + li {\n border-top: var(--instui-component-list-item-delimiter-dashed-border-width)\n var(--instui-component-list-item-delimiter-dashed-border-style)\n var(--instui-component-list-item-delimiter-dashed-border-color);\n padding-top: var(--instui-component-list-item-spacing-medium);\n}\n/* isUnstyled: strip markers and indentation. */\n.pfx-list.-unstyled {\n list-style: none;\n padding-inline-start: 0;\n}\n/* InlineList: lay items out in a wrapping row (`.pfx-list.-inline`). */\n.pfx-list.-inline {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--instui-component-list-item-spacing-medium);\n list-style: none;\n padding-inline-start: 0;\n}\n.pfx-list.-inline > li {\n margin: 0;\n}\n"
296
+ }.rebrand;
297
+ const menu$1 = {
298
+ "rebrand": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example\n * <div class=\"pfx-menu\">\n * <div class=\"group\">Actions</div>\n * <div class=\"item\">Edit</div>\n * <div class=\"item -active\">Duplicate</div>\n * <div class=\"separator\"></div>\n * <div class=\"item\">Delete</div>\n * </div>\n * @structure\n * .pfx-menu {\n * .group {}\n * .item {}\n * .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n * @demo self:menu\n */\n.pfx-menu {\n min-width: var(--instui-component-menu-min-width);\n max-width: var(--instui-component-menu-max-width);\n background: var(--instui-component-menu-item-background);\n border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-spacing-space-xs) 0;\n}\n@scope (.pfx-menu) {\n :scope > .item {\n display: block;\n padding: var(--instui-component-menu-item-padding-vertical)\n var(--instui-component-menu-item-padding-horizontal);\n color: var(--instui-component-menu-item-label-color);\n font-family: var(--instui-component-menu-item-font-family);\n font-size: var(--instui-component-menu-item-font-size);\n font-weight: var(--instui-component-menu-item-font-weight);\n line-height: var(--instui-component-menu-item-line-height);\n cursor: pointer;\n }\n /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n :scope > .item.-disabled {\n opacity: var(--instui-opacity-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n :scope > .item:hover,\n :scope > .item.-highlighted {\n background: var(--instui-component-menu-item-highlighted-background);\n color: var(--instui-component-menu-item-highlighted-label-color);\n }\n :scope > .item.-active,\n :scope > .item[aria-checked=\"true\"] {\n background: var(--instui-component-menu-item-active-background);\n color: var(--instui-component-menu-item-active-label-color);\n }\n :scope > .item.-active:hover,\n :scope > .item[aria-checked=\"true\"]:hover {\n background: var(--instui-component-menu-item-selected-highlighted-background);\n }\n /* Secondary line inside an item (a description or shortcut). */\n .item-info {\n color: var(--instui-component-menu-item-label-info-color);\n }\n :scope > .item:hover .item-info,\n :scope > .item.-highlighted .item-info {\n color: var(--instui-component-menu-item-highlighted-label-info-color);\n }\n /* A labelled group of items. */\n :scope > .group {\n padding: var(--instui-component-menu-group-padding-vertical)\n var(--instui-component-menu-group-padding-horizontal);\n background: var(--instui-component-menu-group-background);\n color: var(--instui-component-menu-group-color);\n font-family: var(--instui-component-menu-group-font-family);\n font-size: var(--instui-component-menu-group-font-size);\n font-weight: var(--instui-component-menu-group-font-weight);\n }\n :scope > .separator {\n height: var(--instui-component-menu-separator-height);\n background: var(--instui-component-menu-separator-background);\n margin: var(--instui-component-menu-separator-margin-vertical)\n var(--instui-component-menu-separator-margin-horizontal);\n }\n}\n",
299
+ "canvas": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example\n * <div class=\"pfx-menu\">\n * <div class=\"group\">Actions</div>\n * <div class=\"item\">Edit</div>\n * <div class=\"item -active\">Duplicate</div>\n * <div class=\"separator\"></div>\n * <div class=\"item\">Delete</div>\n * </div>\n * @structure\n * .pfx-menu {\n * .group {}\n * .item {}\n * .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n * @demo self:menu\n */\n.pfx-menu {\n min-width: var(--instui-component-menu-min-width);\n max-width: var(--instui-component-menu-max-width);\n background: var(--instui-component-menu-item-background);\n border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-spacing-space-xs) 0;\n}\n@scope (.pfx-menu) {\n :scope > .item {\n display: block;\n padding: var(--instui-component-menu-item-padding-vertical)\n var(--instui-component-menu-item-padding-horizontal);\n color: var(--instui-component-menu-item-label-color);\n font-family: var(--instui-component-menu-item-font-family);\n font-size: var(--instui-component-menu-item-font-size);\n font-weight: var(--instui-component-menu-item-font-weight);\n line-height: var(--instui-component-menu-item-line-height);\n cursor: pointer;\n }\n /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n :scope > .item.-disabled {\n opacity: var(--instui-opacity-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n :scope > .item:hover,\n :scope > .item.-highlighted {\n background: var(--instui-component-menu-item-highlighted-background);\n color: var(--instui-component-menu-item-highlighted-label-color);\n }\n :scope > .item.-active,\n :scope > .item[aria-checked=\"true\"] {\n background: var(--instui-component-menu-item-active-background);\n color: var(--instui-component-menu-item-active-label-color);\n }\n :scope > .item.-active:hover,\n :scope > .item[aria-checked=\"true\"]:hover {\n background: var(--instui-component-menu-item-selected-highlighted-background);\n }\n /* Secondary line inside an item (a description or shortcut). */\n .item-info {\n color: var(--instui-component-menu-item-label-info-color);\n }\n :scope > .item:hover .item-info,\n :scope > .item.-highlighted .item-info {\n color: var(--instui-component-menu-item-highlighted-label-info-color);\n }\n /* A labelled group of items. */\n :scope > .group {\n padding: var(--instui-component-menu-group-padding-vertical)\n var(--instui-component-menu-group-padding-horizontal);\n background: var(--instui-component-menu-group-background);\n color: var(--instui-component-menu-group-color);\n font-family: var(--instui-component-menu-group-font-family);\n font-size: var(--instui-component-menu-group-font-size);\n font-weight: var(--instui-component-menu-group-font-weight);\n }\n :scope > .separator {\n height: var(--instui-component-menu-separator-height);\n background: var(--instui-component-menu-separator-background);\n margin: var(--instui-component-menu-separator-margin-vertical)\n var(--instui-component-menu-separator-margin-horizontal);\n }\n}\n",
300
+ "canvasHighContrast": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example\n * <div class=\"pfx-menu\">\n * <div class=\"group\">Actions</div>\n * <div class=\"item\">Edit</div>\n * <div class=\"item -active\">Duplicate</div>\n * <div class=\"separator\"></div>\n * <div class=\"item\">Delete</div>\n * </div>\n * @structure\n * .pfx-menu {\n * .group {}\n * .item {}\n * .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n * @demo self:menu\n */\n.pfx-menu {\n min-width: var(--instui-component-menu-min-width);\n max-width: var(--instui-component-menu-max-width);\n background: var(--instui-component-menu-item-background);\n border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-spacing-space-xs) 0;\n}\n@scope (.pfx-menu) {\n :scope > .item {\n display: block;\n padding: var(--instui-component-menu-item-padding-vertical)\n var(--instui-component-menu-item-padding-horizontal);\n color: var(--instui-component-menu-item-label-color);\n font-family: var(--instui-component-menu-item-font-family);\n font-size: var(--instui-component-menu-item-font-size);\n font-weight: var(--instui-component-menu-item-font-weight);\n line-height: var(--instui-component-menu-item-line-height);\n cursor: pointer;\n }\n /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n :scope > .item.-disabled {\n opacity: var(--instui-opacity-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n :scope > .item:hover,\n :scope > .item.-highlighted {\n background: var(--instui-component-menu-item-highlighted-background);\n color: var(--instui-component-menu-item-highlighted-label-color);\n }\n :scope > .item.-active,\n :scope > .item[aria-checked=\"true\"] {\n background: var(--instui-component-menu-item-active-background);\n color: var(--instui-component-menu-item-active-label-color);\n }\n :scope > .item.-active:hover,\n :scope > .item[aria-checked=\"true\"]:hover {\n background: var(--instui-component-menu-item-selected-highlighted-background);\n }\n /* Secondary line inside an item (a description or shortcut). */\n .item-info {\n color: var(--instui-component-menu-item-label-info-color);\n }\n :scope > .item:hover .item-info,\n :scope > .item.-highlighted .item-info {\n color: var(--instui-component-menu-item-highlighted-label-info-color);\n }\n /* A labelled group of items. */\n :scope > .group {\n padding: var(--instui-component-menu-group-padding-vertical)\n var(--instui-component-menu-group-padding-horizontal);\n background: var(--instui-component-menu-group-background);\n color: var(--instui-component-menu-group-color);\n font-family: var(--instui-component-menu-group-font-family);\n font-size: var(--instui-component-menu-group-font-size);\n font-weight: var(--instui-component-menu-group-font-weight);\n }\n :scope > .separator {\n height: var(--instui-component-menu-separator-height);\n background: var(--instui-component-menu-separator-background);\n margin: var(--instui-component-menu-separator-margin-vertical)\n var(--instui-component-menu-separator-margin-horizontal);\n }\n}\n"
301
+ }.rebrand;
302
+ const metric$1 = {
303
+ "rebrand": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n * <span class=\"value\">1,284</span>\n * <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n * .value {}\n * .label {}\n * }\n */\n.pfx-metric {\n display: inline-flex;\n flex-direction: column;\n gap: var(--instui-component-metric-gap-texts);\n padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n@scope (.pfx-metric) {\n :scope > .value {\n color: var(--instui-component-metric-value-color);\n font-family: var(--instui-component-metric-value-font-family);\n font-size: var(--instui-component-metric-value-font-size);\n font-weight: var(--instui-component-metric-value-font-weight);\n line-height: var(--instui-component-metric-value-line-height);\n }\n :scope > .label {\n color: var(--instui-component-metric-label-color);\n font-family: var(--instui-component-metric-label-font-family);\n font-size: var(--instui-component-metric-label-font-size);\n font-weight: var(--instui-component-metric-label-font-weight);\n line-height: var(--instui-component-metric-label-line-height);\n }\n}\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n align-items: flex-start;\n text-align: start;\n}\n.pfx-metric.-text-align-center {\n align-items: center;\n text-align: center;\n}\n.pfx-metric.-text-align-end {\n align-items: flex-end;\n text-align: end;\n}\n",
304
+ "canvas": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n * <span class=\"value\">1,284</span>\n * <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n * .value {}\n * .label {}\n * }\n */\n.pfx-metric {\n display: inline-flex;\n flex-direction: column;\n gap: var(--instui-component-metric-gap-texts);\n padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n@scope (.pfx-metric) {\n :scope > .value {\n color: var(--instui-component-metric-value-color);\n font-family: var(--instui-component-metric-value-font-family);\n font-size: var(--instui-component-metric-value-font-size);\n font-weight: var(--instui-component-metric-value-font-weight);\n line-height: var(--instui-component-metric-value-line-height);\n }\n :scope > .label {\n color: var(--instui-component-metric-label-color);\n font-family: var(--instui-component-metric-label-font-family);\n font-size: var(--instui-component-metric-label-font-size);\n font-weight: var(--instui-component-metric-label-font-weight);\n line-height: var(--instui-component-metric-label-line-height);\n }\n}\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n align-items: flex-start;\n text-align: start;\n}\n.pfx-metric.-text-align-center {\n align-items: center;\n text-align: center;\n}\n.pfx-metric.-text-align-end {\n align-items: flex-end;\n text-align: end;\n}\n",
305
+ "canvasHighContrast": "/**\n * @component metric\n * @summary A labelled statistic — a large value over a caption.\n * @modifier -text-align-start — Start-align the value and label.\n * @modifier -text-align-center — Centre the value and label.\n * @modifier -text-align-end — End-align the value and label.\n * @part .value — The large metric number.\n * @part .label — The caption beneath the value.\n * @example\n * <div class=\"pfx-metric\">\n * <span class=\"value\">1,284</span>\n * <span class=\"label\">Active users</span>\n * </div>\n * @structure\n * .pfx-metric {\n * .value {}\n * .label {}\n * }\n */\n.pfx-metric {\n display: inline-flex;\n flex-direction: column;\n gap: var(--instui-component-metric-gap-texts);\n padding: 0 var(--instui-component-metric-padding-horizontal);\n}\n@scope (.pfx-metric) {\n :scope > .value {\n color: var(--instui-component-metric-value-color);\n font-family: var(--instui-component-metric-value-font-family);\n font-size: var(--instui-component-metric-value-font-size);\n font-weight: var(--instui-component-metric-value-font-weight);\n line-height: var(--instui-component-metric-value-line-height);\n }\n :scope > .label {\n color: var(--instui-component-metric-label-color);\n font-family: var(--instui-component-metric-label-font-family);\n font-size: var(--instui-component-metric-label-font-size);\n font-weight: var(--instui-component-metric-label-font-weight);\n line-height: var(--instui-component-metric-label-line-height);\n }\n}\n/* textAlign: the value/label are flex items in a column, so cross-axis alignment (align-items) is what\n actually positions them — text-align alone is a no-op on the shrink-wrapped box. Set both so it also\n covers wrapped multi-line text. */\n.pfx-metric.-text-align-start {\n align-items: flex-start;\n text-align: start;\n}\n.pfx-metric.-text-align-center {\n align-items: center;\n text-align: center;\n}\n.pfx-metric.-text-align-end {\n align-items: flex-end;\n text-align: end;\n}\n"
306
+ }.rebrand;
307
+ const modal$1 = {
308
+ "rebrand": "/**\n * @component modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body).\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body.\n * @part .header — The title row.\n * @part .body — The content region (a lone <img> goes full-bleed).\n * @part .footer — The actions row.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n * <div class=\"header\"><strong>Small</strong></div>\n * <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n * <div class=\"footer\">\n * <button class=\"pfx-button\">Close</button>\n * </div>\n * </dialog>\n * @structure\n * .pfx-modal.-size-sm {\n * .header {\n * strong {}\n * }\n * .body {\n * code {}\n * }\n * .footer {\n * .pfx-button {}\n * }\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n.pfx-modal {\n max-width: var(--instui-component-modal-medium-max-width);\n background: var(--instui-component-modal-background-color);\n color: var(--instui-component-modal-text-color);\n border: var(--instui-component-modal-border-width) solid\n var(--instui-component-modal-border-color);\n border-radius: var(--instui-component-modal-border-radius);\n font-family: var(--instui-component-modal-font-family);\n overflow: hidden;\n /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n box-shadow: var(--instui-elevation-topmost);\n}\n/* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\ndialog.pfx-modal {\n margin: auto;\n padding: 0;\n}\ndialog.pfx-modal::backdrop {\n background: var(--instui-component-mask-background-color);\n}\ndialog.pfx-modal.-blur::backdrop {\n backdrop-filter: blur(0.5rem);\n}\n.pfx-modal.-size-sm {\n max-width: var(--instui-component-modal-small-max-width);\n}\n.pfx-modal.-size-lg {\n max-width: var(--instui-component-modal-large-max-width);\n}\n.pfx-modal.-size-auto {\n max-width: none;\n min-width: var(--instui-component-modal-auto-min-width);\n}\n/* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n at the viewport edge. */\n.pfx-modal.-size-fullscreen {\n position: fixed;\n inset: 0;\n width: auto;\n height: auto;\n max-width: none;\n max-height: none;\n margin: 0;\n border-radius: 0;\n}\n/* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n.pfx-modal.-overflow-fit {\n display: flex;\n flex-direction: column;\n max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n}\n.pfx-modal.-color-inverse {\n background: var(--instui-component-modal-inverse-background-color);\n color: var(--instui-component-modal-inverse-text-color);\n border-color: var(--instui-component-modal-inverse-border-color);\n}\n@scope (.pfx-modal) {\n :scope.-overflow-fit > .body {\n overflow-y: auto;\n }\n :scope > .header {\n padding: var(--instui-component-modal-header-padding);\n background: var(--instui-component-modal-header-background-color);\n border-bottom: var(--instui-component-modal-header-border-width) solid\n var(--instui-component-modal-header-border-color);\n }\n :scope > .body {\n padding: var(--instui-component-modal-body-padding);\n }\n /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n :scope > .body:has(> img) {\n padding: 0;\n }\n :scope > .body:has(> img) img {\n display: block;\n width: 100%;\n }\n :scope > .footer {\n padding: var(--instui-component-modal-footer-padding);\n background: var(--instui-component-modal-footer-background-color);\n border-top: var(--instui-component-modal-footer-border-width) solid\n var(--instui-component-modal-footer-border-color);\n border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n var(--instui-component-modal-footer-border-radius);\n }\n :scope.-density-compact > .header {\n padding: var(--instui-component-modal-header-padding-compact);\n }\n :scope.-density-compact > .body {\n padding: var(--instui-component-modal-body-padding-compact);\n }\n :scope.-density-compact > .footer {\n padding: var(--instui-component-modal-footer-padding-compact);\n }\n :scope.-color-inverse > .header {\n background: var(--instui-component-modal-header-inverse-background-color);\n border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n }\n :scope.-color-inverse > .body {\n background: var(--instui-component-modal-body-inverse-background-color);\n }\n :scope.-color-inverse > .footer {\n background: var(--instui-component-modal-footer-inverse-background-color);\n border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n }\n}\n",
309
+ "canvas": "/**\n * @component modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body).\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body.\n * @part .header — The title row.\n * @part .body — The content region (a lone <img> goes full-bleed).\n * @part .footer — The actions row.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n * <div class=\"header\"><strong>Small</strong></div>\n * <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n * <div class=\"footer\">\n * <button class=\"pfx-button\">Close</button>\n * </div>\n * </dialog>\n * @structure\n * .pfx-modal.-size-sm {\n * .header {\n * strong {}\n * }\n * .body {\n * code {}\n * }\n * .footer {\n * .pfx-button {}\n * }\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n.pfx-modal {\n max-width: var(--instui-component-modal-medium-max-width);\n background: var(--instui-component-modal-background-color);\n color: var(--instui-component-modal-text-color);\n border: var(--instui-component-modal-border-width) solid\n var(--instui-component-modal-border-color);\n border-radius: var(--instui-component-modal-border-radius);\n font-family: var(--instui-component-modal-font-family);\n overflow: hidden;\n /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n box-shadow: var(--instui-elevation-topmost);\n}\n/* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\ndialog.pfx-modal {\n margin: auto;\n padding: 0;\n}\ndialog.pfx-modal::backdrop {\n background: var(--instui-component-mask-background-color);\n}\ndialog.pfx-modal.-blur::backdrop {\n backdrop-filter: blur(0.5rem);\n}\n.pfx-modal.-size-sm {\n max-width: var(--instui-component-modal-small-max-width);\n}\n.pfx-modal.-size-lg {\n max-width: var(--instui-component-modal-large-max-width);\n}\n.pfx-modal.-size-auto {\n max-width: none;\n min-width: var(--instui-component-modal-auto-min-width);\n}\n/* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n at the viewport edge. */\n.pfx-modal.-size-fullscreen {\n position: fixed;\n inset: 0;\n width: auto;\n height: auto;\n max-width: none;\n max-height: none;\n margin: 0;\n border-radius: 0;\n}\n/* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n.pfx-modal.-overflow-fit {\n display: flex;\n flex-direction: column;\n max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n}\n.pfx-modal.-color-inverse {\n background: var(--instui-component-modal-inverse-background-color);\n color: var(--instui-component-modal-inverse-text-color);\n border-color: var(--instui-component-modal-inverse-border-color);\n}\n@scope (.pfx-modal) {\n :scope.-overflow-fit > .body {\n overflow-y: auto;\n }\n :scope > .header {\n padding: var(--instui-component-modal-header-padding);\n background: var(--instui-component-modal-header-background-color);\n border-bottom: var(--instui-component-modal-header-border-width) solid\n var(--instui-component-modal-header-border-color);\n }\n :scope > .body {\n padding: var(--instui-component-modal-body-padding);\n }\n /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n :scope > .body:has(> img) {\n padding: 0;\n }\n :scope > .body:has(> img) img {\n display: block;\n width: 100%;\n }\n :scope > .footer {\n padding: var(--instui-component-modal-footer-padding);\n background: var(--instui-component-modal-footer-background-color);\n border-top: var(--instui-component-modal-footer-border-width) solid\n var(--instui-component-modal-footer-border-color);\n border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n var(--instui-component-modal-footer-border-radius);\n }\n :scope.-density-compact > .header {\n padding: var(--instui-component-modal-header-padding-compact);\n }\n :scope.-density-compact > .body {\n padding: var(--instui-component-modal-body-padding-compact);\n }\n :scope.-density-compact > .footer {\n padding: var(--instui-component-modal-footer-padding-compact);\n }\n :scope.-color-inverse > .header {\n background: var(--instui-component-modal-header-inverse-background-color);\n border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n }\n :scope.-color-inverse > .body {\n background: var(--instui-component-modal-body-inverse-background-color);\n }\n :scope.-color-inverse > .footer {\n background: var(--instui-component-modal-footer-inverse-background-color);\n border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n }\n}\n",
310
+ "canvasHighContrast": "/**\n * @component modal\n * @summary A dialog surface (works on a native <dialog>); header/body/footer parts.\n * @remarks On a native <dialog>, `showModal()` puts the modal in the top layer and its `::backdrop` becomes the mask, so no z-index is needed. An `<img>` alone in `.body` goes full-bleed.\n * @modifier -size-sm — A narrow modal.\n * @modifier -size-lg — A wide modal.\n * @modifier -size-auto — Sized to content.\n * @modifier -size-fullscreen — Edge-to-edge.\n * @modifier -density-compact — Tighter part padding.\n * @modifier -color-inverse — On-dark chrome (pairs with a media body).\n * @modifier -blur — Blur the backdrop behind the modal.\n * @modifier -overflow-fit — Constrain to the viewport and scroll the body.\n * @part .header — The title row.\n * @part .body — The content region (a lone <img> goes full-bleed).\n * @part .footer — The actions row.\n * @pseudo ::backdrop — Dims the page behind the dialog as its mask, and frosts it under `-blur`.\n * @accessibility Open the native `<dialog>` with `showModal()` for modal semantics and Esc-to-close, and name it with `aria-labelledby` pointing at the `.header`.\n * @compat Styles a native <dialog> and its `::backdrop`; the top-layer rendering and backdrop styling need a browser that supports the dialog element.\n * @example\n * <dialog class=\"pfx-modal -size-sm\" id=\"modal-sm\">\n * <div class=\"header\"><strong>Small</strong></div>\n * <div class=\"body\"><code>-size-sm</code> — a narrow modal.</div>\n * <div class=\"footer\">\n * <button class=\"pfx-button\">Close</button>\n * </div>\n * </dialog>\n * @structure\n * .pfx-modal.-size-sm {\n * .header {\n * strong {}\n * }\n * .body {\n * code {}\n * }\n * .footer {\n * .pfx-button {}\n * }\n * }\n * @related tray — A tray is the same dismissible overlay pattern, anchored to a screen edge.\n * @demo self:modal\n */\n.pfx-modal {\n max-width: var(--instui-component-modal-medium-max-width);\n background: var(--instui-component-modal-background-color);\n color: var(--instui-component-modal-text-color);\n border: var(--instui-component-modal-border-width) solid\n var(--instui-component-modal-border-color);\n border-radius: var(--instui-component-modal-border-radius);\n font-family: var(--instui-component-modal-font-family);\n overflow: hidden;\n /* Modals float above the page; the elevation tokens are defined at the top of components.css. */\n box-shadow: var(--instui-elevation-topmost);\n}\n/* On a native <dialog>, drop the UA padding and centre it; `showModal()` puts it in the top layer, so\n no z-index is needed. The dialog's ::backdrop IS the modal's mask — dim it with the Mask token; the\n optional -blur modifier frosts it (mirrors .pfx-mask.-blur). */\ndialog.pfx-modal {\n margin: auto;\n padding: 0;\n}\ndialog.pfx-modal::backdrop {\n background: var(--instui-component-mask-background-color);\n}\ndialog.pfx-modal.-blur::backdrop {\n backdrop-filter: blur(0.5rem);\n}\n.pfx-modal.-size-sm {\n max-width: var(--instui-component-modal-small-max-width);\n}\n.pfx-modal.-size-lg {\n max-width: var(--instui-component-modal-large-max-width);\n}\n.pfx-modal.-size-auto {\n max-width: none;\n min-width: var(--instui-component-modal-auto-min-width);\n}\n/* Fullscreen is truly edge-to-edge (InstUI has no inset). It pins itself fixed and stretches via\n inset:0 + auto sizing, overriding both a <dialog>'s UA `width: fit-content`/`margin: auto` and its\n `:modal` max-width cap, so it works on a native dialog or a plain positioned div. No rounded corners\n at the viewport edge. */\n.pfx-modal.-size-fullscreen {\n position: fixed;\n inset: 0;\n width: auto;\n height: auto;\n max-width: none;\n max-height: none;\n margin: 0;\n border-radius: 0;\n}\n/* overflow=\"fit\" (InstUI): cap the modal to the viewport and scroll the body, so the header/footer\n stay pinned. The default (overflow=\"scroll\") lets the whole modal grow and the overlay scroll. */\n.pfx-modal.-overflow-fit {\n display: flex;\n flex-direction: column;\n max-block-size: calc(100dvh - var(--instui-spacing-space-xl) * 2);\n}\n.pfx-modal.-color-inverse {\n background: var(--instui-component-modal-inverse-background-color);\n color: var(--instui-component-modal-inverse-text-color);\n border-color: var(--instui-component-modal-inverse-border-color);\n}\n@scope (.pfx-modal) {\n :scope.-overflow-fit > .body {\n overflow-y: auto;\n }\n :scope > .header {\n padding: var(--instui-component-modal-header-padding);\n background: var(--instui-component-modal-header-background-color);\n border-bottom: var(--instui-component-modal-header-border-width) solid\n var(--instui-component-modal-header-border-color);\n }\n :scope > .body {\n padding: var(--instui-component-modal-body-padding);\n }\n /* A media modal: when the body holds an image it goes full-bleed (no padding) so the media meets the\n modal edges. Pair with -color-inverse for the on-dark chrome InstUI uses around media. */\n :scope > .body:has(> img) {\n padding: 0;\n }\n :scope > .body:has(> img) img {\n display: block;\n width: 100%;\n }\n :scope > .footer {\n padding: var(--instui-component-modal-footer-padding);\n background: var(--instui-component-modal-footer-background-color);\n border-top: var(--instui-component-modal-footer-border-width) solid\n var(--instui-component-modal-footer-border-color);\n border-radius: 0 0 var(--instui-component-modal-footer-border-radius)\n var(--instui-component-modal-footer-border-radius);\n }\n :scope.-density-compact > .header {\n padding: var(--instui-component-modal-header-padding-compact);\n }\n :scope.-density-compact > .body {\n padding: var(--instui-component-modal-body-padding-compact);\n }\n :scope.-density-compact > .footer {\n padding: var(--instui-component-modal-footer-padding-compact);\n }\n :scope.-color-inverse > .header {\n background: var(--instui-component-modal-header-inverse-background-color);\n border-bottom-color: var(--instui-component-modal-header-inverse-border-color);\n }\n :scope.-color-inverse > .body {\n background: var(--instui-component-modal-body-inverse-background-color);\n }\n :scope.-color-inverse > .footer {\n background: var(--instui-component-modal-footer-inverse-background-color);\n border-top-color: var(--instui-component-modal-footer-inverse-border-color);\n }\n}\n"
311
+ }.rebrand;
312
+ const pagination$1 = {
313
+ "rebrand": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @part .page — A page link or button; the current page carries `[aria-current]`.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate current\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n * <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n * <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n * <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n * <a class=\"page\" href=\"#\">2</a>\n * <a class=\"page\" href=\"#\">3</a>\n * <span class=\"ellipsis\">…</span>\n * <a class=\"page\" href=\"#\">12</a>\n * <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n * <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n * .arrow {\n * [class*=\"-icon-\"]:optional {}\n * }\n * .page {}\n * .ellipsis {}\n * }\n */\n.pfx-pagination {\n display: inline-flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-pagination-page-indicator-gap);\n font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n /* A page number or a nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n :scope > .page,\n :scope > .arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n min-block-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n color: var(--instui-color-text-interactive-navigation-primary-base);\n background: transparent;\n border: var(--instui-border-width-md) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n font: inherit;\n font-weight: var(--instui-font-weight-interactive);\n text-decoration: none;\n cursor: pointer;\n }\n\n :scope > .arrow [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .page:hover,\n :scope > .arrow:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n :scope > .page[aria-current],\n :scope > .page.-current {\n background: var(--instui-color-background-interactive-action-primary-base);\n color: var(--instui-color-text-interactive-action-primary-base);\n border-color: var(--instui-color-background-interactive-action-primary-base);\n }\n\n :scope > .page[aria-current]:hover,\n :scope > .page.-current:hover {\n background: var(--instui-color-background-interactive-action-primary-hover);\n border-color: var(--instui-color-background-interactive-action-primary-hover);\n color: var(--instui-color-text-interactive-action-primary-base);\n }\n\n /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n :scope > .arrow:disabled,\n :scope > .arrow[aria-disabled=\"true\"] {\n color: var(--instui-color-text-muted);\n background: transparent;\n opacity: var(--instui-opacity-disabled);\n cursor: not-allowed;\n }\n\n /* The truncation ellipsis — inert text. */\n :scope > .ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n color: var(--instui-color-text-muted);\n }\n\n /* variant=\"input\" label (\"Page … of N\"). */\n :scope > .page-input-label {\n color: var(--instui-component-pagination-page-input-label-color);\n }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n",
314
+ "canvas": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @part .page — A page link or button; the current page carries `[aria-current]`.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate current\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n * <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n * <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n * <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n * <a class=\"page\" href=\"#\">2</a>\n * <a class=\"page\" href=\"#\">3</a>\n * <span class=\"ellipsis\">…</span>\n * <a class=\"page\" href=\"#\">12</a>\n * <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n * <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n * .arrow {\n * [class*=\"-icon-\"]:optional {}\n * }\n * .page {}\n * .ellipsis {}\n * }\n */\n.pfx-pagination {\n display: inline-flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-pagination-page-indicator-gap);\n font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n /* A page number or a nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n :scope > .page,\n :scope > .arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n min-block-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n color: var(--instui-color-text-interactive-navigation-primary-base);\n background: transparent;\n border: var(--instui-border-width-md) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n font: inherit;\n font-weight: var(--instui-font-weight-interactive);\n text-decoration: none;\n cursor: pointer;\n }\n\n :scope > .arrow [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .page:hover,\n :scope > .arrow:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n :scope > .page[aria-current],\n :scope > .page.-current {\n background: var(--instui-color-background-interactive-action-primary-base);\n color: var(--instui-color-text-interactive-action-primary-base);\n border-color: var(--instui-color-background-interactive-action-primary-base);\n }\n\n :scope > .page[aria-current]:hover,\n :scope > .page.-current:hover {\n background: var(--instui-color-background-interactive-action-primary-hover);\n border-color: var(--instui-color-background-interactive-action-primary-hover);\n color: var(--instui-color-text-interactive-action-primary-base);\n }\n\n /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n :scope > .arrow:disabled,\n :scope > .arrow[aria-disabled=\"true\"] {\n color: var(--instui-color-text-muted);\n background: transparent;\n opacity: var(--instui-opacity-disabled);\n cursor: not-allowed;\n }\n\n /* The truncation ellipsis — inert text. */\n :scope > .ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n color: var(--instui-color-text-muted);\n }\n\n /* variant=\"input\" label (\"Page … of N\"). */\n :scope > .page-input-label {\n color: var(--instui-component-pagination-page-input-label-color);\n }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n",
315
+ "canvasHighContrast": "/**\n * @component pagination\n * @summary Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps.\n * @modifier -variant-input — Compact variant with a page-number input.\n * @modifier -icon-* — Render arrow glyph icons inside the first/prev/next/last controls.\n * @part .page — A page link or button; the current page carries `[aria-current]`.\n * @part .arrow — A first, previous, next, or last control.\n * @part .ellipsis — The gap marker between page ranges.\n * @part .page-input-label — The label for the page-number input (input variant).\n * @cssstate current\n * @cssstate disabled\n * @a11y Label the `<nav>` with aria-label, mark the current page with aria-current=\"page\", give each arrow an aria-label, and disable end arrows with disabled or aria-disabled=\"true\".\n * @example\n * <nav class=\"pfx-pagination\" aria-label=\"Pagination\">\n * <button class=\"arrow\" type=\"button\" aria-label=\"First page\" disabled><span class=\"pfx-icon -icon-chevrons-left\"></span></button>\n * <button class=\"arrow\" type=\"button\" aria-label=\"Previous page\" disabled><span class=\"pfx-icon -icon-chevron-left\"></span></button>\n * <a class=\"page\" href=\"#\" aria-current=\"page\">1</a>\n * <a class=\"page\" href=\"#\">2</a>\n * <a class=\"page\" href=\"#\">3</a>\n * <span class=\"ellipsis\">…</span>\n * <a class=\"page\" href=\"#\">12</a>\n * <a class=\"arrow\" href=\"#\" aria-label=\"Next page\"><span class=\"pfx-icon -icon-chevron-right\"></span></a>\n * <a class=\"arrow\" href=\"#\" aria-label=\"Last page\"><span class=\"pfx-icon -icon-chevrons-right\"></span></a>\n * </nav>\n * @structure\n * .pfx-pagination {\n * .arrow {\n * [class*=\"-icon-\"]:optional {}\n * }\n * .page {}\n * .ellipsis {}\n * }\n */\n.pfx-pagination {\n display: inline-flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--instui-component-pagination-page-indicator-gap);\n font-family: var(--instui-font-family-base);\n}\n\n@scope (.pfx-pagination) {\n /* A page number or a nav arrow — an <a> or <button>. Text-style primary button: brand text, no fill. */\n :scope > .page,\n :scope > .arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n min-block-size: 2rem;\n padding: var(--instui-spacing-space2xs) var(--instui-spacing-space-xs);\n color: var(--instui-color-text-interactive-navigation-primary-base);\n background: transparent;\n border: var(--instui-border-width-md) solid transparent;\n border-radius: var(--instui-component-base-button-border-radius);\n font: inherit;\n font-weight: var(--instui-font-weight-interactive);\n text-decoration: none;\n cursor: pointer;\n }\n\n :scope > .arrow [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .page:hover,\n :scope > .arrow:hover {\n background: var(--instui-color-background-muted);\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n }\n\n /* The current page — a filled primary button (InstUI: color=\"primary\" withBackground withBorder). */\n :scope > .page[aria-current],\n :scope > .page.-current {\n background: var(--instui-color-background-interactive-action-primary-base);\n color: var(--instui-color-text-interactive-action-primary-base);\n border-color: var(--instui-color-background-interactive-action-primary-base);\n }\n\n :scope > .page[aria-current]:hover,\n :scope > .page.-current:hover {\n background: var(--instui-color-background-interactive-action-primary-hover);\n border-color: var(--instui-color-background-interactive-action-primary-hover);\n color: var(--instui-color-text-interactive-action-primary-base);\n }\n\n /* Disabled nav arrows (first/prev at page 1, etc.) — shown muted (InstUI showDisabledButtons). */\n :scope > .arrow:disabled,\n :scope > .arrow[aria-disabled=\"true\"] {\n color: var(--instui-color-text-muted);\n background: transparent;\n opacity: var(--instui-opacity-disabled);\n cursor: not-allowed;\n }\n\n /* The truncation ellipsis — inert text. */\n :scope > .ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n color: var(--instui-color-text-muted);\n }\n\n /* variant=\"input\" label (\"Page … of N\"). */\n :scope > .page-input-label {\n color: var(--instui-component-pagination-page-input-label-color);\n }\n}\n\n/* variant=\"input\": a \"Page [n] of N\" jumper (the input width + spacing come from the page-input tokens). */\n.pfx-pagination.-variant-input {\n gap: var(--instui-component-pagination-page-input-input-spacing);\n}\n\n.pfx-pagination.-variant-input .pfx-text-input,\n.pfx-pagination.-variant-input .pfx-number-input {\n inline-size: var(--instui-component-pagination-page-input-input-width);\n}\n"
316
+ }.rebrand;
317
+ const pill$1 = {
318
+ "rebrand": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * <span class=\"pfx-pill\">Draft</span>\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n * @demo self:pill\n */\n.pfx-pill {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-pill-height);\n max-width: var(--instui-component-pill-max-width);\n padding: 0 var(--instui-component-pill-padding-horizontal);\n background: var(--instui-component-pill-background-color);\n color: var(--instui-component-pill-base-text-color);\n border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n var(--instui-component-pill-base-border-color);\n border-radius: var(--instui-component-pill-border-radius);\n font-family: var(--instui-component-pill-font-family);\n font-size: var(--instui-component-pill-text-font-size);\n font-weight: var(--instui-component-pill-text-font-weight);\n line-height: var(--instui-component-pill-line-height);\n}\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n inline-size: var(--instui-font-size-text-xs);\n block-size: var(--instui-font-size-text-xs);\n margin-inline-end: 0.375rem;\n}\n.pfx-pill.-color-info {\n color: var(--instui-component-pill-info-text-color);\n border-color: var(--instui-component-pill-info-border-color);\n}\n.pfx-pill.-color-success {\n color: var(--instui-component-pill-success-text-color);\n border-color: var(--instui-component-pill-success-border-color);\n}\n.pfx-pill.-color-warning {\n color: var(--instui-component-pill-warning-text-color);\n border-color: var(--instui-component-pill-warning-border-color);\n}\n.pfx-pill.-color-danger {\n color: var(--instui-component-pill-error-text-color);\n border-color: var(--instui-component-pill-error-border-color);\n}\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n",
319
+ "canvas": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * <span class=\"pfx-pill\">Draft</span>\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n * @demo self:pill\n */\n.pfx-pill {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-pill-height);\n max-width: var(--instui-component-pill-max-width);\n padding: 0 var(--instui-component-pill-padding-horizontal);\n background: var(--instui-component-pill-background-color);\n color: var(--instui-component-pill-base-text-color);\n border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n var(--instui-component-pill-base-border-color);\n border-radius: var(--instui-component-pill-border-radius);\n font-family: var(--instui-component-pill-font-family);\n font-size: var(--instui-component-pill-text-font-size);\n font-weight: var(--instui-component-pill-text-font-weight);\n line-height: var(--instui-component-pill-line-height);\n}\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n inline-size: var(--instui-font-size-text-xs);\n block-size: var(--instui-font-size-text-xs);\n margin-inline-end: 0.375rem;\n}\n.pfx-pill.-color-info {\n color: var(--instui-component-pill-info-text-color);\n border-color: var(--instui-component-pill-info-border-color);\n}\n.pfx-pill.-color-success {\n color: var(--instui-component-pill-success-text-color);\n border-color: var(--instui-component-pill-success-border-color);\n}\n.pfx-pill.-color-warning {\n color: var(--instui-component-pill-warning-text-color);\n border-color: var(--instui-component-pill-warning-border-color);\n}\n.pfx-pill.-color-danger {\n color: var(--instui-component-pill-error-text-color);\n border-color: var(--instui-component-pill-error-border-color);\n}\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n",
320
+ "canvasHighContrast": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * <span class=\"pfx-pill\">Draft</span>\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n * @demo self:pill\n */\n.pfx-pill {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-pill-height);\n max-width: var(--instui-component-pill-max-width);\n padding: 0 var(--instui-component-pill-padding-horizontal);\n background: var(--instui-component-pill-background-color);\n color: var(--instui-component-pill-base-text-color);\n border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n var(--instui-component-pill-base-border-color);\n border-radius: var(--instui-component-pill-border-radius);\n font-family: var(--instui-component-pill-font-family);\n font-size: var(--instui-component-pill-text-font-size);\n font-weight: var(--instui-component-pill-text-font-weight);\n line-height: var(--instui-component-pill-line-height);\n}\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n inline-size: var(--instui-font-size-text-xs);\n block-size: var(--instui-font-size-text-xs);\n margin-inline-end: 0.375rem;\n}\n.pfx-pill.-color-info {\n color: var(--instui-component-pill-info-text-color);\n border-color: var(--instui-component-pill-info-border-color);\n}\n.pfx-pill.-color-success {\n color: var(--instui-component-pill-success-text-color);\n border-color: var(--instui-component-pill-success-border-color);\n}\n.pfx-pill.-color-warning {\n color: var(--instui-component-pill-warning-text-color);\n border-color: var(--instui-component-pill-warning-border-color);\n}\n.pfx-pill.-color-danger {\n color: var(--instui-component-pill-error-text-color);\n border-color: var(--instui-component-pill-error-border-color);\n}\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n"
321
+ }.rebrand;
322
+ const popover$1 = {
323
+ "rebrand": "/**\n * @component popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n * <div class=\"pfx-heading -level-h4\">Share this page</div>\n * <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n * .pfx-heading {}\n * .pfx-text {\n * code {}\n * }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n.pfx-popover {\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n border-radius: var(--instui-component-popover-border-radius);\n padding: var(--instui-spacing-space-sm);\n box-shadow: var(--instui-elevation-above);\n}\n[popover].pfx-popover {\n margin: 0;\n}\n/* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n then centres the popover in the top layer. */\n@supports (position-area: block-end) {\n [popover].pfx-popover {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n [popover].pfx-popover.-placement-top {\n position-area: block-start;\n }\n [popover].pfx-popover.-placement-bottom {\n position-area: block-end;\n }\n [popover].pfx-popover.-placement-start {\n position-area: inline-start center;\n }\n [popover].pfx-popover.-placement-end {\n position-area: inline-end center;\n }\n}\n/* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-popover {\n transition:\n opacity 0.15s ease,\n transform 0.15s ease,\n overlay 0.15s allow-discrete,\n display 0.15s allow-discrete;\n opacity: 1;\n transform: translateY(0);\n }\n [popover].pfx-popover:not(:popover-open) {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n @starting-style {\n [popover].pfx-popover:popover-open {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n }\n}\n",
324
+ "canvas": "/**\n * @component popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n * <div class=\"pfx-heading -level-h4\">Share this page</div>\n * <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n * .pfx-heading {}\n * .pfx-text {\n * code {}\n * }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n.pfx-popover {\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n border-radius: var(--instui-component-popover-border-radius);\n padding: var(--instui-spacing-space-sm);\n box-shadow: var(--instui-elevation-above);\n}\n[popover].pfx-popover {\n margin: 0;\n}\n/* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n then centres the popover in the top layer. */\n@supports (position-area: block-end) {\n [popover].pfx-popover {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n [popover].pfx-popover.-placement-top {\n position-area: block-start;\n }\n [popover].pfx-popover.-placement-bottom {\n position-area: block-end;\n }\n [popover].pfx-popover.-placement-start {\n position-area: inline-start center;\n }\n [popover].pfx-popover.-placement-end {\n position-area: inline-end center;\n }\n}\n/* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-popover {\n transition:\n opacity 0.15s ease,\n transform 0.15s ease,\n overlay 0.15s allow-discrete,\n display 0.15s allow-discrete;\n opacity: 1;\n transform: translateY(0);\n }\n [popover].pfx-popover:not(:popover-open) {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n @starting-style {\n [popover].pfx-popover:popover-open {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n }\n}\n",
325
+ "canvasHighContrast": "/**\n * @component popover\n * @summary An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.\n * @modifier -placement-top — Sit above the anchor.\n * @modifier -placement-bottom — Sit below the anchor.\n * @modifier -placement-start — Sit at the start (inline-start) of the anchor.\n * @modifier -placement-end — Sit at the end (inline-end) of the anchor.\n * @compat Uses CSS anchor positioning (`position-anchor`/`position-area`) and the native `[popover]` API, both Chromium-only today; an `@supports` guard keeps the placement inert elsewhere, where the UA centres the popover in the top layer.\n * @example\n * <div class=\"pfx-popover -placement-bottom\" id=\"pop-1\">\n * <div class=\"pfx-heading -level-h4\">Share this page</div>\n * <p class=\"pfx-text -size-sm\">A popover is a lightweight surface anchored to a trigger. This one uses the native <code>popover</code> attribute.</p>\n * </div>\n * @structure\n * .pfx-popover {\n * .pfx-heading {}\n * .pfx-text {\n * code {}\n * }\n * }\n * @related tooltip — A tooltip is a smaller, hover- or focus-triggered anchored surface.\n * @related context-view — Context view is a related anchored surface with a pointer.\n */\n.pfx-popover {\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-color-text-base);\n border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n border-radius: var(--instui-component-popover-border-radius);\n padding: var(--instui-spacing-space-sm);\n box-shadow: var(--instui-elevation-above);\n}\n[popover].pfx-popover {\n margin: 0;\n}\n/* CSS anchor positioning (Chromium): if the trigger declares `anchor-name: --pantoken-anchor` (or the\n popover is opened via a popovertarget invoker, which supplies an implicit anchor), the -placement-*\n modifier places it beside the trigger and it flips to stay on-screen. Inert where unsupported — the UA\n then centres the popover in the top layer. */\n@supports (position-area: block-end) {\n [popover].pfx-popover {\n position-anchor: --pantoken-anchor;\n position-try-fallbacks: flip-block, flip-inline;\n }\n [popover].pfx-popover.-placement-top {\n position-area: block-start;\n }\n [popover].pfx-popover.-placement-bottom {\n position-area: block-end;\n }\n [popover].pfx-popover.-placement-start {\n position-area: inline-start center;\n }\n [popover].pfx-popover.-placement-end {\n position-area: inline-end center;\n }\n}\n/* A gentle open animation (native popover + @starting-style, no JS). Inert where unsupported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-popover {\n transition:\n opacity 0.15s ease,\n transform 0.15s ease,\n overlay 0.15s allow-discrete,\n display 0.15s allow-discrete;\n opacity: 1;\n transform: translateY(0);\n }\n [popover].pfx-popover:not(:popover-open) {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n @starting-style {\n [popover].pfx-popover:popover-open {\n opacity: 0;\n transform: translateY(-0.25rem);\n }\n }\n}\n"
326
+ }.rebrand;
327
+ const progressCircle$1 = {
328
+ "rebrand": "/**\n * @component progress-circle\n * @summary A circular progress ring driven by a `--value` (0–100) custom property.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; the `--value` custom property drives the arc.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @cssproperty --value <number> — The progress percentage (0–100) that drives the arc; registered with @property so it can transition.\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Give it role=\"img\" and an aria-label stating the percentage, since the ring is drawn in CSS.\n * @compat Registers `--value` with `@property` (so the arc can transition) and paints with CSS `mask` and `conic-gradient`; where `@property` is unsupported the ring still renders but won't animate.\n * @example\n * <span class=\"pfx-progress-circle -size-sm\" role=\"img\" aria-label=\"25 percent\">\n * <span class=\"value\">25%</span>\n * </span>\n * @related progress — The linear bar form of the same determinate progress.\n */\n/* --value (0–100) drives the arc; registered so the conic-gradient re-evaluates (and can transition). */\n@property --value {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n.pfx-progress-circle {\n --value: 0;\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n color: var(--instui-component-progress-circle-color);\n font-family: var(--instui-component-progress-circle-font-family);\n font-weight: var(--instui-component-progress-circle-font-weight);\n line-height: var(--instui-component-progress-circle-line-height);\n}\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: conic-gradient(\n var(--pantoken-pc-fill) calc(var(--value) * 1%),\n var(--pantoken-pc-track) 0\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n #0000 calc(100% - var(--pantoken-pc-stroke)),\n #000 0\n );\n mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n}\n.pfx-progress-circle .value {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.pfx-progress-circle.-size-xs {\n width: var(--instui-component-progress-circle-x-small-size);\n height: var(--instui-component-progress-circle-x-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n.pfx-progress-circle.-size-sm {\n width: var(--instui-component-progress-circle-small-size);\n height: var(--instui-component-progress-circle-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n.pfx-progress-circle.-size-lg {\n width: var(--instui-component-progress-circle-large-size);\n height: var(--instui-component-progress-circle-large-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n.pfx-progress-circle.-color-brand {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n.pfx-progress-circle.-color-info {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n.pfx-progress-circle.-color-success {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n.pfx-progress-circle.-color-warning {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n.pfx-progress-circle.-color-danger {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n.pfx-progress-circle.-color-primary-inverse {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n color: var(--instui-component-progress-circle-color-inverse);\n}\n",
329
+ "canvas": "/**\n * @component progress-circle\n * @summary A circular progress ring driven by a `--value` (0–100) custom property.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; the `--value` custom property drives the arc.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @cssproperty --value <number> — The progress percentage (0–100) that drives the arc; registered with @property so it can transition.\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Give it role=\"img\" and an aria-label stating the percentage, since the ring is drawn in CSS.\n * @compat Registers `--value` with `@property` (so the arc can transition) and paints with CSS `mask` and `conic-gradient`; where `@property` is unsupported the ring still renders but won't animate.\n * @example\n * <span class=\"pfx-progress-circle -size-sm\" role=\"img\" aria-label=\"25 percent\">\n * <span class=\"value\">25%</span>\n * </span>\n * @related progress — The linear bar form of the same determinate progress.\n */\n/* --value (0–100) drives the arc; registered so the conic-gradient re-evaluates (and can transition). */\n@property --value {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n.pfx-progress-circle {\n --value: 0;\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n color: var(--instui-component-progress-circle-color);\n font-family: var(--instui-component-progress-circle-font-family);\n font-weight: var(--instui-component-progress-circle-font-weight);\n line-height: var(--instui-component-progress-circle-line-height);\n}\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: conic-gradient(\n var(--pantoken-pc-fill) calc(var(--value) * 1%),\n var(--pantoken-pc-track) 0\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n #0000 calc(100% - var(--pantoken-pc-stroke)),\n #000 0\n );\n mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n}\n.pfx-progress-circle .value {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.pfx-progress-circle.-size-xs {\n width: var(--instui-component-progress-circle-x-small-size);\n height: var(--instui-component-progress-circle-x-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n.pfx-progress-circle.-size-sm {\n width: var(--instui-component-progress-circle-small-size);\n height: var(--instui-component-progress-circle-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n.pfx-progress-circle.-size-lg {\n width: var(--instui-component-progress-circle-large-size);\n height: var(--instui-component-progress-circle-large-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n.pfx-progress-circle.-color-brand {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n.pfx-progress-circle.-color-info {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n.pfx-progress-circle.-color-success {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n.pfx-progress-circle.-color-warning {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n.pfx-progress-circle.-color-danger {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n.pfx-progress-circle.-color-primary-inverse {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n color: var(--instui-component-progress-circle-color-inverse);\n}\n",
330
+ "canvasHighContrast": "/**\n * @component progress-circle\n * @summary A circular progress ring driven by a `--value` (0–100) custom property.\n * @remarks The ring is a `conic-gradient` donut painted on `::before` and clipped with a radial-gradient mask; the `--value` custom property drives the arc.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .value — The value text centred in the ring's hole.\n * @pseudo ::before — Draws the ring itself: a conic-gradient donut clipped with a radial mask, whose arc tracks the `--value` custom property.\n * @cssproperty --value <number> — The progress percentage (0–100) that drives the arc; registered with @property so it can transition.\n * @cssproperty --pantoken-pc-fill <color> — The filled arc (meter) colour; the -color-* modifiers set it.\n * @cssproperty --pantoken-pc-track <color> — The unfilled track colour.\n * @cssproperty --pantoken-pc-stroke <length> — The ring's stroke width; the -size-* modifiers set it.\n * @a11y Give it role=\"img\" and an aria-label stating the percentage, since the ring is drawn in CSS.\n * @compat Registers `--value` with `@property` (so the arc can transition) and paints with CSS `mask` and `conic-gradient`; where `@property` is unsupported the ring still renders but won't animate.\n * @example\n * <span class=\"pfx-progress-circle -size-sm\" role=\"img\" aria-label=\"25 percent\">\n * <span class=\"value\">25%</span>\n * </span>\n * @related progress — The linear bar form of the same determinate progress.\n */\n/* --value (0–100) drives the arc; registered so the conic-gradient re-evaluates (and can transition). */\n@property --value {\n syntax: \"<number>\";\n inherits: true;\n initial-value: 0;\n}\n.pfx-progress-circle {\n --value: 0;\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-medium-stroke-width);\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--instui-component-progress-circle-medium-size);\n height: var(--instui-component-progress-circle-medium-size);\n color: var(--instui-component-progress-circle-color);\n font-family: var(--instui-component-progress-circle-font-family);\n font-weight: var(--instui-component-progress-circle-font-weight);\n line-height: var(--instui-component-progress-circle-line-height);\n}\n/* The ring is a masked conic donut on ::before; the value sits in the hole. */\n.pfx-progress-circle::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: conic-gradient(\n var(--pantoken-pc-fill) calc(var(--value) * 1%),\n var(--pantoken-pc-track) 0\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n #0000 calc(100% - var(--pantoken-pc-stroke)),\n #000 0\n );\n mask: radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);\n}\n.pfx-progress-circle .value {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.pfx-progress-circle.-size-xs {\n width: var(--instui-component-progress-circle-x-small-size);\n height: var(--instui-component-progress-circle-x-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-x-small-stroke-width);\n}\n.pfx-progress-circle.-size-sm {\n width: var(--instui-component-progress-circle-small-size);\n height: var(--instui-component-progress-circle-small-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-small-stroke-width);\n}\n.pfx-progress-circle.-size-lg {\n width: var(--instui-component-progress-circle-large-size);\n height: var(--instui-component-progress-circle-large-size);\n --pantoken-pc-stroke: var(--instui-component-progress-circle-large-stroke-width);\n}\n.pfx-progress-circle.-color-brand {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-brand {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n}\n.pfx-progress-circle.-color-info {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-info {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-info-inverse);\n}\n.pfx-progress-circle.-color-success {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-success {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-success-inverse);\n}\n.pfx-progress-circle.-color-warning {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-warning {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-warning-inverse);\n}\n.pfx-progress-circle.-color-danger {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger);\n}\n.pfx-progress-circle.-color-primary-inverse.-color-danger {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-danger-inverse);\n}\n.pfx-progress-circle.-color-primary-inverse {\n --pantoken-pc-fill: var(--instui-component-progress-circle-meter-color-brand-inverse);\n --pantoken-pc-track: var(--instui-component-progress-circle-track-color-inverse);\n color: var(--instui-component-progress-circle-color-inverse);\n}\n"
331
+ }.rebrand;
332
+ const progress$1 = {
333
+ "rebrand": "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks The value label is a separate sibling element (`.pfx-progress-value`), not a child of the bar.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @accessibility Expose progress via `role=\"progressbar\"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` (or `role=\"img\"` plus `aria-label`), mirroring how progress-circle is labelled.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * <div class=\"pfx-progress -color-brand\">\n * <div class=\"bar\"></div>\n * </div>\n * @related progress-circle — The circular form of the same determinate progress.\n */\n.pfx-progress {\n position: relative;\n display: block;\n width: 100%;\n height: var(--instui-component-progress-bar-medium-height);\n background: var(--instui-component-progress-bar-track-color);\n /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n var(--instui-component-progress-bar-border-color);\n border-radius: var(--instui-component-progress-bar-border-radius);\n overflow: hidden;\n}\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: var(--instui-component-progress-bar-track-bottom-border-width);\n background: var(--instui-component-progress-bar-track-bottom-border-color);\n pointer-events: none;\n}\n.pfx-progress.-size-xs {\n height: var(--instui-component-progress-bar-x-small-height);\n}\n.pfx-progress.-size-sm {\n height: var(--instui-component-progress-bar-small-height);\n}\n.pfx-progress.-size-lg {\n height: var(--instui-component-progress-bar-large-height);\n}\n@scope (.pfx-progress) {\n :scope > .bar {\n height: 100%;\n background: var(--instui-color-background-brand);\n border-radius: var(--instui-component-progress-bar-border-radius);\n }\n :scope.-should-animate > .bar {\n transition: width 0.5s ease;\n }\n}\n.pfx-progress.-color-brand .bar {\n background: var(--instui-color-background-brand);\n}\n.pfx-progress.-color-info .bar {\n background: var(--instui-color-background-info);\n}\n.pfx-progress.-color-success .bar {\n background: var(--instui-color-background-success);\n}\n.pfx-progress.-color-warning .bar {\n background: var(--instui-color-background-warning);\n}\n.pfx-progress.-color-danger .bar {\n background: var(--instui-color-background-error);\n}\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n background: var(--instui-component-progress-bar-track-color-inverse);\n border-color: var(--instui-component-progress-bar-border-color-inverse);\n color: var(--instui-component-progress-bar-text-color-inverse);\n}\n.pfx-progress.-color-primary-inverse::after {\n background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n.pfx-progress.-color-primary-inverse .bar {\n background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n.pfx-progress-value {\n padding: 0 var(--instui-component-progress-bar-value-padding);\n color: var(--instui-component-progress-bar-text-color);\n font-family: var(--instui-component-progress-bar-font-family);\n font-size: var(--instui-component-progress-bar-medium-value-font-size);\n font-weight: var(--instui-component-progress-bar-font-weight);\n line-height: var(--instui-component-progress-bar-line-height);\n}\n.pfx-progress.-color-inverse ~ .pfx-progress-value,\n.pfx-progress-value.-color-inverse {\n color: var(--instui-component-progress-bar-text-color-inverse);\n}\n",
334
+ "canvas": "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks The value label is a separate sibling element (`.pfx-progress-value`), not a child of the bar.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @accessibility Expose progress via `role=\"progressbar\"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` (or `role=\"img\"` plus `aria-label`), mirroring how progress-circle is labelled.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * <div class=\"pfx-progress -color-brand\">\n * <div class=\"bar\"></div>\n * </div>\n * @related progress-circle — The circular form of the same determinate progress.\n */\n.pfx-progress {\n position: relative;\n display: block;\n width: 100%;\n height: var(--instui-component-progress-bar-medium-height);\n background: var(--instui-component-progress-bar-track-color);\n /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n var(--instui-component-progress-bar-border-color);\n border-radius: var(--instui-component-progress-bar-border-radius);\n overflow: hidden;\n}\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: var(--instui-component-progress-bar-track-bottom-border-width);\n background: var(--instui-component-progress-bar-track-bottom-border-color);\n pointer-events: none;\n}\n.pfx-progress.-size-xs {\n height: var(--instui-component-progress-bar-x-small-height);\n}\n.pfx-progress.-size-sm {\n height: var(--instui-component-progress-bar-small-height);\n}\n.pfx-progress.-size-lg {\n height: var(--instui-component-progress-bar-large-height);\n}\n@scope (.pfx-progress) {\n :scope > .bar {\n height: 100%;\n background: var(--instui-color-background-brand);\n border-radius: var(--instui-component-progress-bar-border-radius);\n }\n :scope.-should-animate > .bar {\n transition: width 0.5s ease;\n }\n}\n.pfx-progress.-color-brand .bar {\n background: var(--instui-color-background-brand);\n}\n.pfx-progress.-color-info .bar {\n background: var(--instui-color-background-info);\n}\n.pfx-progress.-color-success .bar {\n background: var(--instui-color-background-success);\n}\n.pfx-progress.-color-warning .bar {\n background: var(--instui-color-background-warning);\n}\n.pfx-progress.-color-danger .bar {\n background: var(--instui-color-background-error);\n}\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n background: var(--instui-component-progress-bar-track-color-inverse);\n border-color: var(--instui-component-progress-bar-border-color-inverse);\n color: var(--instui-component-progress-bar-text-color-inverse);\n}\n.pfx-progress.-color-primary-inverse::after {\n background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n.pfx-progress.-color-primary-inverse .bar {\n background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n.pfx-progress-value {\n padding: 0 var(--instui-component-progress-bar-value-padding);\n color: var(--instui-component-progress-bar-text-color);\n font-family: var(--instui-component-progress-bar-font-family);\n font-size: var(--instui-component-progress-bar-medium-value-font-size);\n font-weight: var(--instui-component-progress-bar-font-weight);\n line-height: var(--instui-component-progress-bar-line-height);\n}\n.pfx-progress.-color-inverse ~ .pfx-progress-value,\n.pfx-progress-value.-color-inverse {\n color: var(--instui-component-progress-bar-text-color-inverse);\n}\n",
335
+ "canvasHighContrast": "/**\n * @component progress\n * @summary A determinate progress bar with a coloured meter, sizes, and an optional value label.\n * @remarks The value label is a separate sibling element (`.pfx-progress-value`), not a child of the bar.\n * @modifier -color-brand — Brand meter colour.\n * @modifier -color-info — Informational meter colour.\n * @modifier -color-success — Success meter colour.\n * @modifier -color-warning — Warning meter colour.\n * @modifier -color-danger — Danger meter colour.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -color-primary-inverse — On-dark (primary inverse) meter colour.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -meter-color-brand — @deprecated {@link -color-brand}\n * @modifier -meter-color-info — @deprecated {@link -color-info}\n * @modifier -meter-color-success — @deprecated {@link -color-success}\n * @modifier -meter-color-warning — @deprecated {@link -color-warning}\n * @modifier -meter-color-alert — @deprecated {@link -color-warning}\n * @modifier -meter-color-danger — @deprecated {@link -color-danger}\n * @part .bar — The filled meter bar.\n * @pseudo ::after — Draws the track's bottom rule as its own layer over the meter, so the full border and the bottom border stay independent across themes.\n * @accessibility Expose progress via `role=\"progressbar\"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` (or `role=\"img\"` plus `aria-label`), mirroring how progress-circle is labelled.\n * @compat Scopes the meter part rules with the `@scope` at-rule; browsers without `@scope` support ignore those scoped rules.\n * @example\n * <div class=\"pfx-progress -color-brand\">\n * <div class=\"bar\"></div>\n * </div>\n * @related progress-circle — The circular form of the same determinate progress.\n */\n.pfx-progress {\n position: relative;\n display: block;\n width: 100%;\n height: var(--instui-component-progress-bar-medium-height);\n background: var(--instui-component-progress-bar-track-color);\n /* The full border (InstUI trackLayout.border) frames the track on all sides. */\n border: var(--instui-component-progress-bar-track-bottom-border-width) solid\n var(--instui-component-progress-bar-border-color);\n border-radius: var(--instui-component-progress-bar-border-radius);\n overflow: hidden;\n}\n/* InstUI layers a distinct bottom rule (trackBottomBorderColor) over the meter, separate from the full\n border. In legacy Canvas the full border is transparent so only this rule shows; in the newer themes\n the full border shows and this rule is transparent. A pseudo keeps both layers independent. */\n.pfx-progress::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: var(--instui-component-progress-bar-track-bottom-border-width);\n background: var(--instui-component-progress-bar-track-bottom-border-color);\n pointer-events: none;\n}\n.pfx-progress.-size-xs {\n height: var(--instui-component-progress-bar-x-small-height);\n}\n.pfx-progress.-size-sm {\n height: var(--instui-component-progress-bar-small-height);\n}\n.pfx-progress.-size-lg {\n height: var(--instui-component-progress-bar-large-height);\n}\n@scope (.pfx-progress) {\n :scope > .bar {\n height: 100%;\n background: var(--instui-color-background-brand);\n border-radius: var(--instui-component-progress-bar-border-radius);\n }\n :scope.-should-animate > .bar {\n transition: width 0.5s ease;\n }\n}\n.pfx-progress.-color-brand .bar {\n background: var(--instui-color-background-brand);\n}\n.pfx-progress.-color-info .bar {\n background: var(--instui-color-background-info);\n}\n.pfx-progress.-color-success .bar {\n background: var(--instui-color-background-success);\n}\n.pfx-progress.-color-warning .bar {\n background: var(--instui-color-background-warning);\n}\n.pfx-progress.-color-danger .bar {\n background: var(--instui-color-background-error);\n}\n/* color=\"primary-inverse\": the on-dark scheme. It's a distinct axis from meterColor and overrides it —\n InstUI's inverse meter tokens all collapse to background-base — so it comes AFTER the meter rules and\n wins at equal specificity. Pair it with a dark surface. */\n.pfx-progress.-color-primary-inverse {\n background: var(--instui-component-progress-bar-track-color-inverse);\n border-color: var(--instui-component-progress-bar-border-color-inverse);\n color: var(--instui-component-progress-bar-text-color-inverse);\n}\n.pfx-progress.-color-primary-inverse::after {\n background: var(--instui-component-progress-bar-track-bottom-border-color-inverse);\n}\n.pfx-progress.-color-primary-inverse .bar {\n background: var(--instui-component-progress-bar-meter-color-brand-inverse);\n}\n.pfx-progress-value {\n padding: 0 var(--instui-component-progress-bar-value-padding);\n color: var(--instui-component-progress-bar-text-color);\n font-family: var(--instui-component-progress-bar-font-family);\n font-size: var(--instui-component-progress-bar-medium-value-font-size);\n font-weight: var(--instui-component-progress-bar-font-weight);\n line-height: var(--instui-component-progress-bar-line-height);\n}\n.pfx-progress.-color-inverse ~ .pfx-progress-value,\n.pfx-progress-value.-color-inverse {\n color: var(--instui-component-progress-bar-text-color-inverse);\n}\n"
336
+ }.rebrand;
337
+ const radioInputGroup$1 = {
338
+ "rebrand": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * <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 * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n",
339
+ "canvas": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * <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 * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n",
340
+ "canvasHighContrast": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * <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 * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n"
341
+ }.rebrand;
342
+ const radio$1 = {
343
+ "rebrand": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-radio-input-gap);\n color: var(--instui-component-radio-input-label-base-color);\n font-family: var(--instui-component-radio-input-font-family);\n font-size: var(--instui-component-radio-input-font-size-md);\n font-weight: var(--instui-component-radio-input-font-weight);\n line-height: var(--instui-component-radio-input-line-height-md);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-radio-input-control-size-md);\n height: var(--instui-component-radio-input-control-size-md);\n margin-block: var(--instui-component-radio-input-control-vertical-margin);\n border: var(--instui-component-radio-input-border-width) solid\n var(--instui-component-radio-input-border-color);\n border-radius: 50%;\n background: var(--instui-component-radio-input-background-color);\n cursor: pointer;\n transition:\n border-color 0.15s ease,\n background-color 0.15s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n content: \"\";\n width: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n border-radius: 50%;\n background: var(--instui-component-radio-input-border-selected-color);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n border-color: var(--instui-component-radio-input-border-hover-color);\n background: var(--instui-component-radio-input-background-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n border-color: var(--instui-component-radio-input-border-selected-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n transform: scale(1);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n border-color: var(--instui-component-radio-input-border-disabled-color);\n background: var(--instui-component-radio-input-background-disabled-color);\n cursor: not-allowed;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n color: var(--instui-component-radio-input-label-disabled-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n color: var(--instui-component-radio-input-label-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n font-size: var(--instui-component-radio-input-font-size-sm);\n line-height: var(--instui-component-radio-input-line-height-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-sm);\n height: var(--instui-component-radio-input-control-size-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n font-size: var(--instui-component-radio-input-font-size-lg);\n line-height: var(--instui-component-radio-input-line-height-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-lg);\n height: var(--instui-component-radio-input-control-size-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n color: var(--instui-component-radio-input-label-readonly-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n border-color: var(--instui-component-radio-input-border-readonly-color);\n background: var(--instui-component-radio-input-background-readonly-color);\n}\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n position: relative;\n justify-content: center;\n gap: 0;\n height: var(--instui-component-radio-input-toggle-medium-height);\n padding-inline: 0.875rem;\n border-radius: var(--instui-component-radio-input-toggle-border-radius);\n background: transparent;\n color: var(--instui-component-radio-input-label-base-color);\n font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n color 0.15s ease;\n}\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n}\n.pfx-radio.-variant-toggle.-context-off {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n.pfx-radio.-variant-toggle.-context-success {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n.pfx-radio.-variant-toggle.-context-danger {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n.pfx-radio.-variant-toggle.-context-warning {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n background: var(--pantoken-rt-fill);\n color: var(--instui-component-radio-input-toggle-handle-text);\n box-shadow: var(--instui-elevation-depth1);\n}\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n text-decoration: underline;\n}\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n content: \"\";\n position: absolute;\n inset: -0.25rem;\n border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n pointer-events: none;\n}\n.pfx-radio.-variant-toggle:has(input:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.pfx-radio.-variant-toggle.-size-sm {\n height: var(--instui-component-radio-input-toggle-small-height);\n font-size: var(--instui-component-radio-input-toggle-small-font-size);\n padding-inline: 0.5rem;\n}\n.pfx-radio.-variant-toggle.-size-lg {\n height: var(--instui-component-radio-input-toggle-large-height);\n font-size: var(--instui-component-radio-input-toggle-large-font-size);\n padding-inline: 1rem;\n}\n",
344
+ "canvas": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-radio-input-gap);\n color: var(--instui-component-radio-input-label-base-color);\n font-family: var(--instui-component-radio-input-font-family);\n font-size: var(--instui-component-radio-input-font-size-md);\n font-weight: var(--instui-component-radio-input-font-weight);\n line-height: var(--instui-component-radio-input-line-height-md);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-radio-input-control-size-md);\n height: var(--instui-component-radio-input-control-size-md);\n margin-block: var(--instui-component-radio-input-control-vertical-margin);\n border: var(--instui-component-radio-input-border-width) solid\n var(--instui-component-radio-input-border-color);\n border-radius: 50%;\n background: var(--instui-component-radio-input-background-color);\n cursor: pointer;\n transition:\n border-color 0.15s ease,\n background-color 0.15s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n content: \"\";\n width: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n border-radius: 50%;\n background: var(--instui-component-radio-input-border-selected-color);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n border-color: var(--instui-component-radio-input-border-hover-color);\n background: var(--instui-component-radio-input-background-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n border-color: var(--instui-component-radio-input-border-selected-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n transform: scale(1);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n border-color: var(--instui-component-radio-input-border-disabled-color);\n background: var(--instui-component-radio-input-background-disabled-color);\n cursor: not-allowed;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n color: var(--instui-component-radio-input-label-disabled-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n color: var(--instui-component-radio-input-label-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n font-size: var(--instui-component-radio-input-font-size-sm);\n line-height: var(--instui-component-radio-input-line-height-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-sm);\n height: var(--instui-component-radio-input-control-size-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n font-size: var(--instui-component-radio-input-font-size-lg);\n line-height: var(--instui-component-radio-input-line-height-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-lg);\n height: var(--instui-component-radio-input-control-size-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n color: var(--instui-component-radio-input-label-readonly-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n border-color: var(--instui-component-radio-input-border-readonly-color);\n background: var(--instui-component-radio-input-background-readonly-color);\n}\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n position: relative;\n justify-content: center;\n gap: 0;\n height: var(--instui-component-radio-input-toggle-medium-height);\n padding-inline: 0.875rem;\n border-radius: var(--instui-component-radio-input-toggle-border-radius);\n background: transparent;\n color: var(--instui-component-radio-input-label-base-color);\n font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n color 0.15s ease;\n}\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n}\n.pfx-radio.-variant-toggle.-context-off {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n.pfx-radio.-variant-toggle.-context-success {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n.pfx-radio.-variant-toggle.-context-danger {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n.pfx-radio.-variant-toggle.-context-warning {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n background: var(--pantoken-rt-fill);\n color: var(--instui-component-radio-input-toggle-handle-text);\n box-shadow: var(--instui-elevation-depth1);\n}\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n text-decoration: underline;\n}\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n content: \"\";\n position: absolute;\n inset: -0.25rem;\n border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n pointer-events: none;\n}\n.pfx-radio.-variant-toggle:has(input:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.pfx-radio.-variant-toggle.-size-sm {\n height: var(--instui-component-radio-input-toggle-small-height);\n font-size: var(--instui-component-radio-input-toggle-small-font-size);\n padding-inline: 0.5rem;\n}\n.pfx-radio.-variant-toggle.-size-lg {\n height: var(--instui-component-radio-input-toggle-large-height);\n font-size: var(--instui-component-radio-input-toggle-large-font-size);\n padding-inline: 1rem;\n}\n",
345
+ "canvasHighContrast": "/**\n * @component radio\n * @summary A native radio button and its label.\n * @modifier -context-off — Off/neutral context colour (toggle variant).\n * @modifier -context-success — Success context colour (toggle variant).\n * @modifier -context-warning — Warning context colour (toggle variant).\n * @modifier -context-danger — Danger context colour (toggle variant).\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a segmented toggle button.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -toggle — @deprecated {@link -variant-toggle}\n * @pseudo ::before — The filled inner dot shown when checked; on `-variant-toggle` it is the focus ring drawn just outside the pill.\n * @cssproperty --pantoken-rt-fill <color> — The toggle's selected fill colour; the -context-* modifiers set it.\n * @cssstate checked\n * @cssstate disabled\n * @accessibility A native `<input type=\"radio\">` drives `:checked` and `:disabled`; `-readonly` is styling only, since radios have no native readonly attribute.\n * @example\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"r\" checked> Option A</label>\n * @related checkbox — The multi-select counterpart to a single-select radio.\n * @related radio-input-group — Collects radios into one single-select fieldset.\n */\n.pfx-radio {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-radio-input-gap);\n color: var(--instui-component-radio-input-label-base-color);\n font-family: var(--instui-component-radio-input-font-family);\n font-size: var(--instui-component-radio-input-font-size-md);\n font-weight: var(--instui-component-radio-input-font-weight);\n line-height: var(--instui-component-radio-input-line-height-md);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-radio-input-control-size-md);\n height: var(--instui-component-radio-input-control-size-md);\n margin-block: var(--instui-component-radio-input-control-vertical-margin);\n border: var(--instui-component-radio-input-border-width) solid\n var(--instui-component-radio-input-border-color);\n border-radius: 50%;\n background: var(--instui-component-radio-input-background-color);\n cursor: pointer;\n transition:\n border-color 0.15s ease,\n background-color 0.15s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]::before {\n content: \"\";\n width: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-md) - 2 *\n var(--instui-component-radio-input-checked-inset-md)\n );\n border-radius: 50%;\n background: var(--instui-component-radio-input-border-selected-color);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:hover {\n border-color: var(--instui-component-radio-input-border-hover-color);\n background: var(--instui-component-radio-input-background-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked {\n border-color: var(--instui-component-radio-input-border-selected-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:checked::before {\n transform: scale(1);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle) input[type=\"radio\"]:disabled {\n border-color: var(--instui-component-radio-input-border-disabled-color);\n background: var(--instui-component-radio-input-background-disabled-color);\n cursor: not-allowed;\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):has(input:disabled) {\n color: var(--instui-component-radio-input-label-disabled-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle):hover {\n color: var(--instui-component-radio-input-label-hover-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm {\n font-size: var(--instui-component-radio-input-font-size-sm);\n line-height: var(--instui-component-radio-input-line-height-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-sm);\n height: var(--instui-component-radio-input-control-size-sm);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-sm input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-sm) - 2 *\n var(--instui-component-radio-input-checked-inset-sm)\n );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg {\n font-size: var(--instui-component-radio-input-font-size-lg);\n line-height: var(--instui-component-radio-input-line-height-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"] {\n width: var(--instui-component-radio-input-control-size-lg);\n height: var(--instui-component-radio-input-control-size-lg);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-size-lg input[type=\"radio\"]::before {\n width: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n height: calc(\n var(--instui-component-radio-input-control-size-lg) - 2 *\n var(--instui-component-radio-input-checked-inset-lg)\n );\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly {\n color: var(--instui-component-radio-input-label-readonly-color);\n}\n.pfx-radio:not(.-variant-toggle):not(.-toggle).-readonly input[type=\"radio\"] {\n border-color: var(--instui-component-radio-input-border-readonly-color);\n background: var(--instui-component-radio-input-background-readonly-color);\n}\n/* variant=toggle — a segmented control (InstUI RadioInput toggle facade). Each segment is plain\n uppercase label text; the facade is hidden until checked, so unselected segments have NO border and\n NO background. Only the SELECTED segment shows a pill: the context fill, the resting (depth1) shadow,\n rounded corners, and white text. The fill is indirected through --pantoken-rt-fill so -context-* is a\n one-line override (default success/green). */\n.pfx-radio.-variant-toggle {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n position: relative;\n justify-content: center;\n gap: 0;\n height: var(--instui-component-radio-input-toggle-medium-height);\n padding-inline: 0.875rem;\n border-radius: var(--instui-component-radio-input-toggle-border-radius);\n background: transparent;\n color: var(--instui-component-radio-input-label-base-color);\n font-size: var(--instui-component-radio-input-toggle-medium-font-size);\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n color 0.15s ease;\n}\n/* Clip the native control (still focusable + in the a11y tree); the label is the button. */\n.pfx-radio.-variant-toggle input[type=\"radio\"] {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n}\n.pfx-radio.-variant-toggle.-context-off {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-off);\n}\n.pfx-radio.-variant-toggle.-context-success {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-success);\n}\n.pfx-radio.-variant-toggle.-context-danger {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-danger);\n}\n.pfx-radio.-variant-toggle.-context-warning {\n --pantoken-rt-fill: var(--instui-component-radio-input-toggle-background-warning);\n}\n/* Selected: the pill appears — the context fill, white label, and the resting elevation shadow. */\n.pfx-radio.-variant-toggle:has(input:checked) {\n background: var(--pantoken-rt-fill);\n color: var(--instui-component-radio-input-toggle-handle-text);\n box-shadow: var(--instui-elevation-depth1);\n}\n/* Focus: underline the label and draw a ring offset just outside the pill (the InstUI focus facade). */\n.pfx-radio.-variant-toggle:has(input:focus-visible) {\n text-decoration: underline;\n}\n.pfx-radio.-variant-toggle:has(input:focus-visible)::before {\n content: \"\";\n position: absolute;\n inset: -0.25rem;\n border: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color);\n border-radius: calc(var(--instui-component-radio-input-toggle-border-radius) + 0.0625rem);\n pointer-events: none;\n}\n.pfx-radio.-variant-toggle:has(input:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.pfx-radio.-variant-toggle.-size-sm {\n height: var(--instui-component-radio-input-toggle-small-height);\n font-size: var(--instui-component-radio-input-toggle-small-font-size);\n padding-inline: 0.5rem;\n}\n.pfx-radio.-variant-toggle.-size-lg {\n height: var(--instui-component-radio-input-toggle-large-height);\n font-size: var(--instui-component-radio-input-toggle-large-font-size);\n padding-inline: 1rem;\n}\n"
346
+ }.rebrand;
347
+ const rangeInput$1 = {
348
+ "rebrand": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n.pfx-range-input::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n}\n.pfx-range-input-value::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n}\n",
349
+ "canvas": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n.pfx-range-input::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n}\n.pfx-range-input-value::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n}\n",
350
+ "canvasHighContrast": "/**\n * @component range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n.pfx-range-input {\n -webkit-appearance: none;\n appearance: none;\n inline-size: 100%;\n min-inline-size: var(--instui-component-range-input-min-width);\n block-size: var(--instui-component-range-input-handle-size);\n background: transparent;\n}\n/* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n.pfx-range-input::-webkit-slider-runnable-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-moz-range-track {\n block-size: 0.25rem;\n background: var(--instui-component-range-input-track-background);\n border: var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);\n border-radius: 999px;\n}\n.pfx-range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input::-moz-range-thumb {\n inline-size: var(--instui-component-range-input-handle-size);\n block-size: var(--instui-component-range-input-handle-size);\n background: var(--instui-component-range-input-handle-background);\n border: var(--instui-component-range-input-handle-border-size) solid\n var(--instui-component-range-input-handle-border-color);\n border-radius: 50%;\n box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n cursor: pointer;\n}\n.pfx-range-input:hover::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:hover::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-hover-background);\n}\n.pfx-range-input:focus-visible {\n outline: none;\n}\n.pfx-range-input:focus-visible::-webkit-slider-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n.pfx-range-input:focus-visible::-moz-range-thumb {\n background: var(--instui-component-range-input-handle-focus-background);\n box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n var(--instui-component-range-input-handle-focus-outline-color);\n}\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n.pfx-range-input-value {\n position: relative;\n display: inline-flex;\n align-items: center;\n /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n align-self: center;\n margin-inline-start: 0.5rem;\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-component-range-input-value-medium-padding);\n font-family: var(--instui-component-range-input-value-font-family);\n font-size: var(--instui-component-range-input-value-medium-font-size);\n font-weight: var(--instui-component-range-input-value-font-weight);\n line-height: 1;\n}\n.pfx-range-input-value::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.375rem;\n inset-block-start: 50%;\n transform: translateY(-50%);\n border-block: 0.375rem solid transparent;\n border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n border-inline-start: 0;\n}\n.pfx-range-input-value.-size-sm {\n padding: var(--instui-component-range-input-value-small-padding);\n font-size: var(--instui-component-range-input-value-small-font-size);\n line-height: var(--instui-component-range-input-value-small-line-height);\n}\n.pfx-range-input-value.-size-lg {\n padding: var(--instui-component-range-input-value-large-padding);\n font-size: var(--instui-component-range-input-value-large-font-size);\n line-height: var(--instui-component-range-input-value-large-line-height);\n}\n"
351
+ }.rebrand;
352
+ const rating$1 = {
353
+ "rebrand": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n * <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n * <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n * [class*=\"-icon-\"] {}\n * .label {}\n * }\n */\n.pfx-rating {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-rating-icon-icon-margin);\n font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n .-icon-star-solid {\n color: var(--instui-component-rating-icon-icon-filled-color);\n }\n\n /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n :scope > .label {\n margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n color: var(--instui-color-text-base);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-font-size-text-base);\n }\n}\n",
354
+ "canvas": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n * <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n * <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n * [class*=\"-icon-\"] {}\n * .label {}\n * }\n */\n.pfx-rating {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-rating-icon-icon-margin);\n font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n .-icon-star-solid {\n color: var(--instui-component-rating-icon-icon-filled-color);\n }\n\n /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n :scope > .label {\n margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n color: var(--instui-color-text-base);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-font-size-text-base);\n }\n}\n",
355
+ "canvasHighContrast": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n * <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n * <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n * [class*=\"-icon-\"] {}\n * .label {}\n * }\n */\n.pfx-rating {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-rating-icon-icon-margin);\n font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n .-icon-star-solid {\n color: var(--instui-component-rating-icon-icon-filled-color);\n }\n\n /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n :scope > .label {\n margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n color: var(--instui-color-text-base);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-font-size-text-base);\n }\n}\n"
356
+ }.rebrand;
357
+ const select = {
358
+ "rebrand": "/* Experimental: CSS Customizable Select (`appearance: base-select`, Chrome 135+, not yet Baseline).\n Enhances .pfx-simple-select; degrades to the plain control where unsupported. */\n@supports (appearance: base-select) {\n .pfx-simple-select,\n .pfx-simple-select::picker(select) {\n appearance: base-select;\n }\n /* Keep simple-select's own background-image caret; hide the UA-generated picker icon. */\n .pfx-simple-select::picker-icon {\n display: none;\n }\n .pfx-simple-select::picker(select) {\n border: var(--instui-component-select-popover-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-border-radius-lg);\n box-shadow: var(--instui-elevation-topmost);\n background-color: var(--instui-component-options-item-background);\n padding: 0;\n margin: 0;\n overflow: hidden;\n }\n .pfx-simple-select option {\n padding: var(--instui-component-options-item-padding-vertical)\n var(--instui-component-options-item-padding-horizontal);\n background-color: var(--instui-component-options-item-background);\n color: var(--instui-component-options-item-color);\n font-family: var(--instui-component-options-item-font-family);\n font-weight: var(--instui-component-options-item-font-weight);\n font-size: var(--instui-component-options-item-font-size);\n line-height: var(--instui-component-options-item-line-height);\n cursor: pointer;\n }\n /* Hide the UA checkmark; the selected row gets our own trailing check via background-image. */\n .pfx-simple-select option::checkmark {\n display: none;\n }\n .pfx-simple-select option:hover,\n .pfx-simple-select option:focus {\n background-color: var(--instui-component-options-item-highlighted-background);\n color: var(--instui-component-options-item-highlighted-label-color);\n outline: none;\n }\n .pfx-simple-select option:checked {\n background-color: var(--instui-component-options-item-selected-background);\n color: var(--instui-component-options-item-selected-label-color);\n font-weight: var(--instui-component-options-item-font-weight-selected);\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--instui-component-options-item-padding-horizontal) center;\n background-size: 1rem 1rem;\n padding-inline-end: calc(var(--instui-component-options-item-padding-horizontal) + 1.5rem);\n }\n}\n",
359
+ "canvas": "/* Experimental: CSS Customizable Select (`appearance: base-select`, Chrome 135+, not yet Baseline).\n Enhances .pfx-simple-select; degrades to the plain control where unsupported. */\n@supports (appearance: base-select) {\n .pfx-simple-select,\n .pfx-simple-select::picker(select) {\n appearance: base-select;\n }\n /* Keep simple-select's own background-image caret; hide the UA-generated picker icon. */\n .pfx-simple-select::picker-icon {\n display: none;\n }\n .pfx-simple-select::picker(select) {\n border: var(--instui-component-select-popover-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-border-radius-lg);\n box-shadow: var(--instui-elevation-topmost);\n background-color: var(--instui-component-options-item-background);\n padding: 0;\n margin: 0;\n overflow: hidden;\n }\n .pfx-simple-select option {\n padding: var(--instui-component-options-item-padding-vertical)\n var(--instui-component-options-item-padding-horizontal);\n background-color: var(--instui-component-options-item-background);\n color: var(--instui-component-options-item-color);\n font-family: var(--instui-component-options-item-font-family);\n font-weight: var(--instui-component-options-item-font-weight);\n font-size: var(--instui-component-options-item-font-size);\n line-height: var(--instui-component-options-item-line-height);\n cursor: pointer;\n }\n /* Hide the UA checkmark; the selected row gets our own trailing check via background-image. */\n .pfx-simple-select option::checkmark {\n display: none;\n }\n .pfx-simple-select option:hover,\n .pfx-simple-select option:focus {\n background-color: var(--instui-component-options-item-highlighted-background);\n color: var(--instui-component-options-item-highlighted-label-color);\n outline: none;\n }\n .pfx-simple-select option:checked {\n background-color: var(--instui-component-options-item-selected-background);\n color: var(--instui-component-options-item-selected-label-color);\n font-weight: var(--instui-component-options-item-font-weight-selected);\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--instui-component-options-item-padding-horizontal) center;\n background-size: 1rem 1rem;\n padding-inline-end: calc(var(--instui-component-options-item-padding-horizontal) + 1.5rem);\n }\n}\n",
360
+ "canvasHighContrast": "/* Experimental: CSS Customizable Select (`appearance: base-select`, Chrome 135+, not yet Baseline).\n Enhances .pfx-simple-select; degrades to the plain control where unsupported. */\n@supports (appearance: base-select) {\n .pfx-simple-select,\n .pfx-simple-select::picker(select) {\n appearance: base-select;\n }\n /* Keep simple-select's own background-image caret; hide the UA-generated picker icon. */\n .pfx-simple-select::picker-icon {\n display: none;\n }\n .pfx-simple-select::picker(select) {\n border: var(--instui-component-select-popover-border-width) solid\n var(--instui-component-text-input-border-color);\n border-radius: var(--instui-border-radius-lg);\n box-shadow: var(--instui-elevation-topmost);\n background-color: var(--instui-component-options-item-background);\n padding: 0;\n margin: 0;\n overflow: hidden;\n }\n .pfx-simple-select option {\n padding: var(--instui-component-options-item-padding-vertical)\n var(--instui-component-options-item-padding-horizontal);\n background-color: var(--instui-component-options-item-background);\n color: var(--instui-component-options-item-color);\n font-family: var(--instui-component-options-item-font-family);\n font-weight: var(--instui-component-options-item-font-weight);\n font-size: var(--instui-component-options-item-font-size);\n line-height: var(--instui-component-options-item-line-height);\n cursor: pointer;\n }\n /* Hide the UA checkmark; the selected row gets our own trailing check via background-image. */\n .pfx-simple-select option::checkmark {\n display: none;\n }\n .pfx-simple-select option:hover,\n .pfx-simple-select option:focus {\n background-color: var(--instui-component-options-item-highlighted-background);\n color: var(--instui-component-options-item-highlighted-label-color);\n outline: none;\n }\n .pfx-simple-select option:checked {\n background-color: var(--instui-component-options-item-selected-background);\n color: var(--instui-component-options-item-selected-label-color);\n font-weight: var(--instui-component-options-item-font-weight-selected);\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--instui-component-options-item-padding-horizontal) center;\n background-size: 1rem 1rem;\n padding-inline-end: calc(var(--instui-component-options-item-padding-horizontal) + 1.5rem);\n }\n}\n"
361
+ }.rebrand;
362
+ const sideNavBar$1 = {
363
+ "rebrand": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @modifier -minimized — Collapse to icons only (labels hidden).\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .item — A navigation entry; `-selected` marks the active one.\n * @part .label — An item's text label; hidden when the rail is minimized.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n * <a class=\"item -selected\" href=\"#\">\n * <span class=\"pfx-icon -icon-house\"></span>\n * <span class=\"label\">Home</span>\n * </a>\n * <a class=\"item\" href=\"#\">\n * <span class=\"pfx-icon -icon-inbox\"></span>\n * <span class=\"label\">Inbox</span>\n * </a>\n * <a class=\"item\" href=\"#\">\n * <span class=\"pfx-icon -icon-calendar\"></span>\n * <span class=\"label\">Calendar</span>\n * </a>\n * <a class=\"item\" href=\"#\">\n * <span class=\"pfx-icon -icon-settings\"></span>\n * <span class=\"label\">Settings</span>\n * </a>\n * </nav>\n * @structure\n * .pfx-side-nav-bar {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * .label {}\n * }\n * }\n */\n.pfx-side-nav-bar {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-side-nav-bar-content-gap);\n padding: var(--instui-component-side-nav-bar-content-margin);\n box-sizing: border-box;\n inline-size: fit-content;\n /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n block-size: 100%;\n min-block-size: 100%;\n background: var(--instui-component-side-nav-bar-background-color);\n color: var(--instui-component-side-nav-bar-font-color);\n font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n@scope (.pfx-side-nav-bar) {\n :scope > .item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--instui-spacing-space2xs);\n padding: var(--instui-component-side-nav-bar-item-content-padding);\n min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n color: var(--instui-component-side-nav-bar-item-font-color);\n background: var(--instui-component-side-nav-bar-item-background-color);\n border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n font-size: var(--instui-component-side-nav-bar-item-font-size);\n font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n line-height: var(--instui-component-side-nav-bar-item-line-height);\n text-align: center;\n text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n cursor: pointer;\n }\n\n :scope > .item [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .item:hover {\n background: var(--instui-component-side-nav-bar-item-hover-background-color);\n }\n\n :scope > .item.-selected {\n background: var(--instui-component-side-nav-bar-item-selected-background-color);\n color: var(--instui-component-side-nav-bar-item-selected-font-color);\n }\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n display: none;\n}\n",
364
+ "canvas": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @modifier -minimized — Collapse to icons only (labels hidden).\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .item — A navigation entry; `-selected` marks the active one.\n * @part .label — An item's text label; hidden when the rail is minimized.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n * <a class=\"item -selected\" href=\"#\">\n * <span class=\"pfx-icon -icon-house\"></span>\n * <span class=\"label\">Home</span>\n * </a>\n * <a class=\"item\" href=\"#\">\n * <span class=\"pfx-icon -icon-inbox\"></span>\n * <span class=\"label\">Inbox</span>\n * </a>\n * <a class=\"item\" href=\"#\">\n * <span class=\"pfx-icon -icon-calendar\"></span>\n * <span class=\"label\">Calendar</span>\n * </a>\n * <a class=\"item\" href=\"#\">\n * <span class=\"pfx-icon -icon-settings\"></span>\n * <span class=\"label\">Settings</span>\n * </a>\n * </nav>\n * @structure\n * .pfx-side-nav-bar {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * .label {}\n * }\n * }\n */\n.pfx-side-nav-bar {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-side-nav-bar-content-gap);\n padding: var(--instui-component-side-nav-bar-content-margin);\n box-sizing: border-box;\n inline-size: fit-content;\n /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n block-size: 100%;\n min-block-size: 100%;\n background: var(--instui-component-side-nav-bar-background-color);\n color: var(--instui-component-side-nav-bar-font-color);\n font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n@scope (.pfx-side-nav-bar) {\n :scope > .item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--instui-spacing-space2xs);\n padding: var(--instui-component-side-nav-bar-item-content-padding);\n min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n color: var(--instui-component-side-nav-bar-item-font-color);\n background: var(--instui-component-side-nav-bar-item-background-color);\n border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n font-size: var(--instui-component-side-nav-bar-item-font-size);\n font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n line-height: var(--instui-component-side-nav-bar-item-line-height);\n text-align: center;\n text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n cursor: pointer;\n }\n\n :scope > .item [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .item:hover {\n background: var(--instui-component-side-nav-bar-item-hover-background-color);\n }\n\n :scope > .item.-selected {\n background: var(--instui-component-side-nav-bar-item-selected-background-color);\n color: var(--instui-component-side-nav-bar-item-selected-font-color);\n }\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n display: none;\n}\n",
365
+ "canvasHighContrast": "/**\n * @component side-nav-bar\n * @summary A vertical navigation rail of icon-over-label items, with a minimized icons-only mode.\n * @modifier -minimized — Collapse to icons only (labels hidden).\n * @modifier -icon-* — Render a glyph icon in each nav item.\n * @part .item — A navigation entry; `-selected` marks the active one.\n * @part .label — An item's text label; hidden when the rail is minimized.\n * @a11y Label the `<nav>` with aria-label so it's announced as a named navigation landmark.\n * @example\n * <nav class=\"pfx-side-nav-bar\" aria-label=\"Primary\">\n * <a class=\"item -selected\" href=\"#\">\n * <span class=\"pfx-icon -icon-house\"></span>\n * <span class=\"label\">Home</span>\n * </a>\n * <a class=\"item\" href=\"#\">\n * <span class=\"pfx-icon -icon-inbox\"></span>\n * <span class=\"label\">Inbox</span>\n * </a>\n * <a class=\"item\" href=\"#\">\n * <span class=\"pfx-icon -icon-calendar\"></span>\n * <span class=\"label\">Calendar</span>\n * </a>\n * <a class=\"item\" href=\"#\">\n * <span class=\"pfx-icon -icon-settings\"></span>\n * <span class=\"label\">Settings</span>\n * </a>\n * </nav>\n * @structure\n * .pfx-side-nav-bar {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * .label {}\n * }\n * }\n */\n.pfx-side-nav-bar {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-side-nav-bar-content-gap);\n padding: var(--instui-component-side-nav-bar-content-margin);\n box-sizing: border-box;\n inline-size: fit-content;\n /* The rail sits on the page and runs full height (InstUI SideNavBar is 100% of its layout column). */\n block-size: 100%;\n min-block-size: 100%;\n background: var(--instui-component-side-nav-bar-background-color);\n color: var(--instui-component-side-nav-bar-font-color);\n font-family: var(--instui-component-side-nav-bar-item-font-family);\n}\n\n@scope (.pfx-side-nav-bar) {\n :scope > .item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--instui-spacing-space2xs);\n padding: var(--instui-component-side-nav-bar-item-content-padding);\n min-inline-size: var(--instui-component-side-nav-bar-minimized-width);\n color: var(--instui-component-side-nav-bar-item-font-color);\n background: var(--instui-component-side-nav-bar-item-background-color);\n border-radius: var(--instui-component-side-nav-bar-item-border-radius);\n font-size: var(--instui-component-side-nav-bar-item-font-size);\n font-weight: var(--instui-component-side-nav-bar-item-font-weight);\n line-height: var(--instui-component-side-nav-bar-item-line-height);\n text-align: center;\n text-decoration: var(--instui-component-side-nav-bar-item-link-text-decoration);\n cursor: pointer;\n }\n\n :scope > .item [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .item:hover {\n background: var(--instui-component-side-nav-bar-item-hover-background-color);\n }\n\n :scope > .item.-selected {\n background: var(--instui-component-side-nav-bar-item-selected-background-color);\n color: var(--instui-component-side-nav-bar-item-selected-font-color);\n }\n}\n\n/* minimized: a narrow rail — the icons stay, the labels are hidden. */\n.pfx-side-nav-bar.-minimized {\n inline-size: var(--instui-component-side-nav-bar-minimized-width);\n}\n\n.pfx-side-nav-bar.-minimized .item .label {\n display: none;\n}\n"
366
+ }.rebrand;
367
+ const spinner$1 = {
368
+ "rebrand": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * <span class=\"pfx-spinner -size-xs\" role=\"status\" aria-label=\"Loading\"></span>\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n.pfx-spinner {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n.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.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.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.pfx-spinner.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n}\n",
369
+ "canvas": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * <span class=\"pfx-spinner -size-xs\" role=\"status\" aria-label=\"Loading\"></span>\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n.pfx-spinner {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n.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.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.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.pfx-spinner.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n}\n",
370
+ "canvasHighContrast": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * <span class=\"pfx-spinner -size-xs\" role=\"status\" aria-label=\"Loading\"></span>\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n.pfx-spinner {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n.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.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.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.pfx-spinner.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n}\n"
371
+ }.rebrand;
372
+ const table$1 = {
373
+ "rebrand": "/**\n * @component table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`.\n * @modifier -hover — Highlight rows on hover.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`.\n * @pseudo ::before — Renders each cell's `data-label` as its column heading in the stacked layout.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n * <caption>Top-rated films</caption>\n * <thead>\n * <tr>\n * <th scope=\"col\">Rank</th>\n * <th scope=\"col\">Title</th>\n * <th scope=\"col\">Year</th>\n * <th scope=\"col\">Rating</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <th scope=\"row\">1</th>\n * <td>The Shawshank Redemption</td>\n * <td>1994</td>\n * <td>9.3</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">2</th>\n * <td>The Godfather</td>\n * <td>1972</td>\n * <td>9.2</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">3</th>\n * <td>The Godfather: Part II</td>\n * <td>1974</td>\n * <td>9.0</td>\n * </tr>\n * </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n * caption {}\n * thead {\n * tr {\n * th {}\n * }\n * }\n * tbody {\n * tr {\n * th {}\n * td {}\n * }\n * }\n * }\n */\n.pfx-table {\n border-collapse: collapse;\n width: 100%;\n background: var(--instui-component-table-background);\n color: var(--instui-component-table-color);\n font-family: var(--instui-component-table-font-family);\n font-size: var(--instui-component-table-font-size);\n}\n.pfx-table caption {\n text-align: start;\n padding: var(--instui-component-table-cell-padding-vertical)\n var(--instui-component-table-cell-padding-horizontal);\n color: var(--instui-component-table-col-header-color);\n font-weight: var(--instui-component-table-head-font-weight);\n}\n/* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n.pfx-table.-layout-fixed {\n table-layout: fixed;\n}\n.pfx-table thead {\n background: var(--instui-component-table-head-background);\n}\n.pfx-table th {\n text-align: start;\n background: var(--instui-component-table-col-header-background);\n color: var(--instui-component-table-col-header-color);\n font-weight: var(--instui-component-table-head-font-weight);\n line-height: var(--instui-component-table-col-header-line-height);\n padding: var(--instui-component-table-col-header-padding-vertical)\n var(--instui-component-table-col-header-padding-horizontal);\n}\n/* The column-header underline lives on the head only — a distinct 2px rule under the header row. */\n.pfx-table thead th {\n border-bottom: var(--instui-border-width-md) solid var(--instui-component-table-row-border-color);\n}\n/* A row-header cell (th scope=row) — styled from the row-header tokens, not the column-header ones. */\n.pfx-table tbody th,\n.pfx-table th[scope=\"row\"] {\n background: var(--instui-component-table-row-header-background);\n color: var(--instui-component-table-row-header-color);\n font-weight: var(--instui-component-table-row-header-font-weight);\n line-height: var(--instui-component-table-row-header-line-height);\n padding: var(--instui-component-table-row-header-padding-vertical)\n var(--instui-component-table-row-header-padding-horizontal);\n}\n.pfx-table td {\n color: var(--instui-component-table-cell-color);\n line-height: var(--instui-component-table-cell-line-height);\n padding: var(--instui-component-table-cell-padding-vertical)\n var(--instui-component-table-cell-padding-horizontal);\n}\n/* Body cells carry no border of their own — the separator lives on the row. Reset with tbody\n specificity (0,1,2) so a host stylesheet's cell borders (e.g. `.pantoken-prose td`, 0,1,1) can't leak\n in and double the row line (very visible in the stacked layout, where cells are display:block). */\n.pfx-table tbody td,\n.pfx-table tbody th {\n border: 0;\n}\n/* The row separator is a single border on the ROW (InstUI puts it there), so it's uniform across the\n row-header and data cells — no mismatched per-cell borders. */\n.pfx-table tbody tr {\n border-bottom: var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color);\n}\n/* hover=\"true\" (InstUI's opt-in `hover` prop): every row reserves a transparent 3px inline border and\n colours it with the brand hover-border on hover — a vertical bar on each edge, NOT a full box, and\n no layout shift. Only rows in a `.-hover` table react. */\n.pfx-table.-hover tbody tr {\n border-inline: 0.1875rem solid transparent;\n}\n.pfx-table.-hover tbody tr:hover {\n border-inline-color: var(--instui-component-table-row-hover-border-color);\n}\n/* layout=\"stacked\": each row becomes a card and cells stack, labelled by their column. InstUI does this\n by re-rendering the DOM; pure CSS can't pull the <th> text into each cell, so the author supplies a\n `data-label` per cell and it's shown via ::before. Always-on (toggle the class responsively). */\n.pfx-table.-layout-stacked thead {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n.pfx-table.-layout-stacked,\n.pfx-table.-layout-stacked tbody,\n.pfx-table.-layout-stacked tr,\n.pfx-table.-layout-stacked td,\n.pfx-table.-layout-stacked th {\n display: block;\n width: auto;\n}\n/* InstUI's stacked row is just padding + the single bottom-border separator (the row's existing\n border-bottom carries over) — NOT a full card box. */\n.pfx-table.-layout-stacked tbody tr {\n padding: var(--instui-component-table-row-padding-vertical)\n var(--instui-component-table-row-padding-horizontal);\n}\n.pfx-table.-layout-stacked tbody td[data-label]::before,\n.pfx-table.-layout-stacked tbody th[data-label]::before {\n content: attr(data-label);\n display: block;\n font-weight: var(--instui-component-table-head-font-weight);\n color: var(--instui-component-table-col-header-color);\n}\n",
374
+ "canvas": "/**\n * @component table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`.\n * @modifier -hover — Highlight rows on hover.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`.\n * @pseudo ::before — Renders each cell's `data-label` as its column heading in the stacked layout.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n * <caption>Top-rated films</caption>\n * <thead>\n * <tr>\n * <th scope=\"col\">Rank</th>\n * <th scope=\"col\">Title</th>\n * <th scope=\"col\">Year</th>\n * <th scope=\"col\">Rating</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <th scope=\"row\">1</th>\n * <td>The Shawshank Redemption</td>\n * <td>1994</td>\n * <td>9.3</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">2</th>\n * <td>The Godfather</td>\n * <td>1972</td>\n * <td>9.2</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">3</th>\n * <td>The Godfather: Part II</td>\n * <td>1974</td>\n * <td>9.0</td>\n * </tr>\n * </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n * caption {}\n * thead {\n * tr {\n * th {}\n * }\n * }\n * tbody {\n * tr {\n * th {}\n * td {}\n * }\n * }\n * }\n */\n.pfx-table {\n border-collapse: collapse;\n width: 100%;\n background: var(--instui-component-table-background);\n color: var(--instui-component-table-color);\n font-family: var(--instui-component-table-font-family);\n font-size: var(--instui-component-table-font-size);\n}\n.pfx-table caption {\n text-align: start;\n padding: var(--instui-component-table-cell-padding-vertical)\n var(--instui-component-table-cell-padding-horizontal);\n color: var(--instui-component-table-col-header-color);\n font-weight: var(--instui-component-table-head-font-weight);\n}\n/* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n.pfx-table.-layout-fixed {\n table-layout: fixed;\n}\n.pfx-table thead {\n background: var(--instui-component-table-head-background);\n}\n.pfx-table th {\n text-align: start;\n background: var(--instui-component-table-col-header-background);\n color: var(--instui-component-table-col-header-color);\n font-weight: var(--instui-component-table-head-font-weight);\n line-height: var(--instui-component-table-col-header-line-height);\n padding: var(--instui-component-table-col-header-padding-vertical)\n var(--instui-component-table-col-header-padding-horizontal);\n}\n/* The column-header underline lives on the head only — a distinct 2px rule under the header row. */\n.pfx-table thead th {\n border-bottom: var(--instui-border-width-md) solid var(--instui-component-table-row-border-color);\n}\n/* A row-header cell (th scope=row) — styled from the row-header tokens, not the column-header ones. */\n.pfx-table tbody th,\n.pfx-table th[scope=\"row\"] {\n background: var(--instui-component-table-row-header-background);\n color: var(--instui-component-table-row-header-color);\n font-weight: var(--instui-component-table-row-header-font-weight);\n line-height: var(--instui-component-table-row-header-line-height);\n padding: var(--instui-component-table-row-header-padding-vertical)\n var(--instui-component-table-row-header-padding-horizontal);\n}\n.pfx-table td {\n color: var(--instui-component-table-cell-color);\n line-height: var(--instui-component-table-cell-line-height);\n padding: var(--instui-component-table-cell-padding-vertical)\n var(--instui-component-table-cell-padding-horizontal);\n}\n/* Body cells carry no border of their own — the separator lives on the row. Reset with tbody\n specificity (0,1,2) so a host stylesheet's cell borders (e.g. `.pantoken-prose td`, 0,1,1) can't leak\n in and double the row line (very visible in the stacked layout, where cells are display:block). */\n.pfx-table tbody td,\n.pfx-table tbody th {\n border: 0;\n}\n/* The row separator is a single border on the ROW (InstUI puts it there), so it's uniform across the\n row-header and data cells — no mismatched per-cell borders. */\n.pfx-table tbody tr {\n border-bottom: var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color);\n}\n/* hover=\"true\" (InstUI's opt-in `hover` prop): every row reserves a transparent 3px inline border and\n colours it with the brand hover-border on hover — a vertical bar on each edge, NOT a full box, and\n no layout shift. Only rows in a `.-hover` table react. */\n.pfx-table.-hover tbody tr {\n border-inline: 0.1875rem solid transparent;\n}\n.pfx-table.-hover tbody tr:hover {\n border-inline-color: var(--instui-component-table-row-hover-border-color);\n}\n/* layout=\"stacked\": each row becomes a card and cells stack, labelled by their column. InstUI does this\n by re-rendering the DOM; pure CSS can't pull the <th> text into each cell, so the author supplies a\n `data-label` per cell and it's shown via ::before. Always-on (toggle the class responsively). */\n.pfx-table.-layout-stacked thead {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n.pfx-table.-layout-stacked,\n.pfx-table.-layout-stacked tbody,\n.pfx-table.-layout-stacked tr,\n.pfx-table.-layout-stacked td,\n.pfx-table.-layout-stacked th {\n display: block;\n width: auto;\n}\n/* InstUI's stacked row is just padding + the single bottom-border separator (the row's existing\n border-bottom carries over) — NOT a full card box. */\n.pfx-table.-layout-stacked tbody tr {\n padding: var(--instui-component-table-row-padding-vertical)\n var(--instui-component-table-row-padding-horizontal);\n}\n.pfx-table.-layout-stacked tbody td[data-label]::before,\n.pfx-table.-layout-stacked tbody th[data-label]::before {\n content: attr(data-label);\n display: block;\n font-weight: var(--instui-component-table-head-font-weight);\n color: var(--instui-component-table-col-header-color);\n}\n",
375
+ "canvasHighContrast": "/**\n * @component table\n * @summary A styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts.\n * @remarks For `-layout-stacked`, pure CSS can't pull each column header's text into its cell, so give every cell a `data-label` and the stacked card shows it via `::before`.\n * @modifier -hover — Highlight rows on hover.\n * @modifier -layout-fixed — Fixed table layout (equal-width columns).\n * @modifier -layout-stacked — Stack each row as a card, via a per-cell `data-label`.\n * @pseudo ::before — Renders each cell's `data-label` as its column heading in the stacked layout.\n * @accessibility Label the table with a `<caption>`, mark column headers `<th scope=\"col\">` and row headers `<th scope=\"row\">`, and in `-layout-stacked` give every cell a `data-label` since the header row is visually hidden.\n * @example\n * <table class=\"pfx-table -hover\">\n * <caption>Top-rated films</caption>\n * <thead>\n * <tr>\n * <th scope=\"col\">Rank</th>\n * <th scope=\"col\">Title</th>\n * <th scope=\"col\">Year</th>\n * <th scope=\"col\">Rating</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <th scope=\"row\">1</th>\n * <td>The Shawshank Redemption</td>\n * <td>1994</td>\n * <td>9.3</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">2</th>\n * <td>The Godfather</td>\n * <td>1972</td>\n * <td>9.2</td>\n * </tr>\n * <tr>\n * <th scope=\"row\">3</th>\n * <td>The Godfather: Part II</td>\n * <td>1974</td>\n * <td>9.0</td>\n * </tr>\n * </tbody>\n * </table>\n * @structure\n * .pfx-table.-hover {\n * caption {}\n * thead {\n * tr {\n * th {}\n * }\n * }\n * tbody {\n * tr {\n * th {}\n * td {}\n * }\n * }\n * }\n */\n.pfx-table {\n border-collapse: collapse;\n width: 100%;\n background: var(--instui-component-table-background);\n color: var(--instui-component-table-color);\n font-family: var(--instui-component-table-font-family);\n font-size: var(--instui-component-table-font-size);\n}\n.pfx-table caption {\n text-align: start;\n padding: var(--instui-component-table-cell-padding-vertical)\n var(--instui-component-table-cell-padding-horizontal);\n color: var(--instui-component-table-col-header-color);\n font-weight: var(--instui-component-table-head-font-weight);\n}\n/* layout=\"fixed\": columns size to the header/first row, not content (InstUI `layout`). */\n.pfx-table.-layout-fixed {\n table-layout: fixed;\n}\n.pfx-table thead {\n background: var(--instui-component-table-head-background);\n}\n.pfx-table th {\n text-align: start;\n background: var(--instui-component-table-col-header-background);\n color: var(--instui-component-table-col-header-color);\n font-weight: var(--instui-component-table-head-font-weight);\n line-height: var(--instui-component-table-col-header-line-height);\n padding: var(--instui-component-table-col-header-padding-vertical)\n var(--instui-component-table-col-header-padding-horizontal);\n}\n/* The column-header underline lives on the head only — a distinct 2px rule under the header row. */\n.pfx-table thead th {\n border-bottom: var(--instui-border-width-md) solid var(--instui-component-table-row-border-color);\n}\n/* A row-header cell (th scope=row) — styled from the row-header tokens, not the column-header ones. */\n.pfx-table tbody th,\n.pfx-table th[scope=\"row\"] {\n background: var(--instui-component-table-row-header-background);\n color: var(--instui-component-table-row-header-color);\n font-weight: var(--instui-component-table-row-header-font-weight);\n line-height: var(--instui-component-table-row-header-line-height);\n padding: var(--instui-component-table-row-header-padding-vertical)\n var(--instui-component-table-row-header-padding-horizontal);\n}\n.pfx-table td {\n color: var(--instui-component-table-cell-color);\n line-height: var(--instui-component-table-cell-line-height);\n padding: var(--instui-component-table-cell-padding-vertical)\n var(--instui-component-table-cell-padding-horizontal);\n}\n/* Body cells carry no border of their own — the separator lives on the row. Reset with tbody\n specificity (0,1,2) so a host stylesheet's cell borders (e.g. `.pantoken-prose td`, 0,1,1) can't leak\n in and double the row line (very visible in the stacked layout, where cells are display:block). */\n.pfx-table tbody td,\n.pfx-table tbody th {\n border: 0;\n}\n/* The row separator is a single border on the ROW (InstUI puts it there), so it's uniform across the\n row-header and data cells — no mismatched per-cell borders. */\n.pfx-table tbody tr {\n border-bottom: var(--instui-border-width-sm) solid var(--instui-component-table-row-border-color);\n}\n/* hover=\"true\" (InstUI's opt-in `hover` prop): every row reserves a transparent 3px inline border and\n colours it with the brand hover-border on hover — a vertical bar on each edge, NOT a full box, and\n no layout shift. Only rows in a `.-hover` table react. */\n.pfx-table.-hover tbody tr {\n border-inline: 0.1875rem solid transparent;\n}\n.pfx-table.-hover tbody tr:hover {\n border-inline-color: var(--instui-component-table-row-hover-border-color);\n}\n/* layout=\"stacked\": each row becomes a card and cells stack, labelled by their column. InstUI does this\n by re-rendering the DOM; pure CSS can't pull the <th> text into each cell, so the author supplies a\n `data-label` per cell and it's shown via ::before. Always-on (toggle the class responsively). */\n.pfx-table.-layout-stacked thead {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n.pfx-table.-layout-stacked,\n.pfx-table.-layout-stacked tbody,\n.pfx-table.-layout-stacked tr,\n.pfx-table.-layout-stacked td,\n.pfx-table.-layout-stacked th {\n display: block;\n width: auto;\n}\n/* InstUI's stacked row is just padding + the single bottom-border separator (the row's existing\n border-bottom carries over) — NOT a full card box. */\n.pfx-table.-layout-stacked tbody tr {\n padding: var(--instui-component-table-row-padding-vertical)\n var(--instui-component-table-row-padding-horizontal);\n}\n.pfx-table.-layout-stacked tbody td[data-label]::before,\n.pfx-table.-layout-stacked tbody th[data-label]::before {\n content: attr(data-label);\n display: block;\n font-weight: var(--instui-component-table-head-font-weight);\n color: var(--instui-component-table-col-header-color);\n}\n"
376
+ }.rebrand;
377
+ const tabs$1 = {
378
+ "rebrand": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks Selected and disabled styling matches either the `-selected`/`-disabled` class or the `aria-selected`/`aria-disabled` attribute, so you can drive state from markup or from ARIA.\n * @part .list — The row of tabs.\n * @part .tab — A single tab; `-selected` marks the active one.\n * @part .panel — The content panel for a tab.\n * @cssstate selected\n * @cssstate disabled\n * @cssstate hidden\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n * <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n * <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n * <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n * </div>\n * <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n * .list {\n * .tab {}\n * }\n * .panel {}\n * }\n */\n.pfx-tabs {\n display: flex;\n flex-direction: column;\n background: var(--instui-component-tabs-default-background);\n}\n@scope (.pfx-tabs) {\n :scope > .list {\n display: flex;\n width: 100%;\n flex-flow: row wrap;\n }\n :scope.-overflow-scroll > .list {\n flex-wrap: nowrap;\n overflow-x: auto;\n scrollbar-width: none;\n }\n :scope.-overflow-scroll > .list::-webkit-scrollbar {\n display: none;\n }\n .tab {\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n border: 0;\n color: var(--instui-component-tabs-tab-default-text-color);\n font-family: var(--instui-component-tabs-tab-font-family);\n font-size: var(--instui-component-tabs-tab-font-size);\n font-weight: var(--instui-component-tabs-tab-font-weight);\n line-height: 1;\n padding: 1rem 1.25rem;\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n position: relative;\n z-index: 1;\n /* Layout-stable underline: always 0.25rem, coloured only when hovered or selected. */\n border-bottom: 0.25rem solid transparent;\n margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n }\n .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n [aria-disabled=\"true\"]\n ) {\n border-bottom-color: var(--instui-component-tabs-tab-default-hover-border-color);\n }\n .tab.-selected,\n .tab[aria-selected=\"true\"] {\n border-bottom-color: var(--instui-component-tabs-tab-default-selected-border-color);\n }\n .tab.-disabled,\n .tab[aria-disabled=\"true\"],\n .tab:disabled {\n opacity: 0.5;\n font-weight: normal;\n cursor: default;\n }\n /* Secondary variant: rounded \"folder\" tabs; the selected tab's bottom border matches the panel\n background so it visually connects into the panel below. */\n :scope.-variant-secondary .tab {\n padding: 0.75rem 1rem;\n line-height: var(--instui-component-tabs-tab-line-height);\n color: var(--instui-component-tabs-tab-secondary-text-color);\n margin-inline-end: 0.2em;\n margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n border: var(--instui-component-tabs-panel-border-width) solid transparent;\n border-radius: 0.1875rem 0.1875rem 0 0;\n }\n :scope.-variant-secondary .tab:first-of-type {\n margin-inline-start: 0;\n }\n :scope.-variant-secondary\n .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n [aria-disabled=\"true\"]\n ) {\n background: var(--instui-component-tabs-tab-secondary-selected-background);\n border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n }\n :scope.-variant-secondary .tab.-selected,\n :scope.-variant-secondary .tab[aria-selected=\"true\"] {\n background: var(--instui-component-tabs-tab-secondary-selected-background);\n border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n border-bottom-color: var(--instui-component-tabs-tab-secondary-selected-background);\n color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n }\n :scope > .panel {\n box-sizing: border-box;\n border-top: var(--instui-component-tabs-panel-border-width) solid\n var(--instui-component-tabs-panel-border-color);\n background: var(--instui-component-tabs-panel-background);\n color: var(--instui-component-tabs-panel-text-color);\n font-family: var(--instui-component-tabs-panel-font-family);\n font-size: var(--instui-component-tabs-panel-font-size);\n font-weight: var(--instui-component-tabs-panel-font-weight);\n line-height: var(--instui-component-tabs-panel-line-height);\n padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n var(--instui-spacing-space-md);\n }\n :scope > .panel[hidden] {\n display: none;\n }\n}\n",
379
+ "canvas": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks Selected and disabled styling matches either the `-selected`/`-disabled` class or the `aria-selected`/`aria-disabled` attribute, so you can drive state from markup or from ARIA.\n * @part .list — The row of tabs.\n * @part .tab — A single tab; `-selected` marks the active one.\n * @part .panel — The content panel for a tab.\n * @cssstate selected\n * @cssstate disabled\n * @cssstate hidden\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n * <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n * <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n * <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n * </div>\n * <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n * .list {\n * .tab {}\n * }\n * .panel {}\n * }\n */\n.pfx-tabs {\n display: flex;\n flex-direction: column;\n background: var(--instui-component-tabs-default-background);\n}\n@scope (.pfx-tabs) {\n :scope > .list {\n display: flex;\n width: 100%;\n flex-flow: row wrap;\n }\n :scope.-overflow-scroll > .list {\n flex-wrap: nowrap;\n overflow-x: auto;\n scrollbar-width: none;\n }\n :scope.-overflow-scroll > .list::-webkit-scrollbar {\n display: none;\n }\n .tab {\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n border: 0;\n color: var(--instui-component-tabs-tab-default-text-color);\n font-family: var(--instui-component-tabs-tab-font-family);\n font-size: var(--instui-component-tabs-tab-font-size);\n font-weight: var(--instui-component-tabs-tab-font-weight);\n line-height: 1;\n padding: 1rem 1.25rem;\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n position: relative;\n z-index: 1;\n /* Layout-stable underline: always 0.25rem, coloured only when hovered or selected. */\n border-bottom: 0.25rem solid transparent;\n margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n }\n .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n [aria-disabled=\"true\"]\n ) {\n border-bottom-color: var(--instui-component-tabs-tab-default-hover-border-color);\n }\n .tab.-selected,\n .tab[aria-selected=\"true\"] {\n border-bottom-color: var(--instui-component-tabs-tab-default-selected-border-color);\n }\n .tab.-disabled,\n .tab[aria-disabled=\"true\"],\n .tab:disabled {\n opacity: 0.5;\n font-weight: normal;\n cursor: default;\n }\n /* Secondary variant: rounded \"folder\" tabs; the selected tab's bottom border matches the panel\n background so it visually connects into the panel below. */\n :scope.-variant-secondary .tab {\n padding: 0.75rem 1rem;\n line-height: var(--instui-component-tabs-tab-line-height);\n color: var(--instui-component-tabs-tab-secondary-text-color);\n margin-inline-end: 0.2em;\n margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n border: var(--instui-component-tabs-panel-border-width) solid transparent;\n border-radius: 0.1875rem 0.1875rem 0 0;\n }\n :scope.-variant-secondary .tab:first-of-type {\n margin-inline-start: 0;\n }\n :scope.-variant-secondary\n .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n [aria-disabled=\"true\"]\n ) {\n background: var(--instui-component-tabs-tab-secondary-selected-background);\n border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n }\n :scope.-variant-secondary .tab.-selected,\n :scope.-variant-secondary .tab[aria-selected=\"true\"] {\n background: var(--instui-component-tabs-tab-secondary-selected-background);\n border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n border-bottom-color: var(--instui-component-tabs-tab-secondary-selected-background);\n color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n }\n :scope > .panel {\n box-sizing: border-box;\n border-top: var(--instui-component-tabs-panel-border-width) solid\n var(--instui-component-tabs-panel-border-color);\n background: var(--instui-component-tabs-panel-background);\n color: var(--instui-component-tabs-panel-text-color);\n font-family: var(--instui-component-tabs-panel-font-family);\n font-size: var(--instui-component-tabs-panel-font-size);\n font-weight: var(--instui-component-tabs-panel-font-weight);\n line-height: var(--instui-component-tabs-panel-line-height);\n padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n var(--instui-spacing-space-md);\n }\n :scope > .panel[hidden] {\n display: none;\n }\n}\n",
380
+ "canvasHighContrast": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks Selected and disabled styling matches either the `-selected`/`-disabled` class or the `aria-selected`/`aria-disabled` attribute, so you can drive state from markup or from ARIA.\n * @part .list — The row of tabs.\n * @part .tab — A single tab; `-selected` marks the active one.\n * @part .panel — The content panel for a tab.\n * @cssstate selected\n * @cssstate disabled\n * @cssstate hidden\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n * <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n * <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n * <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n * </div>\n * <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n * .list {\n * .tab {}\n * }\n * .panel {}\n * }\n */\n.pfx-tabs {\n display: flex;\n flex-direction: column;\n background: var(--instui-component-tabs-default-background);\n}\n@scope (.pfx-tabs) {\n :scope > .list {\n display: flex;\n width: 100%;\n flex-flow: row wrap;\n }\n :scope.-overflow-scroll > .list {\n flex-wrap: nowrap;\n overflow-x: auto;\n scrollbar-width: none;\n }\n :scope.-overflow-scroll > .list::-webkit-scrollbar {\n display: none;\n }\n .tab {\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n border: 0;\n color: var(--instui-component-tabs-tab-default-text-color);\n font-family: var(--instui-component-tabs-tab-font-family);\n font-size: var(--instui-component-tabs-tab-font-size);\n font-weight: var(--instui-component-tabs-tab-font-weight);\n line-height: 1;\n padding: 1rem 1.25rem;\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n position: relative;\n z-index: 1;\n /* Layout-stable underline: always 0.25rem, coloured only when hovered or selected. */\n border-bottom: 0.25rem solid transparent;\n margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n }\n .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n [aria-disabled=\"true\"]\n ) {\n border-bottom-color: var(--instui-component-tabs-tab-default-hover-border-color);\n }\n .tab.-selected,\n .tab[aria-selected=\"true\"] {\n border-bottom-color: var(--instui-component-tabs-tab-default-selected-border-color);\n }\n .tab.-disabled,\n .tab[aria-disabled=\"true\"],\n .tab:disabled {\n opacity: 0.5;\n font-weight: normal;\n cursor: default;\n }\n /* Secondary variant: rounded \"folder\" tabs; the selected tab's bottom border matches the panel\n background so it visually connects into the panel below. */\n :scope.-variant-secondary .tab {\n padding: 0.75rem 1rem;\n line-height: var(--instui-component-tabs-tab-line-height);\n color: var(--instui-component-tabs-tab-secondary-text-color);\n margin-inline-end: 0.2em;\n margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n border: var(--instui-component-tabs-panel-border-width) solid transparent;\n border-radius: 0.1875rem 0.1875rem 0 0;\n }\n :scope.-variant-secondary .tab:first-of-type {\n margin-inline-start: 0;\n }\n :scope.-variant-secondary\n .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n [aria-disabled=\"true\"]\n ) {\n background: var(--instui-component-tabs-tab-secondary-selected-background);\n border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n }\n :scope.-variant-secondary .tab.-selected,\n :scope.-variant-secondary .tab[aria-selected=\"true\"] {\n background: var(--instui-component-tabs-tab-secondary-selected-background);\n border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n border-bottom-color: var(--instui-component-tabs-tab-secondary-selected-background);\n color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n }\n :scope > .panel {\n box-sizing: border-box;\n border-top: var(--instui-component-tabs-panel-border-width) solid\n var(--instui-component-tabs-panel-border-color);\n background: var(--instui-component-tabs-panel-background);\n color: var(--instui-component-tabs-panel-text-color);\n font-family: var(--instui-component-tabs-panel-font-family);\n font-size: var(--instui-component-tabs-panel-font-size);\n font-weight: var(--instui-component-tabs-panel-font-weight);\n line-height: var(--instui-component-tabs-panel-line-height);\n padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n var(--instui-spacing-space-md);\n }\n :scope > .panel[hidden] {\n display: none;\n }\n}\n"
381
+ }.rebrand;
382
+ const tag$1 = {
383
+ "rebrand": "/**\n * @component tag\n * @summary An inline chip for a keyword or filter.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n.pfx-tag {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-tag-height-medium);\n max-width: var(--instui-component-tag-max-width);\n padding: 0 var(--instui-component-tag-padding-horizontal);\n background: var(--instui-component-tag-default-background);\n color: var(--instui-component-tag-default-color);\n border: var(--instui-component-tag-default-border-width)\n var(--instui-component-tag-default-border-style)\n var(--instui-component-tag-default-border-color);\n border-radius: var(--instui-component-tag-default-border-radius);\n font-family: var(--instui-component-tag-font-family);\n font-size: var(--instui-component-tag-font-size-medium);\n}\n.pfx-tag:hover {\n background: var(--instui-component-tag-default-background-hover);\n}\n.pfx-tag.-size-sm {\n height: var(--instui-component-tag-height-small);\n padding: 0 var(--instui-component-tag-padding-horizontal-small);\n font-size: var(--instui-component-tag-font-size-small);\n}\n.pfx-tag.-size-lg {\n height: var(--instui-component-tag-height-large);\n font-size: var(--instui-component-tag-font-size-large);\n}\n.pfx-tag.-inline {\n gap: var(--instui-spacing-space-xs);\n background: var(--instui-component-tag-inline-background);\n color: var(--instui-component-tag-inline-color);\n border-color: var(--instui-component-tag-inline-border-color);\n border-radius: var(--instui-component-tag-inline-border-radius);\n cursor: pointer;\n}\n.pfx-tag.-inline:hover {\n background: var(--instui-component-tag-inline-background-hover);\n}\n.pfx-tag.-inline::after {\n content: \"\";\n flex: none;\n width: 1em;\n height: 1em;\n background: var(--instui-component-tag-inline-icon-color);\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n}\n.pfx-tag.-inline:hover::after {\n background: var(--instui-component-tag-inline-icon-hover-color);\n}\n/* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n.pfx-tag.-readonly {\n cursor: default;\n background: var(--instui-component-tag-default-background);\n}\n.pfx-tag.-readonly.-inline::after {\n display: none;\n}\n",
384
+ "canvas": "/**\n * @component tag\n * @summary An inline chip for a keyword or filter.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n.pfx-tag {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-tag-height-medium);\n max-width: var(--instui-component-tag-max-width);\n padding: 0 var(--instui-component-tag-padding-horizontal);\n background: var(--instui-component-tag-default-background);\n color: var(--instui-component-tag-default-color);\n border: var(--instui-component-tag-default-border-width)\n var(--instui-component-tag-default-border-style)\n var(--instui-component-tag-default-border-color);\n border-radius: var(--instui-component-tag-default-border-radius);\n font-family: var(--instui-component-tag-font-family);\n font-size: var(--instui-component-tag-font-size-medium);\n}\n.pfx-tag:hover {\n background: var(--instui-component-tag-default-background-hover);\n}\n.pfx-tag.-size-sm {\n height: var(--instui-component-tag-height-small);\n padding: 0 var(--instui-component-tag-padding-horizontal-small);\n font-size: var(--instui-component-tag-font-size-small);\n}\n.pfx-tag.-size-lg {\n height: var(--instui-component-tag-height-large);\n font-size: var(--instui-component-tag-font-size-large);\n}\n.pfx-tag.-inline {\n gap: var(--instui-spacing-space-xs);\n background: var(--instui-component-tag-inline-background);\n color: var(--instui-component-tag-inline-color);\n border-color: var(--instui-component-tag-inline-border-color);\n border-radius: var(--instui-component-tag-inline-border-radius);\n cursor: pointer;\n}\n.pfx-tag.-inline:hover {\n background: var(--instui-component-tag-inline-background-hover);\n}\n.pfx-tag.-inline::after {\n content: \"\";\n flex: none;\n width: 1em;\n height: 1em;\n background: var(--instui-component-tag-inline-icon-color);\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n}\n.pfx-tag.-inline:hover::after {\n background: var(--instui-component-tag-inline-icon-hover-color);\n}\n/* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n.pfx-tag.-readonly {\n cursor: default;\n background: var(--instui-component-tag-default-background);\n}\n.pfx-tag.-readonly.-inline::after {\n display: none;\n}\n",
385
+ "canvasHighContrast": "/**\n * @component tag\n * @summary An inline chip for a keyword or filter.\n * @modifier -size-sm — A small tag.\n * @modifier -size-lg — A large tag.\n * @modifier -inline — Reads inline with text and gets a trailing dismiss glyph.\n * @modifier -readonly — Read-only (non-dismissable) tag.\n * @pseudo ::after — Renders the trailing dismiss glyph on a dismissible inline tag.\n * @example\n * <span class=\"pfx-tag -size-sm\">small</span>\n * @related pill — The read-only label-chip counterpart.\n * @demo self:tag\n */\n.pfx-tag {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-tag-height-medium);\n max-width: var(--instui-component-tag-max-width);\n padding: 0 var(--instui-component-tag-padding-horizontal);\n background: var(--instui-component-tag-default-background);\n color: var(--instui-component-tag-default-color);\n border: var(--instui-component-tag-default-border-width)\n var(--instui-component-tag-default-border-style)\n var(--instui-component-tag-default-border-color);\n border-radius: var(--instui-component-tag-default-border-radius);\n font-family: var(--instui-component-tag-font-family);\n font-size: var(--instui-component-tag-font-size-medium);\n}\n.pfx-tag:hover {\n background: var(--instui-component-tag-default-background-hover);\n}\n.pfx-tag.-size-sm {\n height: var(--instui-component-tag-height-small);\n padding: 0 var(--instui-component-tag-padding-horizontal-small);\n font-size: var(--instui-component-tag-font-size-small);\n}\n.pfx-tag.-size-lg {\n height: var(--instui-component-tag-height-large);\n font-size: var(--instui-component-tag-font-size-large);\n}\n.pfx-tag.-inline {\n gap: var(--instui-spacing-space-xs);\n background: var(--instui-component-tag-inline-background);\n color: var(--instui-component-tag-inline-color);\n border-color: var(--instui-component-tag-inline-border-color);\n border-radius: var(--instui-component-tag-inline-border-radius);\n cursor: pointer;\n}\n.pfx-tag.-inline:hover {\n background: var(--instui-component-tag-inline-background-hover);\n}\n.pfx-tag.-inline::after {\n content: \"\";\n flex: none;\n width: 1em;\n height: 1em;\n background: var(--instui-component-tag-inline-icon-color);\n -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n mask: var(--instui-icon-x) center / contain no-repeat;\n}\n.pfx-tag.-inline:hover::after {\n background: var(--instui-component-tag-inline-icon-hover-color);\n}\n/* readOnly (InstUI): a static tag — no hover affordance, and the dismiss glyph is dropped. */\n.pfx-tag.-readonly {\n cursor: default;\n background: var(--instui-component-tag-default-background);\n}\n.pfx-tag.-readonly.-inline::after {\n display: none;\n}\n"
386
+ }.rebrand;
387
+ const text$1 = {
388
+ "rebrand": "/**\n * @component text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — AI-accent text colour.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * <span class=\"pfx-text -size-xs\">x-small text</span>\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n */\n.pfx-text {\n font-family: var(--instui-component-text-content-font-family);\n color: var(--instui-component-text-base-color);\n font-size: var(--instui-component-text-font-size-medium);\n font-weight: var(--instui-component-text-font-weight-normal);\n line-height: var(--instui-component-text-content-line-height);\n}\n.pfx-text.-size-xs {\n font-size: var(--instui-component-text-font-size-x-small);\n}\n.pfx-text.-size-sm {\n font-size: var(--instui-component-text-font-size-small);\n}\n.pfx-text.-size-lg {\n font-size: var(--instui-component-text-font-size-large);\n}\n.pfx-text.-size-xl {\n font-size: var(--instui-component-text-font-size-x-large);\n}\n.pfx-text.-weight-bold {\n font-weight: var(--instui-component-text-font-weight-bold);\n}\n.pfx-text.-style-italic {\n font-style: italic;\n}\n.pfx-text.-color-secondary {\n color: var(--instui-component-text-muted-color);\n}\n.pfx-text.-color-brand {\n color: var(--instui-component-text-primary-color);\n}\n.pfx-text.-color-success {\n color: var(--instui-component-text-success-color);\n}\n.pfx-text.-color-danger {\n color: var(--instui-component-text-error-color);\n}\n.pfx-text.-color-warning {\n color: var(--instui-component-text-warning-color);\n}\n.pfx-text.-color-primary-inverse {\n color: var(--instui-component-text-inverse-color);\n}\n.pfx-text.-color-ai {\n color: var(--instui-component-text-ai-color);\n background: var(--instui-component-text-ai-background-color);\n}\n.pfx-text.-variant-description-page {\n font-size: var(--instui-component-text-description-page-font-size);\n line-height: var(--instui-component-text-description-page-line-height);\n}\n.pfx-text.-variant-description-section {\n font-size: var(--instui-component-text-description-section-font-size);\n line-height: var(--instui-component-text-description-section-line-height);\n}\n.pfx-text.-variant-content-small {\n font-size: var(--instui-component-text-content-small-font-size);\n line-height: var(--instui-component-text-content-small-line-height);\n}\n.pfx-text.-variant-legend {\n font-size: var(--instui-component-text-legend-font-size);\n line-height: var(--instui-component-text-legend-line-height);\n}\n.pfx-text.-transform-uppercase {\n text-transform: uppercase;\n}\n.pfx-text.-transform-lowercase {\n text-transform: lowercase;\n}\n.pfx-text.-transform-capitalize {\n text-transform: capitalize;\n}\n",
389
+ "canvas": "/**\n * @component text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — AI-accent text colour.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * <span class=\"pfx-text -size-xs\">x-small text</span>\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n */\n.pfx-text {\n font-family: var(--instui-component-text-content-font-family);\n color: var(--instui-component-text-base-color);\n font-size: var(--instui-component-text-font-size-medium);\n font-weight: var(--instui-component-text-font-weight-normal);\n line-height: var(--instui-component-text-content-line-height);\n}\n.pfx-text.-size-xs {\n font-size: var(--instui-component-text-font-size-x-small);\n}\n.pfx-text.-size-sm {\n font-size: var(--instui-component-text-font-size-small);\n}\n.pfx-text.-size-lg {\n font-size: var(--instui-component-text-font-size-large);\n}\n.pfx-text.-size-xl {\n font-size: var(--instui-component-text-font-size-x-large);\n}\n.pfx-text.-weight-bold {\n font-weight: var(--instui-component-text-font-weight-bold);\n}\n.pfx-text.-style-italic {\n font-style: italic;\n}\n.pfx-text.-color-secondary {\n color: var(--instui-component-text-muted-color);\n}\n.pfx-text.-color-brand {\n color: var(--instui-component-text-primary-color);\n}\n.pfx-text.-color-success {\n color: var(--instui-component-text-success-color);\n}\n.pfx-text.-color-danger {\n color: var(--instui-component-text-error-color);\n}\n.pfx-text.-color-warning {\n color: var(--instui-component-text-warning-color);\n}\n.pfx-text.-color-primary-inverse {\n color: var(--instui-component-text-inverse-color);\n}\n.pfx-text.-color-ai {\n color: var(--instui-component-text-ai-color);\n background: var(--instui-component-text-ai-background-color);\n}\n.pfx-text.-variant-description-page {\n font-size: var(--instui-component-text-description-page-font-size);\n line-height: var(--instui-component-text-description-page-line-height);\n}\n.pfx-text.-variant-description-section {\n font-size: var(--instui-component-text-description-section-font-size);\n line-height: var(--instui-component-text-description-section-line-height);\n}\n.pfx-text.-variant-content-small {\n font-size: var(--instui-component-text-content-small-font-size);\n line-height: var(--instui-component-text-content-small-line-height);\n}\n.pfx-text.-variant-legend {\n font-size: var(--instui-component-text-legend-font-size);\n line-height: var(--instui-component-text-legend-line-height);\n}\n.pfx-text.-transform-uppercase {\n text-transform: uppercase;\n}\n.pfx-text.-transform-lowercase {\n text-transform: lowercase;\n}\n.pfx-text.-transform-capitalize {\n text-transform: capitalize;\n}\n",
390
+ "canvasHighContrast": "/**\n * @component text\n * @summary Body-text typography with size, weight, colour, and style modifiers.\n * @modifier -color-brand — Brand text colour.\n * @modifier -color-secondary — Secondary (muted) text colour.\n * @modifier -color-ai — AI-accent text colour.\n * @modifier -color-success — Success text colour.\n * @modifier -color-warning — Warning text colour.\n * @modifier -color-danger — Danger text colour.\n * @modifier -color-primary-inverse — On-dark (primary inverse) text colour.\n * @modifier -weight-bold — Bold weight.\n * @modifier -style-italic — Italic.\n * @modifier -transform-uppercase — Uppercase the text.\n * @modifier -transform-lowercase — Lowercase the text.\n * @modifier -transform-capitalize — Capitalise each word.\n * @modifier -variant-content-small — Small-content type preset.\n * @modifier -variant-description-page — Page-description type preset.\n * @modifier -variant-description-section — Section-description type preset.\n * @modifier -variant-legend — Legend type preset.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @example\n * <span class=\"pfx-text -size-xs\">x-small text</span>\n * @related heading — Typography for headings rather than body text.\n * @related truncate — Clips this text to one line or a set number of lines.\n */\n.pfx-text {\n font-family: var(--instui-component-text-content-font-family);\n color: var(--instui-component-text-base-color);\n font-size: var(--instui-component-text-font-size-medium);\n font-weight: var(--instui-component-text-font-weight-normal);\n line-height: var(--instui-component-text-content-line-height);\n}\n.pfx-text.-size-xs {\n font-size: var(--instui-component-text-font-size-x-small);\n}\n.pfx-text.-size-sm {\n font-size: var(--instui-component-text-font-size-small);\n}\n.pfx-text.-size-lg {\n font-size: var(--instui-component-text-font-size-large);\n}\n.pfx-text.-size-xl {\n font-size: var(--instui-component-text-font-size-x-large);\n}\n.pfx-text.-weight-bold {\n font-weight: var(--instui-component-text-font-weight-bold);\n}\n.pfx-text.-style-italic {\n font-style: italic;\n}\n.pfx-text.-color-secondary {\n color: var(--instui-component-text-muted-color);\n}\n.pfx-text.-color-brand {\n color: var(--instui-component-text-primary-color);\n}\n.pfx-text.-color-success {\n color: var(--instui-component-text-success-color);\n}\n.pfx-text.-color-danger {\n color: var(--instui-component-text-error-color);\n}\n.pfx-text.-color-warning {\n color: var(--instui-component-text-warning-color);\n}\n.pfx-text.-color-primary-inverse {\n color: var(--instui-component-text-inverse-color);\n}\n.pfx-text.-color-ai {\n color: var(--instui-component-text-ai-color);\n background: var(--instui-component-text-ai-background-color);\n}\n.pfx-text.-variant-description-page {\n font-size: var(--instui-component-text-description-page-font-size);\n line-height: var(--instui-component-text-description-page-line-height);\n}\n.pfx-text.-variant-description-section {\n font-size: var(--instui-component-text-description-section-font-size);\n line-height: var(--instui-component-text-description-section-line-height);\n}\n.pfx-text.-variant-content-small {\n font-size: var(--instui-component-text-content-small-font-size);\n line-height: var(--instui-component-text-content-small-line-height);\n}\n.pfx-text.-variant-legend {\n font-size: var(--instui-component-text-legend-font-size);\n line-height: var(--instui-component-text-legend-line-height);\n}\n.pfx-text.-transform-uppercase {\n text-transform: uppercase;\n}\n.pfx-text.-transform-lowercase {\n text-transform: lowercase;\n}\n.pfx-text.-transform-capitalize {\n text-transform: capitalize;\n}\n"
391
+ }.rebrand;
392
+ const toggleDetails$1 = {
393
+ "rebrand": "/**\n * @component toggle-details\n * @summary A styled native `<details>` disclosure with a rotating chevron.\n * @remarks Built on the native `<details>` element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.\n * @modifier -variant-filled — Filled (surface) variant.\n * @modifier -chevron-end — Place the chevron after the summary.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-details\" open>\n * <summary>What ships in this package?</summary>\n * Class-based component styles, built from the Instructure tokens, plus a prose layer.\n * </details>\n * @structure\n * .pfx-toggle-details {\n * summary {}\n * }\n * @related toggle-group — The bordered, grouped form of the same disclosure.\n */\n.pfx-toggle-details {\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n}\n.pfx-toggle-details > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n font-size: var(--instui-component-toggle-details-font-size-medium);\n padding: var(--instui-component-toggle-details-toggle-padding);\n color: var(--instui-component-toggle-details-text-color);\n}\n/* Kill the native disclosure marker; we supply a rotating chevron. */\n.pfx-toggle-details > summary::-webkit-details-marker {\n display: none;\n}\n.pfx-toggle-details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n.pfx-toggle-details[open] > summary::before {\n transform: rotate(90deg);\n}\n/* iconPosition=\"end\" (named -chevron-end, NOT -icon-position-end — a \"-icon-\" class would collide with the\n generic [class*=\"-icon-\"] glyph painter): push the disclosure chevron to the inline-end. */\n.pfx-toggle-details.-chevron-end > summary::before {\n order: 1;\n margin-inline-start: auto;\n}\n/* variant=\"filled\": the summary reads as an action-secondary button. */\n.pfx-toggle-details.-variant-filled > summary {\n background: var(--instui-color-background-interactive-action-secondary-base);\n border-radius: var(--instui-component-toggle-details-toggle-border-radius);\n}\n.pfx-toggle-details > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-details.-size-sm > summary {\n font-size: var(--instui-component-toggle-details-font-size-small);\n}\n.pfx-toggle-details.-size-sm > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-details.-size-lg > summary {\n font-size: var(--instui-component-toggle-details-font-size-large);\n}\n.pfx-toggle-details.-size-lg > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-large);\n}\n",
394
+ "canvas": "/**\n * @component toggle-details\n * @summary A styled native `<details>` disclosure with a rotating chevron.\n * @remarks Built on the native `<details>` element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.\n * @modifier -variant-filled — Filled (surface) variant.\n * @modifier -chevron-end — Place the chevron after the summary.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-details\" open>\n * <summary>What ships in this package?</summary>\n * Class-based component styles, built from the Instructure tokens, plus a prose layer.\n * </details>\n * @structure\n * .pfx-toggle-details {\n * summary {}\n * }\n * @related toggle-group — The bordered, grouped form of the same disclosure.\n */\n.pfx-toggle-details {\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n}\n.pfx-toggle-details > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n font-size: var(--instui-component-toggle-details-font-size-medium);\n padding: var(--instui-component-toggle-details-toggle-padding);\n color: var(--instui-component-toggle-details-text-color);\n}\n/* Kill the native disclosure marker; we supply a rotating chevron. */\n.pfx-toggle-details > summary::-webkit-details-marker {\n display: none;\n}\n.pfx-toggle-details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n.pfx-toggle-details[open] > summary::before {\n transform: rotate(90deg);\n}\n/* iconPosition=\"end\" (named -chevron-end, NOT -icon-position-end — a \"-icon-\" class would collide with the\n generic [class*=\"-icon-\"] glyph painter): push the disclosure chevron to the inline-end. */\n.pfx-toggle-details.-chevron-end > summary::before {\n order: 1;\n margin-inline-start: auto;\n}\n/* variant=\"filled\": the summary reads as an action-secondary button. */\n.pfx-toggle-details.-variant-filled > summary {\n background: var(--instui-color-background-interactive-action-secondary-base);\n border-radius: var(--instui-component-toggle-details-toggle-border-radius);\n}\n.pfx-toggle-details > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-details.-size-sm > summary {\n font-size: var(--instui-component-toggle-details-font-size-small);\n}\n.pfx-toggle-details.-size-sm > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-details.-size-lg > summary {\n font-size: var(--instui-component-toggle-details-font-size-large);\n}\n.pfx-toggle-details.-size-lg > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-large);\n}\n",
395
+ "canvasHighContrast": "/**\n * @component toggle-details\n * @summary A styled native `<details>` disclosure with a rotating chevron.\n * @remarks Built on the native `<details>` element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.\n * @modifier -variant-filled — Filled (surface) variant.\n * @modifier -chevron-end — Place the chevron after the summary.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-details\" open>\n * <summary>What ships in this package?</summary>\n * Class-based component styles, built from the Instructure tokens, plus a prose layer.\n * </details>\n * @structure\n * .pfx-toggle-details {\n * summary {}\n * }\n * @related toggle-group — The bordered, grouped form of the same disclosure.\n */\n.pfx-toggle-details {\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n}\n.pfx-toggle-details > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n font-size: var(--instui-component-toggle-details-font-size-medium);\n padding: var(--instui-component-toggle-details-toggle-padding);\n color: var(--instui-component-toggle-details-text-color);\n}\n/* Kill the native disclosure marker; we supply a rotating chevron. */\n.pfx-toggle-details > summary::-webkit-details-marker {\n display: none;\n}\n.pfx-toggle-details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n.pfx-toggle-details[open] > summary::before {\n transform: rotate(90deg);\n}\n/* iconPosition=\"end\" (named -chevron-end, NOT -icon-position-end — a \"-icon-\" class would collide with the\n generic [class*=\"-icon-\"] glyph painter): push the disclosure chevron to the inline-end. */\n.pfx-toggle-details.-chevron-end > summary::before {\n order: 1;\n margin-inline-start: auto;\n}\n/* variant=\"filled\": the summary reads as an action-secondary button. */\n.pfx-toggle-details.-variant-filled > summary {\n background: var(--instui-color-background-interactive-action-secondary-base);\n border-radius: var(--instui-component-toggle-details-toggle-border-radius);\n}\n.pfx-toggle-details > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-details.-size-sm > summary {\n font-size: var(--instui-component-toggle-details-font-size-small);\n}\n.pfx-toggle-details.-size-sm > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-details.-size-lg > summary {\n font-size: var(--instui-component-toggle-details-font-size-large);\n}\n.pfx-toggle-details.-size-lg > :not(summary) {\n padding: var(--instui-component-toggle-details-content-padding-large);\n}\n"
396
+ }.rebrand;
397
+ const toggleGroup$1 = {
398
+ "rebrand": "/**\n * @component toggle-group\n * @summary A bordered disclosure built on `<details>`: a chevron summary row and collapsible content.\n * @remarks Built on the same native `<details>` foundation as toggle-details; put the `<summary>` first so it becomes the clickable header row and the rest is the collapsible content.\n * @modifier -without-border — Remove the border.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary row's disclosure chevron, a masked glyph that rotates to point down when the group is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-group\" open>\n * <summary>Advanced settings</summary>\n * <div>These options are revealed when the group is expanded. The header row carries a chevron that rotates on open, and the content sits below a divider.</div>\n * </details>\n * @structure\n * .pfx-toggle-group {\n * summary {}\n * div {}\n * }\n * @related toggle-details — The single, unbordered form of the same disclosure.\n */\n.pfx-toggle-group {\n display: block;\n border: var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);\n border-radius: var(--instui-border-radius-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n overflow: hidden;\n}\n.pfx-toggle-group > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n padding: var(--instui-component-toggle-details-content-padding-medium);\n font-size: var(--instui-component-toggle-details-font-size-medium);\n}\n.pfx-toggle-group > summary::-webkit-details-marker {\n display: none;\n}\n.pfx-toggle-group > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n.pfx-toggle-group[open] > summary::before {\n transform: rotate(90deg);\n}\n/* the collapsible content: separated from the header by a top border in the group colour */\n.pfx-toggle-group > :not(summary) {\n border-block-start: var(--instui-border-width-sm) solid\n var(--instui-component-toggle-group-border-color);\n padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-group.-size-sm > summary,\n.pfx-toggle-group.-size-sm > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-small);\n padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-group.-size-lg > summary,\n.pfx-toggle-group.-size-lg > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-large);\n padding: var(--instui-component-toggle-details-content-padding-large);\n}\n/* border={false} */\n.pfx-toggle-group.-without-border {\n border: 0;\n}\n.pfx-toggle-group.-without-border > :not(summary) {\n border-block-start: 0;\n}\n",
399
+ "canvas": "/**\n * @component toggle-group\n * @summary A bordered disclosure built on `<details>`: a chevron summary row and collapsible content.\n * @remarks Built on the same native `<details>` foundation as toggle-details; put the `<summary>` first so it becomes the clickable header row and the rest is the collapsible content.\n * @modifier -without-border — Remove the border.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary row's disclosure chevron, a masked glyph that rotates to point down when the group is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-group\" open>\n * <summary>Advanced settings</summary>\n * <div>These options are revealed when the group is expanded. The header row carries a chevron that rotates on open, and the content sits below a divider.</div>\n * </details>\n * @structure\n * .pfx-toggle-group {\n * summary {}\n * div {}\n * }\n * @related toggle-details — The single, unbordered form of the same disclosure.\n */\n.pfx-toggle-group {\n display: block;\n border: var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);\n border-radius: var(--instui-border-radius-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n overflow: hidden;\n}\n.pfx-toggle-group > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n padding: var(--instui-component-toggle-details-content-padding-medium);\n font-size: var(--instui-component-toggle-details-font-size-medium);\n}\n.pfx-toggle-group > summary::-webkit-details-marker {\n display: none;\n}\n.pfx-toggle-group > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n.pfx-toggle-group[open] > summary::before {\n transform: rotate(90deg);\n}\n/* the collapsible content: separated from the header by a top border in the group colour */\n.pfx-toggle-group > :not(summary) {\n border-block-start: var(--instui-border-width-sm) solid\n var(--instui-component-toggle-group-border-color);\n padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-group.-size-sm > summary,\n.pfx-toggle-group.-size-sm > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-small);\n padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-group.-size-lg > summary,\n.pfx-toggle-group.-size-lg > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-large);\n padding: var(--instui-component-toggle-details-content-padding-large);\n}\n/* border={false} */\n.pfx-toggle-group.-without-border {\n border: 0;\n}\n.pfx-toggle-group.-without-border > :not(summary) {\n border-block-start: 0;\n}\n",
400
+ "canvasHighContrast": "/**\n * @component toggle-group\n * @summary A bordered disclosure built on `<details>`: a chevron summary row and collapsible content.\n * @remarks Built on the same native `<details>` foundation as toggle-details; put the `<summary>` first so it becomes the clickable header row and the rest is the collapsible content.\n * @modifier -without-border — Remove the border.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — Draws the summary row's disclosure chevron, a masked glyph that rotates to point down when the group is open.\n * @cssstate open\n * @example\n * <details class=\"pfx-toggle-group\" open>\n * <summary>Advanced settings</summary>\n * <div>These options are revealed when the group is expanded. The header row carries a chevron that rotates on open, and the content sits below a divider.</div>\n * </details>\n * @structure\n * .pfx-toggle-group {\n * summary {}\n * div {}\n * }\n * @related toggle-details — The single, unbordered form of the same disclosure.\n */\n.pfx-toggle-group {\n display: block;\n border: var(--instui-border-width-sm) solid var(--instui-component-toggle-group-border-color);\n border-radius: var(--instui-border-radius-md);\n background: var(--instui-color-background-elevated-surface-base);\n color: var(--instui-component-toggle-details-text-color);\n font-family: var(--instui-component-toggle-details-font-family);\n font-weight: var(--instui-component-toggle-details-font-weight);\n line-height: var(--instui-component-toggle-details-line-height);\n overflow: hidden;\n}\n.pfx-toggle-group > summary {\n display: flex;\n align-items: center;\n gap: var(--instui-component-toggle-details-icon-margin);\n cursor: pointer;\n list-style: none;\n padding: var(--instui-component-toggle-details-content-padding-medium);\n font-size: var(--instui-component-toggle-details-font-size-medium);\n}\n.pfx-toggle-group > summary::-webkit-details-marker {\n display: none;\n}\n.pfx-toggle-group > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n.pfx-toggle-group[open] > summary::before {\n transform: rotate(90deg);\n}\n/* the collapsible content: separated from the header by a top border in the group colour */\n.pfx-toggle-group > :not(summary) {\n border-block-start: var(--instui-border-width-sm) solid\n var(--instui-component-toggle-group-border-color);\n padding: var(--instui-component-toggle-details-content-padding-medium);\n}\n.pfx-toggle-group.-size-sm > summary,\n.pfx-toggle-group.-size-sm > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-small);\n padding: var(--instui-component-toggle-details-content-padding-small);\n}\n.pfx-toggle-group.-size-lg > summary,\n.pfx-toggle-group.-size-lg > :not(summary) {\n font-size: var(--instui-component-toggle-details-font-size-large);\n padding: var(--instui-component-toggle-details-content-padding-large);\n}\n/* border={false} */\n.pfx-toggle-group.-without-border {\n border: 0;\n}\n.pfx-toggle-group.-without-border > :not(summary) {\n border-block-start: 0;\n}\n"
401
+ }.rebrand;
402
+ const tooltip$1 = {
403
+ "rebrand": "/**\n * @component tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n * <span class=\"pfx-icon -icon-info\"></span>\n * <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * @structure\n * .pfx-tooltip {\n * [class*=\"-icon-\"]:optional {}\n * .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n.pfx-tooltip {\n position: relative;\n display: inline-flex;\n}\n\n@scope (.pfx-tooltip) {\n :scope > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .tip {\n position: absolute;\n z-index: 1;\n inset-block-end: 100%;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n margin-block-end: var(--instui-spacing-space-xs);\n padding: var(--instui-component-tooltip-padding);\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-sm);\n font-family: var(--instui-component-tooltip-font-family);\n font-size: var(--instui-component-tooltip-font-size);\n font-weight: var(--instui-component-tooltip-font-weight);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: opacity 0.15s ease;\n }\n}\n\n/* Show on hover or keyboard focus of the trigger. */\n.pfx-tooltip:hover > .tip,\n.pfx-tooltip:focus-within > .tip {\n opacity: 1;\n visibility: visible;\n}\n\n/* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n bubble to the other sides. */\n.pfx-tooltip > .tip.-placement-bottom {\n inset-block: 100% auto;\n margin-block: var(--instui-spacing-space-xs) 0;\n}\n\n.pfx-tooltip > .tip.-placement-start {\n inset-block-end: auto;\n inset-inline: auto 100%;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 var(--instui-spacing-space-xs) 0 0;\n}\n\n.pfx-tooltip > .tip.-placement-end {\n inset-block-end: auto;\n inset-inline: 100% auto;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 0 0 var(--instui-spacing-space-xs);\n}\n",
404
+ "canvas": "/**\n * @component tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n * <span class=\"pfx-icon -icon-info\"></span>\n * <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * @structure\n * .pfx-tooltip {\n * [class*=\"-icon-\"]:optional {}\n * .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n.pfx-tooltip {\n position: relative;\n display: inline-flex;\n}\n\n@scope (.pfx-tooltip) {\n :scope > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .tip {\n position: absolute;\n z-index: 1;\n inset-block-end: 100%;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n margin-block-end: var(--instui-spacing-space-xs);\n padding: var(--instui-component-tooltip-padding);\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-sm);\n font-family: var(--instui-component-tooltip-font-family);\n font-size: var(--instui-component-tooltip-font-size);\n font-weight: var(--instui-component-tooltip-font-weight);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: opacity 0.15s ease;\n }\n}\n\n/* Show on hover or keyboard focus of the trigger. */\n.pfx-tooltip:hover > .tip,\n.pfx-tooltip:focus-within > .tip {\n opacity: 1;\n visibility: visible;\n}\n\n/* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n bubble to the other sides. */\n.pfx-tooltip > .tip.-placement-bottom {\n inset-block: 100% auto;\n margin-block: var(--instui-spacing-space-xs) 0;\n}\n\n.pfx-tooltip > .tip.-placement-start {\n inset-block-end: auto;\n inset-inline: auto 100%;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 var(--instui-spacing-space-xs) 0 0;\n}\n\n.pfx-tooltip > .tip.-placement-end {\n inset-block-end: auto;\n inset-inline: 100% auto;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 0 0 var(--instui-spacing-space-xs);\n}\n",
405
+ "canvasHighContrast": "/**\n * @component tooltip\n * @summary A CSS hover and focus tooltip bubble, positionable on any side.\n * @modifier -icon-* — Render a trigger glyph icon next to the tooltip bubble.\n * @part .tip — The bubble; `-placement-*` sets its side.\n * @a11y Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".\n * @example\n * <span class=\"pfx-tooltip\" aria-describedby=\"tt-1\">\n * <span class=\"pfx-icon -icon-info\"></span>\n * <span class=\"tip\" id=\"tt-1\" role=\"tooltip\">Default placement is top</span>\n * </span>\n * @structure\n * .pfx-tooltip {\n * [class*=\"-icon-\"]:optional {}\n * .tip {}\n * }\n * @related popover — The larger, click-triggered anchored surface.\n * @related context-view — A related anchored surface with a pointer.\n */\n.pfx-tooltip {\n position: relative;\n display: inline-flex;\n}\n\n@scope (.pfx-tooltip) {\n :scope > [class*=\"-icon-\"] {\n line-height: 1;\n }\n\n :scope > .tip {\n position: absolute;\n z-index: 1;\n inset-block-end: 100%;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n margin-block-end: var(--instui-spacing-space-xs);\n padding: var(--instui-component-tooltip-padding);\n background: var(--instui-color-background-inverse);\n color: var(--instui-color-text-inverse);\n border-radius: var(--instui-border-radius-sm);\n font-family: var(--instui-component-tooltip-font-family);\n font-size: var(--instui-component-tooltip-font-size);\n font-weight: var(--instui-component-tooltip-font-weight);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: opacity 0.15s ease;\n }\n}\n\n/* Show on hover or keyboard focus of the trigger. */\n.pfx-tooltip:hover > .tip,\n.pfx-tooltip:focus-within > .tip {\n opacity: 1;\n visibility: visible;\n}\n\n/* Placement (authored on the .tip itself, matching the web-component): default is top; these move the\n bubble to the other sides. */\n.pfx-tooltip > .tip.-placement-bottom {\n inset-block: 100% auto;\n margin-block: var(--instui-spacing-space-xs) 0;\n}\n\n.pfx-tooltip > .tip.-placement-start {\n inset-block-end: auto;\n inset-inline: auto 100%;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 var(--instui-spacing-space-xs) 0 0;\n}\n\n.pfx-tooltip > .tip.-placement-end {\n inset-block-end: auto;\n inset-inline: 100% auto;\n top: 50%;\n transform: translateY(-50%);\n margin: 0 0 0 var(--instui-spacing-space-xs);\n}\n"
406
+ }.rebrand;
407
+ const tray$1 = {
408
+ "rebrand": "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * <div class=\"pfx-tray -size-sm\" id=\"tray-start\">\n * <div>\n * <strong>Filters</strong>\n * <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n * </div>\n * <p class=\"pfx-text -size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * @structure\n * .pfx-tray {\n * div {\n * strong {}\n * .pfx-close-button {}\n * }\n * .pfx-text {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n.pfx-tray {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: var(--instui-component-tray-width-md);\n max-inline-size: 100%;\n /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n height:fit-content; so the edge shadows fall outside the viewport. */\n block-size: auto;\n max-block-size: none;\n background: var(--instui-component-tray-background-color);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n padding: var(--instui-component-tray-padding);\n z-index: var(--instui-component-tray-z-index);\n box-shadow: var(--instui-elevation-topmost);\n}\n.pfx-tray.-placement-end {\n inset-inline: auto 0;\n}\n.pfx-tray.-placement-top {\n inset: 0 0 auto 0;\n inline-size: 100%;\n block-size: auto;\n}\n.pfx-tray.-placement-bottom {\n inset: auto 0 0 0;\n inline-size: 100%;\n block-size: auto;\n}\n.pfx-tray.-size-xs {\n inline-size: var(--instui-component-tray-width-xs);\n}\n.pfx-tray.-size-sm {\n inline-size: var(--instui-component-tray-width-sm);\n}\n.pfx-tray.-size-lg {\n inline-size: var(--instui-component-tray-width-lg);\n}\n.pfx-tray.-size-xl {\n inline-size: var(--instui-component-tray-width-xl);\n}\n[popover].pfx-tray {\n margin: 0;\n}\ndialog.pfx-tray {\n margin: 0;\n padding: var(--instui-component-tray-padding);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n/* Slide in from the docked edge on open (native popover + @starting-style, no JS). The transform is\n keyed to placement; inert where allow-discrete transitions aren't supported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-tray {\n transition:\n transform 0.2s ease,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n transform: translateX(0);\n }\n [popover].pfx-tray:not(:popover-open) {\n transform: translateX(-100%);\n }\n @starting-style {\n [popover].pfx-tray:popover-open {\n transform: translateX(-100%);\n }\n }\n [popover].pfx-tray.-placement-end:not(:popover-open) {\n transform: translateX(100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-end:popover-open {\n transform: translateX(100%);\n }\n }\n [popover].pfx-tray.-placement-top:not(:popover-open) {\n transform: translateY(-100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-top:popover-open {\n transform: translateY(-100%);\n }\n }\n [popover].pfx-tray.-placement-bottom:not(:popover-open) {\n transform: translateY(100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-bottom:popover-open {\n transform: translateY(100%);\n }\n }\n}\n",
409
+ "canvas": "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * <div class=\"pfx-tray -size-sm\" id=\"tray-start\">\n * <div>\n * <strong>Filters</strong>\n * <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n * </div>\n * <p class=\"pfx-text -size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * @structure\n * .pfx-tray {\n * div {\n * strong {}\n * .pfx-close-button {}\n * }\n * .pfx-text {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n.pfx-tray {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: var(--instui-component-tray-width-md);\n max-inline-size: 100%;\n /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n height:fit-content; so the edge shadows fall outside the viewport. */\n block-size: auto;\n max-block-size: none;\n background: var(--instui-component-tray-background-color);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n padding: var(--instui-component-tray-padding);\n z-index: var(--instui-component-tray-z-index);\n box-shadow: var(--instui-elevation-topmost);\n}\n.pfx-tray.-placement-end {\n inset-inline: auto 0;\n}\n.pfx-tray.-placement-top {\n inset: 0 0 auto 0;\n inline-size: 100%;\n block-size: auto;\n}\n.pfx-tray.-placement-bottom {\n inset: auto 0 0 0;\n inline-size: 100%;\n block-size: auto;\n}\n.pfx-tray.-size-xs {\n inline-size: var(--instui-component-tray-width-xs);\n}\n.pfx-tray.-size-sm {\n inline-size: var(--instui-component-tray-width-sm);\n}\n.pfx-tray.-size-lg {\n inline-size: var(--instui-component-tray-width-lg);\n}\n.pfx-tray.-size-xl {\n inline-size: var(--instui-component-tray-width-xl);\n}\n[popover].pfx-tray {\n margin: 0;\n}\ndialog.pfx-tray {\n margin: 0;\n padding: var(--instui-component-tray-padding);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n/* Slide in from the docked edge on open (native popover + @starting-style, no JS). The transform is\n keyed to placement; inert where allow-discrete transitions aren't supported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-tray {\n transition:\n transform 0.2s ease,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n transform: translateX(0);\n }\n [popover].pfx-tray:not(:popover-open) {\n transform: translateX(-100%);\n }\n @starting-style {\n [popover].pfx-tray:popover-open {\n transform: translateX(-100%);\n }\n }\n [popover].pfx-tray.-placement-end:not(:popover-open) {\n transform: translateX(100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-end:popover-open {\n transform: translateX(100%);\n }\n }\n [popover].pfx-tray.-placement-top:not(:popover-open) {\n transform: translateY(-100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-top:popover-open {\n transform: translateY(-100%);\n }\n }\n [popover].pfx-tray.-placement-bottom:not(:popover-open) {\n transform: translateY(100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-bottom:popover-open {\n transform: translateY(100%);\n }\n }\n}\n",
410
+ "canvasHighContrast": "/**\n * @component tray\n * @summary An edge-pinned panel that slides in from any side; a native `[popover]` or `<dialog>`.\n * @modifier -placement-top — Pin to the top edge.\n * @modifier -placement-bottom — Pin to the bottom edge.\n * @modifier -placement-end — Pin to the end (inline-end) edge.\n * @modifier -size-xs — Extra small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -size-xl — Extra large.\n * @compat Opens with the native `[popover]` API and `@starting-style`; the slide-in sits behind an `@supports (transition-behavior: allow-discrete)` guard, so browsers without it still open the tray, just without the slide.\n * @accessibility The tray is a dialog or popover surface, so name it with `aria-label` or `aria-labelledby`, and its close control carries an `aria-label` (the `.pfx-close-button` in the example uses `aria-label=\"Close\"`).\n * @example\n * <div class=\"pfx-tray -size-sm\" id=\"tray-start\">\n * <div>\n * <strong>Filters</strong>\n * <button class=\"pfx-close-button\" aria-label=\"Close\"></button>\n * </div>\n * <p class=\"pfx-text -size-sm\">A tray slides in from the start edge and fills the viewport height.</p>\n * </div>\n * @structure\n * .pfx-tray {\n * div {\n * strong {}\n * .pfx-close-button {}\n * }\n * .pfx-text {}\n * }\n * @related modal — The same dismissible overlay pattern, centred instead of edge-pinned.\n * @related popover — The generic top-layer surface this builds on.\n */\n.pfx-tray {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: var(--instui-component-tray-width-md);\n max-inline-size: 100%;\n /* block-size:auto lets inset-block:0 stretch it full height, overriding the UA popover's\n height:fit-content; so the edge shadows fall outside the viewport. */\n block-size: auto;\n max-block-size: none;\n background: var(--instui-component-tray-background-color);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n padding: var(--instui-component-tray-padding);\n z-index: var(--instui-component-tray-z-index);\n box-shadow: var(--instui-elevation-topmost);\n}\n.pfx-tray.-placement-end {\n inset-inline: auto 0;\n}\n.pfx-tray.-placement-top {\n inset: 0 0 auto 0;\n inline-size: 100%;\n block-size: auto;\n}\n.pfx-tray.-placement-bottom {\n inset: auto 0 0 0;\n inline-size: 100%;\n block-size: auto;\n}\n.pfx-tray.-size-xs {\n inline-size: var(--instui-component-tray-width-xs);\n}\n.pfx-tray.-size-sm {\n inline-size: var(--instui-component-tray-width-sm);\n}\n.pfx-tray.-size-lg {\n inline-size: var(--instui-component-tray-width-lg);\n}\n.pfx-tray.-size-xl {\n inline-size: var(--instui-component-tray-width-xl);\n}\n[popover].pfx-tray {\n margin: 0;\n}\ndialog.pfx-tray {\n margin: 0;\n padding: var(--instui-component-tray-padding);\n border: var(--instui-component-tray-border-width) solid var(--instui-component-tray-border-color);\n}\n/* Slide in from the docked edge on open (native popover + @starting-style, no JS). The transform is\n keyed to placement; inert where allow-discrete transitions aren't supported. */\n@supports (transition-behavior: allow-discrete) {\n [popover].pfx-tray {\n transition:\n transform 0.2s ease,\n overlay 0.2s allow-discrete,\n display 0.2s allow-discrete;\n transform: translateX(0);\n }\n [popover].pfx-tray:not(:popover-open) {\n transform: translateX(-100%);\n }\n @starting-style {\n [popover].pfx-tray:popover-open {\n transform: translateX(-100%);\n }\n }\n [popover].pfx-tray.-placement-end:not(:popover-open) {\n transform: translateX(100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-end:popover-open {\n transform: translateX(100%);\n }\n }\n [popover].pfx-tray.-placement-top:not(:popover-open) {\n transform: translateY(-100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-top:popover-open {\n transform: translateY(-100%);\n }\n }\n [popover].pfx-tray.-placement-bottom:not(:popover-open) {\n transform: translateY(100%);\n }\n @starting-style {\n [popover].pfx-tray.-placement-bottom:popover-open {\n transform: translateY(100%);\n }\n }\n}\n"
411
+ }.rebrand;
412
+ const treeBrowser$1 = {
413
+ "rebrand": "/**\n * @component tree-browser\n * @summary A disclosure tree of nested collections and leaf items, with rotating chevrons.\n * @remarks Each collection is a native `<details>`; nesting them inside one another builds the tree, and the browser handles opening and closing every branch.\n * @modifier -icon-* — Render folder/file glyph icons in summaries and leaf items.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .item — A leaf entry in the tree.\n * @pseudo ::before — Draws each collection's disclosure chevron, a masked glyph that rotates to point down when the branch is open.\n * @cssstate open\n * @a11y Mark the root with role=\"tree\" and each nested list with role=\"group\".\n * @example\n * <div class=\"pfx-tree-browser\" role=\"tree\">\n * <details open>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Course files</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Syllabus.pdf</a>\n * </li>\n * <li>\n * <details>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Week 1</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item -selected\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Reading.pdf</a>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Slides.pptx</a>\n * </li>\n * </ul>\n * </details>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Rubric.docx</a>\n * </li>\n * </ul>\n * </details>\n * </div>\n * @structure\n * .pfx-tree-browser {\n * details {\n * summary {\n * [class*=\"-icon-\"]:optional {}\n * }\n * ul {\n * li {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * }\n * }\n * @related menu — Both present nested, selectable entries.\n */\n.pfx-tree-browser {\n border-radius: var(--instui-component-tree-browser-border-radius);\n font-family: var(--instui-component-tree-browser-tree-collection-font-family);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n}\n\n/* A collection node (a <details><summary>) and a leaf (.item) share the button chrome. */\n.pfx-tree-browser details > summary,\n.pfx-tree-browser .item {\n display: flex;\n align-items: center;\n gap: var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-medium);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-medium);\n line-height: var(--instui-component-tree-browser-tree-button-text-line-height);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n border-radius: var(--instui-component-tree-browser-tree-button-border-radius);\n cursor: pointer;\n list-style: none;\n}\n\n.pfx-tree-browser details > summary [class*=\"-icon-\"],\n.pfx-tree-browser .item [class*=\"-icon-\"] {\n line-height: 1;\n}\n\n.pfx-tree-browser details > summary::-webkit-details-marker {\n display: none;\n}\n\n/* The disclosure chevron rotates open (same technique as toggle-details). */\n.pfx-tree-browser details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n\n.pfx-tree-browser details[open] > summary::before {\n transform: rotate(90deg);\n}\n\n.pfx-tree-browser details > summary:hover,\n.pfx-tree-browser .item:hover {\n background: var(--instui-component-tree-browser-tree-button-hover-background-color);\n color: var(--instui-component-tree-browser-tree-button-hover-text-color);\n}\n\n.pfx-tree-browser details > summary.-selected,\n.pfx-tree-browser .item.-selected {\n background: var(--instui-component-tree-browser-tree-button-selected-background-color);\n color: var(--instui-component-tree-browser-tree-button-selected-text-color);\n}\n\n/* Nested lists indent; the leaf list carries no bullets. */\n.pfx-tree-browser ul {\n margin: 0;\n padding-inline-start: var(--instui-component-tree-browser-tree-collection-base-spacing-medium);\n list-style: none;\n}\n\n.pfx-tree-browser.-size-sm details > summary,\n.pfx-tree-browser.-size-sm .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-small);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-small);\n}\n\n.pfx-tree-browser.-size-lg details > summary,\n.pfx-tree-browser.-size-lg .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-large);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-large);\n}\n",
414
+ "canvas": "/**\n * @component tree-browser\n * @summary A disclosure tree of nested collections and leaf items, with rotating chevrons.\n * @remarks Each collection is a native `<details>`; nesting them inside one another builds the tree, and the browser handles opening and closing every branch.\n * @modifier -icon-* — Render folder/file glyph icons in summaries and leaf items.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .item — A leaf entry in the tree.\n * @pseudo ::before — Draws each collection's disclosure chevron, a masked glyph that rotates to point down when the branch is open.\n * @cssstate open\n * @a11y Mark the root with role=\"tree\" and each nested list with role=\"group\".\n * @example\n * <div class=\"pfx-tree-browser\" role=\"tree\">\n * <details open>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Course files</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Syllabus.pdf</a>\n * </li>\n * <li>\n * <details>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Week 1</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item -selected\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Reading.pdf</a>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Slides.pptx</a>\n * </li>\n * </ul>\n * </details>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Rubric.docx</a>\n * </li>\n * </ul>\n * </details>\n * </div>\n * @structure\n * .pfx-tree-browser {\n * details {\n * summary {\n * [class*=\"-icon-\"]:optional {}\n * }\n * ul {\n * li {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * }\n * }\n * @related menu — Both present nested, selectable entries.\n */\n.pfx-tree-browser {\n border-radius: var(--instui-component-tree-browser-border-radius);\n font-family: var(--instui-component-tree-browser-tree-collection-font-family);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n}\n\n/* A collection node (a <details><summary>) and a leaf (.item) share the button chrome. */\n.pfx-tree-browser details > summary,\n.pfx-tree-browser .item {\n display: flex;\n align-items: center;\n gap: var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-medium);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-medium);\n line-height: var(--instui-component-tree-browser-tree-button-text-line-height);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n border-radius: var(--instui-component-tree-browser-tree-button-border-radius);\n cursor: pointer;\n list-style: none;\n}\n\n.pfx-tree-browser details > summary [class*=\"-icon-\"],\n.pfx-tree-browser .item [class*=\"-icon-\"] {\n line-height: 1;\n}\n\n.pfx-tree-browser details > summary::-webkit-details-marker {\n display: none;\n}\n\n/* The disclosure chevron rotates open (same technique as toggle-details). */\n.pfx-tree-browser details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n\n.pfx-tree-browser details[open] > summary::before {\n transform: rotate(90deg);\n}\n\n.pfx-tree-browser details > summary:hover,\n.pfx-tree-browser .item:hover {\n background: var(--instui-component-tree-browser-tree-button-hover-background-color);\n color: var(--instui-component-tree-browser-tree-button-hover-text-color);\n}\n\n.pfx-tree-browser details > summary.-selected,\n.pfx-tree-browser .item.-selected {\n background: var(--instui-component-tree-browser-tree-button-selected-background-color);\n color: var(--instui-component-tree-browser-tree-button-selected-text-color);\n}\n\n/* Nested lists indent; the leaf list carries no bullets. */\n.pfx-tree-browser ul {\n margin: 0;\n padding-inline-start: var(--instui-component-tree-browser-tree-collection-base-spacing-medium);\n list-style: none;\n}\n\n.pfx-tree-browser.-size-sm details > summary,\n.pfx-tree-browser.-size-sm .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-small);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-small);\n}\n\n.pfx-tree-browser.-size-lg details > summary,\n.pfx-tree-browser.-size-lg .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-large);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-large);\n}\n",
415
+ "canvasHighContrast": "/**\n * @component tree-browser\n * @summary A disclosure tree of nested collections and leaf items, with rotating chevrons.\n * @remarks Each collection is a native `<details>`; nesting them inside one another builds the tree, and the browser handles opening and closing every branch.\n * @modifier -icon-* — Render folder/file glyph icons in summaries and leaf items.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .item — A leaf entry in the tree.\n * @pseudo ::before — Draws each collection's disclosure chevron, a masked glyph that rotates to point down when the branch is open.\n * @cssstate open\n * @a11y Mark the root with role=\"tree\" and each nested list with role=\"group\".\n * @example\n * <div class=\"pfx-tree-browser\" role=\"tree\">\n * <details open>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Course files</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Syllabus.pdf</a>\n * </li>\n * <li>\n * <details>\n * <summary><span class=\"pfx-icon -icon-folder\"></span> Week 1</summary>\n * <ul role=\"group\">\n * <li>\n * <a class=\"item -selected\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Reading.pdf</a>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Slides.pptx</a>\n * </li>\n * </ul>\n * </details>\n * </li>\n * <li>\n * <a class=\"item\" href=\"#\"><span class=\"pfx-icon -icon-file-text\"></span> Rubric.docx</a>\n * </li>\n * </ul>\n * </details>\n * </div>\n * @structure\n * .pfx-tree-browser {\n * details {\n * summary {\n * [class*=\"-icon-\"]:optional {}\n * }\n * ul {\n * li {\n * .item {\n * [class*=\"-icon-\"]:optional {}\n * }\n * }\n * }\n * }\n * }\n * @related menu — Both present nested, selectable entries.\n */\n.pfx-tree-browser {\n border-radius: var(--instui-component-tree-browser-border-radius);\n font-family: var(--instui-component-tree-browser-tree-collection-font-family);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n}\n\n/* A collection node (a <details><summary>) and a leaf (.item) share the button chrome. */\n.pfx-tree-browser details > summary,\n.pfx-tree-browser .item {\n display: flex;\n align-items: center;\n gap: var(--instui-component-tree-browser-tree-button-icons-margin-right-medium);\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-medium);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-medium);\n line-height: var(--instui-component-tree-browser-tree-button-text-line-height);\n color: var(--instui-component-tree-browser-tree-button-name-text-color);\n border-radius: var(--instui-component-tree-browser-tree-button-border-radius);\n cursor: pointer;\n list-style: none;\n}\n\n.pfx-tree-browser details > summary [class*=\"-icon-\"],\n.pfx-tree-browser .item [class*=\"-icon-\"] {\n line-height: 1;\n}\n\n.pfx-tree-browser details > summary::-webkit-details-marker {\n display: none;\n}\n\n/* The disclosure chevron rotates open (same technique as toggle-details). */\n.pfx-tree-browser details > summary::before {\n content: \"\";\n flex: none;\n inline-size: 1em;\n block-size: 1em;\n background: currentColor;\n -webkit-mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n mask: var(--instui-icon-chevron-right) center / contain no-repeat;\n transition: transform 0.2s ease;\n}\n\n.pfx-tree-browser details[open] > summary::before {\n transform: rotate(90deg);\n}\n\n.pfx-tree-browser details > summary:hover,\n.pfx-tree-browser .item:hover {\n background: var(--instui-component-tree-browser-tree-button-hover-background-color);\n color: var(--instui-component-tree-browser-tree-button-hover-text-color);\n}\n\n.pfx-tree-browser details > summary.-selected,\n.pfx-tree-browser .item.-selected {\n background: var(--instui-component-tree-browser-tree-button-selected-background-color);\n color: var(--instui-component-tree-browser-tree-button-selected-text-color);\n}\n\n/* Nested lists indent; the leaf list carries no bullets. */\n.pfx-tree-browser ul {\n margin: 0;\n padding-inline-start: var(--instui-component-tree-browser-tree-collection-base-spacing-medium);\n list-style: none;\n}\n\n.pfx-tree-browser.-size-sm details > summary,\n.pfx-tree-browser.-size-sm .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-small);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-small);\n}\n\n.pfx-tree-browser.-size-lg details > summary,\n.pfx-tree-browser.-size-lg .item {\n padding: var(--instui-component-tree-browser-tree-button-base-spacing-large);\n font-size: var(--instui-component-tree-browser-tree-button-name-font-size-large);\n}\n"
416
+ }.rebrand;
417
+ const truncate$1 = {
418
+ "rebrand": "/**\n * @component truncate\n * @summary Single-line ellipsis truncation, or a multi-line clamp via `--lines`.\n * @remarks The `-lines` clamp switches to `display: -webkit-box` and reads the `--lines` custom property, so the text wraps to that many lines before it ends in an ellipsis.\n * @modifier -lines — Multi-line clamp; set the line count via the `--lines` custom property (default 2).\n * @compat The `-lines` clamp relies on `-webkit-line-clamp` with `display: -webkit-box`, paired with the standard `line-clamp`.\n * @example\n * <div class=\"pfx-truncate\">This single line keeps going past the edge of its box, so it ends in an ellipsis.</div>\n * @related text — Body typography that this truncates.\n */\n.pfx-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-family: var(--instui-component-truncate-text-font-family);\n line-height: var(--instui-component-truncate-text-line-height);\n}\n.pfx-truncate.-lines {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--lines, 2);\n line-clamp: var(--lines, 2);\n white-space: normal;\n overflow: hidden;\n}\n",
419
+ "canvas": "/**\n * @component truncate\n * @summary Single-line ellipsis truncation, or a multi-line clamp via `--lines`.\n * @remarks The `-lines` clamp switches to `display: -webkit-box` and reads the `--lines` custom property, so the text wraps to that many lines before it ends in an ellipsis.\n * @modifier -lines — Multi-line clamp; set the line count via the `--lines` custom property (default 2).\n * @compat The `-lines` clamp relies on `-webkit-line-clamp` with `display: -webkit-box`, paired with the standard `line-clamp`.\n * @example\n * <div class=\"pfx-truncate\">This single line keeps going past the edge of its box, so it ends in an ellipsis.</div>\n * @related text — Body typography that this truncates.\n */\n.pfx-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-family: var(--instui-component-truncate-text-font-family);\n line-height: var(--instui-component-truncate-text-line-height);\n}\n.pfx-truncate.-lines {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--lines, 2);\n line-clamp: var(--lines, 2);\n white-space: normal;\n overflow: hidden;\n}\n",
420
+ "canvasHighContrast": "/**\n * @component truncate\n * @summary Single-line ellipsis truncation, or a multi-line clamp via `--lines`.\n * @remarks The `-lines` clamp switches to `display: -webkit-box` and reads the `--lines` custom property, so the text wraps to that many lines before it ends in an ellipsis.\n * @modifier -lines — Multi-line clamp; set the line count via the `--lines` custom property (default 2).\n * @compat The `-lines` clamp relies on `-webkit-line-clamp` with `display: -webkit-box`, paired with the standard `line-clamp`.\n * @example\n * <div class=\"pfx-truncate\">This single line keeps going past the edge of its box, so it ends in an ellipsis.</div>\n * @related text — Body typography that this truncates.\n */\n.pfx-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-family: var(--instui-component-truncate-text-font-family);\n line-height: var(--instui-component-truncate-text-line-height);\n}\n.pfx-truncate.-lines {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--lines, 2);\n line-clamp: var(--lines, 2);\n white-space: normal;\n overflow: hidden;\n}\n"
421
+ }.rebrand;
422
+ const icon$1 = {
423
+ "rebrand": "/**\n * @utility icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n.pfx-icon {\n display: inline-flex;\n}\n[class*=\"-icon-\"]::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n flex: none;\n vertical-align: -0.125em;\n background: currentColor;\n -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n",
424
+ "canvas": "/**\n * @utility icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n.pfx-icon {\n display: inline-flex;\n}\n[class*=\"-icon-\"]::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n flex: none;\n vertical-align: -0.125em;\n background: currentColor;\n -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n",
425
+ "canvasHighContrast": "/**\n * @utility icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n.pfx-icon {\n display: inline-flex;\n}\n[class*=\"-icon-\"]::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n flex: none;\n vertical-align: -0.125em;\n background: currentColor;\n -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n"
426
+ }.rebrand;
427
+ const mask$1 = {
428
+ "rebrand": "/**\n * @utility mask\n * @summary An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native `<dialog>` (its `::backdrop` is the mask).\n * @modifier -fullscreen — Fixed to the viewport, covering it at a high z-index.\n * @modifier -blur — Blur what's behind the mask with a backdrop-filter.\n * @example\n * <div style=\"position: relative\">\n * <div class=\"instui-mask\">\n * <span class=\"instui-spinner\"></span>\n * </div>\n * </div>\n */\n/* An in-flow overlay for non-modal cases (e.g. a spinner over a card). For a modal, prefer a native\n <dialog>: its ::backdrop is the mask and reuses the same `--instui-component-mask-background-color`\n token (see modalRules). */\n.pfx-mask {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--instui-component-mask-background-color);\n}\n.pfx-mask.-fullscreen {\n position: fixed;\n z-index: 999;\n}\n.pfx-mask.-blur {\n backdrop-filter: blur(0.5rem);\n}\n",
429
+ "canvas": "/**\n * @utility mask\n * @summary An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native `<dialog>` (its `::backdrop` is the mask).\n * @modifier -fullscreen — Fixed to the viewport, covering it at a high z-index.\n * @modifier -blur — Blur what's behind the mask with a backdrop-filter.\n * @example\n * <div style=\"position: relative\">\n * <div class=\"instui-mask\">\n * <span class=\"instui-spinner\"></span>\n * </div>\n * </div>\n */\n/* An in-flow overlay for non-modal cases (e.g. a spinner over a card). For a modal, prefer a native\n <dialog>: its ::backdrop is the mask and reuses the same `--instui-component-mask-background-color`\n token (see modalRules). */\n.pfx-mask {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--instui-component-mask-background-color);\n}\n.pfx-mask.-fullscreen {\n position: fixed;\n z-index: 999;\n}\n.pfx-mask.-blur {\n backdrop-filter: blur(0.5rem);\n}\n",
430
+ "canvasHighContrast": "/**\n * @utility mask\n * @summary An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native `<dialog>` (its `::backdrop` is the mask).\n * @modifier -fullscreen — Fixed to the viewport, covering it at a high z-index.\n * @modifier -blur — Blur what's behind the mask with a backdrop-filter.\n * @example\n * <div style=\"position: relative\">\n * <div class=\"instui-mask\">\n * <span class=\"instui-spinner\"></span>\n * </div>\n * </div>\n */\n/* An in-flow overlay for non-modal cases (e.g. a spinner over a card). For a modal, prefer a native\n <dialog>: its ::backdrop is the mask and reuses the same `--instui-component-mask-background-color`\n token (see modalRules). */\n.pfx-mask {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--instui-component-mask-background-color);\n}\n.pfx-mask.-fullscreen {\n position: fixed;\n z-index: 999;\n}\n.pfx-mask.-blur {\n backdrop-filter: blur(0.5rem);\n}\n"
431
+ }.rebrand;
432
+ const screenReaderContent$1 = {
433
+ "rebrand": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n.pfx-screen-reader-content {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
434
+ "canvas": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n.pfx-screen-reader-content {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n",
435
+ "canvasHighContrast": "/**\n * @utility screen-reader-content\n * @summary Visually hides content while keeping it available to assistive tech (the standard clip pattern).\n * @a11y Keeps text in the accessibility tree for screen readers while removing it from the visual layout.\n * @example\n * <span class=\"instui-screen-reader-content\">Opens in a new window</span>\n */\n.pfx-screen-reader-content {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n"
436
+ }.rebrand;
437
+ const base$1 = {
438
+ "rebrand": "/**\n * @rule base\n * @class *\n * @summary The opt-in global reset: `box-sizing`, the page surface, base text colour and font, `color-scheme`, and link defaults.\n * @pseudo ::before — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::after — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::selection — Tints highlighted text with a translucent primary navigation colour.\n * @example\n * <html>\n * <body>\n * <a href=\"/\">A styled link on the base surface.</a>\n * </body>\n * </html>\n */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n:where(html) {\n color-scheme: light dark;\n background: var(--instui-color-background-page);\n color: var(--instui-color-text-base);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-component-text-content-font-size);\n line-height: var(--instui-component-text-content-line-height);\n -webkit-text-size-adjust: 100%;\n text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n}\n:where(body) {\n margin: 0;\n}\n:where(a) {\n color: var(--instui-color-text-interactive-navigation-primary-base);\n text-decoration: underline;\n}\n:where(a:hover) {\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n}\n::selection {\n background: color-mix(\n in srgb,\n var(--instui-color-text-interactive-navigation-primary-base) 25%,\n transparent\n );\n}\n",
439
+ "canvas": "/**\n * @rule base\n * @class *\n * @summary The opt-in global reset: `box-sizing`, the page surface, base text colour and font, `color-scheme`, and link defaults.\n * @pseudo ::before — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::after — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::selection — Tints highlighted text with a translucent primary navigation colour.\n * @example\n * <html>\n * <body>\n * <a href=\"/\">A styled link on the base surface.</a>\n * </body>\n * </html>\n */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n:where(html) {\n color-scheme: light dark;\n background: var(--instui-color-background-page);\n color: var(--instui-color-text-base);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-component-text-content-font-size);\n line-height: var(--instui-component-text-content-line-height);\n -webkit-text-size-adjust: 100%;\n text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n}\n:where(body) {\n margin: 0;\n}\n:where(a) {\n color: var(--instui-color-text-interactive-navigation-primary-base);\n text-decoration: underline;\n}\n:where(a:hover) {\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n}\n::selection {\n background: color-mix(\n in srgb,\n var(--instui-color-text-interactive-navigation-primary-base) 25%,\n transparent\n );\n}\n",
440
+ "canvasHighContrast": "/**\n * @rule base\n * @class *\n * @summary The opt-in global reset: `box-sizing`, the page surface, base text colour and font, `color-scheme`, and link defaults.\n * @pseudo ::before — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::after — Included in the universal `box-sizing: border-box` reset so its generated box sizes predictably.\n * @pseudo ::selection — Tints highlighted text with a translucent primary navigation colour.\n * @example\n * <html>\n * <body>\n * <a href=\"/\">A styled link on the base surface.</a>\n * </body>\n * </html>\n */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n:where(html) {\n color-scheme: light dark;\n background: var(--instui-color-background-page);\n color: var(--instui-color-text-base);\n font-family: var(--instui-font-family-base);\n font-size: var(--instui-component-text-content-font-size);\n line-height: var(--instui-component-text-content-line-height);\n -webkit-text-size-adjust: 100%;\n text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n}\n:where(body) {\n margin: 0;\n}\n:where(a) {\n color: var(--instui-color-text-interactive-navigation-primary-base);\n text-decoration: underline;\n}\n:where(a:hover) {\n color: var(--instui-color-text-interactive-navigation-primary-hover);\n}\n::selection {\n background: color-mix(\n in srgb,\n var(--instui-color-text-interactive-navigation-primary-base) 25%,\n transparent\n );\n}\n"
441
+ }.rebrand;
253
442
  //#endregion
254
443
  //#region src/utilities/icon.ts
255
444
  const icon = defineUtility({
@@ -296,7 +485,7 @@ const badgeCss = badge.css;
296
485
  //#region src/components/billboard.ts
297
486
  const billboard = defineComponent({
298
487
  name: "billboard",
299
- css: (p) => billboard$1.replaceAll(SENTINEL, p)
488
+ css: (p, options) => (billboardByTheme[options?.theme ?? "rebrand"] ?? billboardByTheme.rebrand).replaceAll(SENTINEL, p)
300
489
  });
301
490
  const billboardCss = billboard.css;
302
491
  //#endregion
@@ -1368,114 +1557,10 @@ const COMPONENTS = [
1368
1557
  inPlaceEdit
1369
1558
  ];
1370
1559
  //#endregion
1371
- //#region src/declarations/elevation.ts
1372
- /**
1373
- * The `--instui-elevation-*` shadow scale. Helpers only — NOT a documented record and not in any
1374
- * registry: `componentsCss()` leads its sheet with `elevationCss()` so the shadows components
1375
- * reference (modal, alert, menu) resolve from `components.css` alone.
1376
- *
1377
- * @module
1378
- */
1379
- /** Per-level geometry (`offset-x offset-y blur`) for the [tighter, wider] shadow layers. */
1380
- const ELEVATION_GEOMETRY = {
1381
- resting: ["0 0.0625rem 0.125rem", "0 0.0625rem 0.1875rem"],
1382
- above: ["0 0.1875rem 0.375rem", "0 0.1875rem 0.375rem"],
1383
- topmost: ["0 0.375rem 0.4375rem", "0 0.625rem 1.75rem"]
1384
- };
1385
- /** Aliases InstUI ships alongside the primary level names. */
1386
- const ELEVATION_ALIASES = {
1387
- depth1: "resting",
1388
- depth2: "above",
1389
- depth3: "topmost",
1390
- card: "resting",
1391
- cardHover: "topmost"
1392
- };
1393
- /**
1394
- * Every elevation level and alias emitted as `--instui-elevation-<name>` (`resting`, `above`,
1395
- * `topmost`, `depth1`–`depth3`, `card`, `cardHover`). Derived from the geometry + alias maps.
1396
- */
1397
- const ELEVATION_NAMES = [...Object.keys(ELEVATION_GEOMETRY), ...Object.keys(ELEVATION_ALIASES)];
1398
- const ELEVATION_COLOR_STRONG = "var(--instui-color-drop-shadow-shadow-color1)";
1399
- const ELEVATION_COLOR_SOFT = "var(--instui-color-drop-shadow-shadow-color2)";
1400
- const elevationShadow = ([tight, wide]) => `${tight} ${ELEVATION_COLOR_SOFT}, ${wide} ${ELEVATION_COLOR_STRONG}`;
1401
- /**
1402
- * The `--instui-elevation-*` name/value pairs (each a multi-layer `box-shadow`). Values reference the
1403
- * themed drop-shadow colour tokens, so they adapt per theme wherever a token sheet is loaded.
1404
- *
1405
- * @returns One `[customProperty, value]` pair per level and alias.
1406
- */
1407
- function elevationDeclarations() {
1408
- return [...Object.entries(ELEVATION_GEOMETRY), ...Object.entries(ELEVATION_ALIASES).map(([alias, base]) => [alias, ELEVATION_GEOMETRY[base]])].map(([name, geo]) => [`--instui-elevation-${name}`, elevationShadow(geo)]);
1409
- }
1410
- /**
1411
- * Build the elevation token block: `<selector> { --instui-elevation-*: … }`. Shipped inside
1412
- * `components.css` (so shadows are intrinsic — no plugin, no extra import), and reusable by other
1413
- * layered outputs (e.g. the Pendo renderer) via the `selector` option.
1414
- *
1415
- * @param options - `selector` — the rule selector (default `:root`).
1416
- * @returns The CSS string.
1417
- *
1418
- * @example
1419
- * ```ts
1420
- * import { elevationCss } from "@pantoken/components";
1421
- *
1422
- * elevationCss(); // ":root { --instui-elevation-resting: …; --instui-elevation-above: …; … }"
1423
- * ```
1424
- *
1425
- * @demo self:elevation
1426
- */
1427
- function elevationCss(options = {}) {
1428
- return `${options.selector ?? ":root"} {\n${elevationDeclarations().map(([name, value]) => ` ${name}: ${value};`).join("\n")}\n}\n`;
1429
- }
1430
- //#endregion
1431
1560
  //#region src/rules/base.ts
1432
1561
  const base = defineRule({
1433
1562
  name: "base",
1434
- css: () => css`
1435
- /**
1436
- * @rule base
1437
- * @class *
1438
- * @summary The opt-in global reset: \`box-sizing\`, the page surface, base text colour and font, \`color-scheme\`, and link defaults.
1439
- * @pseudo ::before — Included in the universal \`box-sizing: border-box\` reset so its generated box sizes predictably.
1440
- * @pseudo ::after — Included in the universal \`box-sizing: border-box\` reset so its generated box sizes predictably.
1441
- * @pseudo ::selection — Tints highlighted text with a translucent primary navigation colour.
1442
- * @example
1443
- * <html>
1444
- * <body>
1445
- * <a href="/">A styled link on the base surface.</a>
1446
- * </body>
1447
- * </html>
1448
- */
1449
- *,
1450
- *::before,
1451
- *::after {
1452
- box-sizing: border-box;
1453
- }
1454
- :where(html) {
1455
- color-scheme: light dark;
1456
- background: var(--instui-color-background-page);
1457
- color: var(--instui-color-text-base);
1458
- font-family: var(--instui-font-family-base);
1459
- font-size: var(--instui-component-text-content-font-size);
1460
- line-height: var(--instui-component-text-content-line-height);
1461
- -webkit-text-size-adjust: 100%;
1462
- text-size-adjust: 100%;
1463
- -webkit-font-smoothing: antialiased;
1464
- }
1465
- :where(body) {
1466
- margin: 0;
1467
- }
1468
- :where(a) {
1469
- color: var(--instui-color-text-interactive-navigation-primary-base);
1470
- text-decoration: underline;
1471
- }
1472
- :where(a:hover) {
1473
- color: var(--instui-color-text-interactive-navigation-primary-hover);
1474
- }
1475
- ::selection {
1476
- background: color-mix(in srgb, var(--instui-color-text-interactive-navigation-primary-base) 25%, transparent);
1477
- }
1478
- `
1563
+ css: (p) => base$1.replaceAll(SENTINEL, p)
1479
1564
  });
1480
1565
  base.css;
1481
1566
  //#endregion
@@ -1520,62 +1605,6 @@ const FOCUS_DOC = css`/**
1520
1605
  * <button class="instui-button -focus-color-danger">Delete</button>
1521
1606
  * @demo self:focus-outline
1522
1607
  */`;
1523
- /** The elements the ring applies to by default (the common interactive/focusable elements). */
1524
- const FOCUSABLE_SELECTOR = "a, button, input, select, textarea, summary, [tabindex]";
1525
- const focusShared = (name) => `var(--instui-component-shared-tokens-focus-outline-${name})`;
1526
- /**
1527
- * The `--instui-focus-outline-*` name/value pairs the ring rules read. Colour/width/offset reference
1528
- * the themed shared focus tokens; the transition, line style, and inset are constants.
1529
- *
1530
- * @returns One `[customProperty, value]` pair per focus-ring variable.
1531
- */
1532
- function focusOutlineDeclarations() {
1533
- return [
1534
- ["--instui-focus-outline-color", focusShared("info-color")],
1535
- ["--instui-focus-outline-color-start", "transparent"],
1536
- ["--instui-focus-outline-width", focusShared("width")],
1537
- ["--instui-focus-outline-offset", focusShared("offset")],
1538
- ["--instui-focus-outline-radius", "var(--instui-border-radius-md)"],
1539
- ["--instui-focus-outline-style", "solid"],
1540
- ["--instui-focus-outline-transition", "outline-color 0.2s, outline-offset 0.25s"],
1541
- ["--instui-focus-outline-color-success", focusShared("success-color")],
1542
- ["--instui-focus-outline-color-danger", focusShared("danger-color")],
1543
- ["--instui-focus-outline-color-inverse", focusShared("on-color")],
1544
- ["--instui-focus-outline-inset", "0rem"]
1545
- ];
1546
- }
1547
- /**
1548
- * The focus-ring rules for a given focusable selector: a transparent resting ring that transitions in
1549
- * on `:focus-visible`, plus the `-focus-color-*` / `-focus-position-inset` / `-focus-within` /
1550
- * `-without-focus-animation` modifiers. All `:where()`-wrapped, so zero-specificity.
1551
- *
1552
- * @param selector - The focusable selector the base ring applies to (default {@link FOCUSABLE_SELECTOR}).
1553
- * @returns The CSS rules string.
1554
- */
1555
- function focusOutlineRules(selector = FOCUSABLE_SELECTOR) {
1556
- return [
1557
- `:where(${selector}) {`,
1558
- ` outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color-start);`,
1559
- ` outline-offset: 0;`,
1560
- ` transition: var(--instui-focus-outline-transition);`,
1561
- `}`,
1562
- `:where(${selector}):where(:focus-visible) {`,
1563
- ` outline-color: var(--instui-focus-outline-color);`,
1564
- ` outline-offset: var(--instui-focus-outline-offset);`,
1565
- ` border-radius: var(--instui-focus-outline-radius);`,
1566
- `}`,
1567
- `:where(.-focus-color-success):where(:focus-visible) { outline-color: var(--instui-focus-outline-color-success); }`,
1568
- `:where(.-focus-color-danger):where(:focus-visible) { outline-color: var(--instui-focus-outline-color-danger); }`,
1569
- `:where(.-focus-color-inverse):where(:focus-visible) { outline-color: var(--instui-focus-outline-color-inverse); }`,
1570
- `:where(.-focus-position-inset):where(:focus-visible) { outline-offset: var(--instui-focus-outline-inset); }`,
1571
- `:where(.-focus-within):where(:focus-within) {`,
1572
- ` outline-color: var(--instui-focus-outline-color);`,
1573
- ` outline-offset: var(--instui-focus-outline-offset);`,
1574
- ` border-radius: var(--instui-focus-outline-radius);`,
1575
- `}`,
1576
- `:where(.-without-focus-animation) { transition: none; }`
1577
- ].join("\n");
1578
- }
1579
1608
  /**
1580
1609
  * Build the focus-outline block: the `--instui-focus-outline-*` token defs plus the ring rules.
1581
1610
  * Baked into `base.css` (so focusables get the ring out of the box), and reusable by other layered
@@ -1589,8 +1618,8 @@ function focusOutlineRules(selector = FOCUSABLE_SELECTOR) {
1589
1618
  */
1590
1619
  function focusOutlineCss(options = {}) {
1591
1620
  const tokenSelector = options.tokenSelector ?? ":where(:root)";
1592
- const decls = focusOutlineDeclarations().map(([name, value]) => ` ${name}: ${value};`).join("\n");
1593
- return css`${FOCUS_DOC}\n${tokenSelector} {\n${decls}\n}\n\n${focusOutlineRules(options.selector)}\n`;
1621
+ const decls = focusOutlineDeclarations$1().map(([name, value]) => ` ${name}: ${value};`).join("\n");
1622
+ return css`${FOCUS_DOC}\n${tokenSelector} {\n${decls}\n}\n\n${focusOutlineRules$1(options.selector)}\n`;
1594
1623
  }
1595
1624
  //#endregion
1596
1625
  //#region src/rules/prose.ts
@@ -1738,6 +1767,55 @@ function proseCss(options = {}) {
1738
1767
  return `/* InstUI-look prose styles (@pantoken/components) — scope: ${scope} */\n${PROSE_DOC}\n${proseBody(scope).trim()}\n`;
1739
1768
  }
1740
1769
  //#endregion
1770
+ //#region src/declarations/elevation.ts
1771
+ /**
1772
+ * The `--instui-elevation-*` shadow scale — the one documented `@declaration` record whose CSS is a
1773
+ * token block on `:root` (no modifier classes). `componentsCss()` leads its sheet with `elevationCss()`
1774
+ * so the shadows components reference (modal, alert, menu) resolve from `components.css` alone, and the
1775
+ * leading {@link ELEVATION_DOC} block flows into lint + the CSS-API pages. Like {@link focus} it can't
1776
+ * use `defineDeclaration`, so it exposes the bespoke {@link elevationCss} builder plus a
1777
+ * {@link Definition}-shaped {@link elevation} object for the registry + `validate()`.
1778
+ *
1779
+ * @module
1780
+ */
1781
+ /** The elevation declaration's cssdoc doc comment (authored inline; the CSS body follows in {@link elevationCss}). */
1782
+ const ELEVATION_DOC = css`/**
1783
+ * @declaration elevation
1784
+ * @summary The \`--instui-elevation-*\` shadow scale: multi-layer \`box-shadow\` custom properties (\`resting\`, \`above\`, \`topmost\`, plus the \`depth1\`–\`depth3\`, \`card\`, and \`cardHover\` aliases) declared on \`:root\` and themed via the drop-shadow colour tokens, so shadows adapt per theme wherever a token sheet is loaded.
1785
+ * @cssproperty --instui-elevation-resting — The resting (lowest) elevation shadow.
1786
+ * @cssproperty --instui-elevation-above — The raised elevation shadow.
1787
+ * @cssproperty --instui-elevation-topmost — The highest elevation shadow, for modals and menus.
1788
+ * @cssproperty --instui-elevation-depth1 — Alias of \`resting\`.
1789
+ * @cssproperty --instui-elevation-depth2 — Alias of \`above\`.
1790
+ * @cssproperty --instui-elevation-depth3 — Alias of \`topmost\`.
1791
+ * @cssproperty --instui-elevation-card — Alias of \`resting\`, for card surfaces.
1792
+ * @cssproperty --instui-elevation-cardHover — Alias of \`topmost\`, for hovered cards.
1793
+ * @related view — The View primitive's \`-shadow-*\` modifiers read these shadows.
1794
+ * @demo self:elevation
1795
+ */`;
1796
+ /**
1797
+ * Build the elevation token block: `<selector> { --instui-elevation-*: … }`. Shipped inside
1798
+ * `components.css` (so shadows are intrinsic — no plugin, no extra import), and reusable by other
1799
+ * layered outputs (e.g. the Pendo renderer) via the `selector` option.
1800
+ *
1801
+ * @param options - `selector` — the rule selector (default `:root`).
1802
+ * @returns The CSS string.
1803
+ *
1804
+ * @example
1805
+ * ```ts
1806
+ * import { elevationCss } from "@pantoken/components";
1807
+ *
1808
+ * elevationCss(); // ":root { --instui-elevation-resting: …; --instui-elevation-above: …; … }"
1809
+ * ```
1810
+ *
1811
+ * @demo self:elevation
1812
+ */
1813
+ function elevationCss(options = {}) {
1814
+ const selector = options.selector ?? ":root";
1815
+ const body = elevationDeclarations$1().map(([name, value]) => ` ${name}: ${value};`).join("\n");
1816
+ return css`${ELEVATION_DOC}\n${selector} {\n${body}\n}\n`;
1817
+ }
1818
+ //#endregion
1741
1819
  //#region src/components/select.ts
1742
1820
  /**
1743
1821
  * The **experimental** customizable-select enhancement for `.<prefix>-simple-select`. Bespoke (no
@@ -2070,29 +2148,31 @@ function iconGlyphsCss(names, options = {}) {
2070
2148
  */
2071
2149
  /**
2072
2150
  * Build the opt-in base/reset stylesheet: global document defaults from the tokens (box-sizing, body
2073
- * reset, page surface, base text colour/font, `color-scheme`, base link), followed by the focus ring
2074
- * (a document-level default that targets bare focusables). Load it once, ahead of the component and
2075
- * prose sheets, when pantoken owns the page.
2151
+ * reset, page surface, base text colour/font, `color-scheme`, base link), followed by the focus-ring
2152
+ * rules (a document-level default that targets bare focusables). Only the ring *rules* live here — the
2153
+ * `--instui-focus-outline-*` custom properties they read ship in the token sheet (`@pantoken/css`), so
2154
+ * `base.css` no longer redefines them. Load it once, ahead of the component and prose sheets, when
2155
+ * pantoken owns the page.
2076
2156
  *
2077
2157
  * @returns The CSS string.
2078
2158
  */
2079
2159
  function baseCss() {
2080
- return `/* InstUI-look base/reset (@pantoken/components) */\n${base.rules("").trim()}\n\n${focusOutlineCss()}`;
2160
+ return `/* InstUI-look base/reset (@pantoken/components) */\n${base.rules("").trim()}\n\n${focusOutlineRules()}`;
2081
2161
  }
2082
2162
  /**
2083
- * Build the aggregated component stylesheet: the `--instui-elevation-*` scale (so shadows are intrinsic)
2084
- * followed by every component's rules in the `COMPONENTS` concat order. The size-alias and
2085
- * deprecated-alias twins are appended PER COMPONENT (within its own chunk) so each alias documents on
2086
- * its own page — the deprecated aliases are discovered from each record's `@deprecated {@link -x}`
2087
- * metadata (see `withAliases`), not a central hand-kept list.
2163
+ * Build the aggregated component stylesheet: every component's rules in the `COMPONENTS` concat order.
2164
+ * The size-alias and deprecated-alias twins are appended PER COMPONENT (within its own chunk) so each
2165
+ * alias documents on its own page — the deprecated aliases are discovered from each record's
2166
+ * `@deprecated {@link -x}` metadata (see `withAliases`), not a central hand-kept list. The
2167
+ * `--instui-elevation-*` shadow scale the components reference is defined in the token sheet
2168
+ * (`@pantoken/css`), so it's no longer inlined here.
2088
2169
  *
2089
2170
  * @param options - {@link ComponentOptions}.
2090
2171
  * @returns The CSS string.
2091
2172
  */
2092
2173
  function componentsCss(options = {}) {
2093
2174
  const prefix = options.prefix || "";
2094
- const rules = COMPONENTS.map((d) => d.rules(ns(prefix)).trim());
2095
- return `/* InstUI component styles (@pantoken/components) — prefix: ${prefix} */\n${elevationCss()}\n${rules.join("\n\n")}\n`;
2175
+ return `/* InstUI component styles (@pantoken/components) — prefix: ${prefix} */\n${COMPONENTS.map((d) => d.rules(ns(prefix), options).trim()).join("\n\n")}\n`;
2096
2176
  }
2097
2177
  //#endregion
2098
2178
  export { DEFAULT_PREFIX, ELEVATION_NAMES, FOCUSABLE_SELECTOR, alertCss, avatarCss, badgeCss, baseCss, billboardCss, breadcrumbCss, buttonCss, bylineCss, calendarCss, checkboxCss, closeButtonCss, componentsCss, contextViewCss, elevationCss, elevationDeclarations, fileDropCss, focusOutlineCss, focusOutlineDeclarations, focusOutlineRules, formFieldCss, formFieldGroupCss, formFieldMessagesCss, headingCss, iconCss, iconGlyphsCss, imgCss, inPlaceEditCss, inputGroupCss, layoutUtilitiesCss, linkCss, listCss, maskCss, menuCss, metricCss, modalCss, numberInputCss, paginationCss, pillCss, popoverCss, progressCircleCss, progressCss, proseCss, radioCss, radioInputGroupCss, rangeInputCss, ratingCss, responsiveUtilitiesCss, screenReaderContentCss, selectCss, sideNavBarCss, simpleSelectCss, spacingUtilitiesCss, spinnerCss, tableCss, tabsCss, tagCss, textAreaCss, textCss, textInputCss, toggleDetailsCss, toggleGroupCss, tooltipCss, trayCss, treeBrowserCss, truncateCss, viewCss };