@pantoken/components 0.3.0 → 0.4.1

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 (3) hide show
  1. package/dist/index.mjs +41 -27
  2. package/dist/utilities.css +1 -1
  3. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -118,7 +118,8 @@ const CHEVRON_DOWN_ICON = iconMask("chevron-down");
118
118
  const AI_ICON_MASK = "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M960 0L1219.29 700.713L1920 960L1219.29 1219.29L960 1920L700.713 1219.29L0 960L700.713 700.713L960 0Z'/%3E%3Cpath d='M1600 0L1686.43 233.571L1920 320L1686.43 406.429L1600 640L1513.57 406.429L1280 320L1513.57 233.571L1600 0Z'/%3E%3C/svg%3E\") center / contain no-repeat";
119
119
  /** Spacing step → value on the pantoken spacing scale. */
120
120
  const SPACING_STEPS = {
121
- "0": "0",
121
+ "0": "var(--instui-component-shared-tokens-spacing-general-space-none)",
122
+ none: "var(--instui-component-shared-tokens-spacing-general-space-none)",
122
123
  "2xs": "var(--instui-spacing-space2xs)",
123
124
  xs: "var(--instui-spacing-space-xs)",
124
125
  sm: "var(--instui-spacing-space-sm)",
@@ -216,9 +217,9 @@ const defineRule = (input) => make("rule", input);
216
217
  */
217
218
  const SENTINEL = "pfx-";
218
219
  const alert$1 = {
219
- "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/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
220
- "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/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
221
- "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/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n"
220
+ "rebrand": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
221
+ "canvas": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n",
222
+ "canvasHighContrast": "/**\n * @component alert\n * @summary An inline message with a status colour bar and a masked status glyph from the shared icon set.\n * @remarks A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.\n * @modifier -color-info — Informational (default).\n * @modifier -color-success — A positive/confirmation message.\n * @modifier -color-warning — A cautionary message.\n * @modifier -color-danger — An error message.\n * @modifier -without-shadow — Remove the default elevation shadow (InstUI `hasShadow={false}`).\n * @modifier -has-shadow-false — @deprecated {@link -without-shadow}\n * @modifier -screen-reader-only — Visually hidden but announced.\n * @modifier -variant-info — @deprecated {@link -color-info}\n * @modifier -variant-success — @deprecated {@link -color-success}\n * @modifier -variant-warning — @deprecated {@link -color-warning}\n * @modifier -variant-error — @deprecated {@link -color-danger}\n * @slot content — The alert's message content; may include a dismiss button.\n * @modifier -icon-* — Swap the status glyph for a custom icon (e.g. `-icon-megaphone`), kept white on the variant's coloured bar.\n * @modifier -render-custom-icon-* — @deprecated The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.\n * @pseudo ::before — The solid variant-coloured status bar, flush to the rounded start edge.\n * @pseudo ::after — The white status glyph, masked and centred over the bar.\n * @cssproperty --pantoken-alert-glyph <url> — The low-level status-glyph source; `-icon-<name>` sets it for you. Override for a custom icon (a url-encoded SVG).\n * @cssproperty --pantoken-alert-icon-bg <color> — The coloured status-bar fill behind the glyph; each `-color-*` variant sets its own.\n * @accessibility For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.pfx-close-button` in the example carries `aria-label=\"Close\"`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-alert -icon-megaphone pfx-mb-md\">\n * An alert with the default <code>info</code> color, and a custom icon.\n * </div>\n * <div class=\"pfx-alert -color-success\">\n * Congratulations! You're using the \"success\" color.\n * </div>\n * ```\n * @structure\n * .pfx-alert {\n * slot {}\n * .pfx-close-button:optional {}\n * }\n * @related close-button — The dismiss control an alert may include.\n */\n.pfx-alert {\n position: relative;\n min-inline-size: 12rem;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal);\n padding-inline-start: calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));\n background: var(--instui-component-alert-background);\n color: var(--instui-component-alert-color);\n border: var(--instui-component-alert-border-width) var(--instui-component-alert-border-style)\n var(--instui-component-alert-info-border-color);\n border-radius: var(--instui-component-alert-border-radius);\n /* Elevated by default (InstUI's hasShadow defaults to true); -without-shadow opts out. */\n box-shadow: var(--instui-elevation-above);\n font-family: var(--instui-component-alert-content-font-family);\n font-size: var(--instui-component-alert-content-font-size);\n font-weight: var(--instui-component-alert-content-font-weight);\n line-height: var(--instui-component-alert-content-line-height);\n --pantoken-alert-icon-bg: var(--instui-component-alert-info-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-info);\n}\n\n/* The solid variant-coloured bar, flush to the rounded left edge (overlapping the border). */\n.pfx-alert::before {\n content: \"\";\n position: absolute;\n inset-block: calc(-1 * var(--instui-component-alert-border-width));\n inset-inline-start: calc(-1 * var(--instui-component-alert-border-width));\n inline-size: 2.5rem;\n border-start-start-radius: var(--instui-component-alert-border-radius);\n border-end-start-radius: var(--instui-component-alert-border-radius);\n background: var(--pantoken-alert-icon-bg);\n}\n\n/* The white variant glyph, centred over the bar (masked, so it takes the icon-colour token). */\n.pfx-alert::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 2.5rem;\n background: var(--instui-component-alert-icon-color);\n -webkit-mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n mask: var(--pantoken-alert-glyph) center / 1.125rem no-repeat;\n}\n\n/* Close/dismiss is optional: pin it in the top-end corner (the button's own box centres the ×, so it\n takes a small symmetric inset, not the content padding), and reserve room only when it's present. */\n.pfx-alert > .pfx-close-button {\n position: absolute;\n inset-block-start: var(--instui-spacing-space-xs);\n inset-inline-end: var(--instui-spacing-space-xs);\n}\n\n.pfx-alert:has(> .pfx-close-button) {\n padding-inline-end: calc(\n var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs)\n );\n}\n\n/* Opt out of the default elevation (InstUI's hasShadow={false}). */\n.pfx-alert.-without-shadow {\n box-shadow: none;\n}\n\n/* screenReaderOnly: announced to assistive tech, but visually hidden. */\n/* fallow-ignore-next-line css-duplicate-block -- screenReaderOnly is a public Alert prop; declarations cannot be extracted without breaking the component API */\n.pfx-alert.-screen-reader-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n.pfx-alert.-color-info {\n border-color: var(--instui-component-alert-info-border-color);\n}\n\n.pfx-alert.-color-success {\n border-color: var(--instui-component-alert-success-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-success-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-check);\n}\n\n.pfx-alert.-color-warning {\n border-color: var(--instui-component-alert-warning-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-warning-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-triangle-alert);\n}\n\n.pfx-alert.-color-danger {\n border-color: var(--instui-component-alert-danger-border-color);\n --pantoken-alert-icon-bg: var(--instui-component-alert-danger-icon-background);\n --pantoken-alert-glyph: var(--instui-icon-circle-x);\n}\n\n/* A custom `-icon-<name>` on the alert swaps the status glyph (still drawn white over the coloured\n bar), keeping the variant's bar colour. Last, so it wins over the per-variant glyph above. The\n generic icon painter also targets `[class*=\"-icon-\"]::before` at equal specificity and later in the\n sheet — it would consume the bar — so re-assert the bar here at higher specificity. */\n.pfx-alert[class*=\"-icon-\"] {\n --pantoken-alert-glyph: var(--pantoken-glyph);\n}\n\n.pfx-alert[class*=\"-icon-\"]::before {\n inline-size: 2.5rem;\n block-size: auto;\n background: var(--pantoken-alert-icon-bg);\n -webkit-mask: none;\n mask: none;\n}\n"
222
223
  }.rebrand;
223
224
  const avatar$1 = {
224
225
  "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",
@@ -252,9 +253,9 @@ const calendar$1 = {
252
253
  "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"
253
254
  }.rebrand;
254
255
  const checkbox$1 = {
255
- "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",
256
- "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",
257
- "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"
256
+ "rebrand": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox instui-display-block instui-mb-sm\">\n * <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n * <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-checkbox-gap);\n color: var(--instui-component-checkbox-label-base-color);\n font-family: var(--instui-component-checkbox-font-family);\n font-size: var(--instui-component-checkbox-font-size-md);\n font-weight: var(--instui-component-checkbox-font-weight);\n line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-checkbox-control-size-md);\n height: var(--instui-component-checkbox-control-size-md);\n margin-block: var(--instui-component-checkbox-control-vertical-margin);\n border: var(--instui-component-checkbox-border-width) solid\n var(--instui-component-checkbox-border-color);\n border-radius: var(--instui-component-checkbox-border-radius);\n background: var(--instui-component-checkbox-background-color);\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n content: \"\";\n width: 0.75em;\n height: 0.75em;\n /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n background: oklch(\n from var(--instui-component-checkbox-background-checked-color)\n clamp(0, (0.62 - l) * infinity, 1) 0 0\n );\n -webkit-mask: var(--pantoken-cb-glyph);\n mask: var(--pantoken-cb-glyph);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-border-hover-color);\n background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n border-color: var(--instui-component-checkbox-border-checked-color);\n background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n border-color: var(--instui-component-checkbox-border-disabled-color);\n background: var(--instui-component-checkbox-background-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-sm);\n height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-lg);\n height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-border-readonly-color);\n background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n :scope.-required .asterisk {\n color: var(--instui-component-checkbox-asterisk-color);\n }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n border-width in from each edge and travels the difference (width - height). */\n --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n --pantoken-toggle-bw: var(--instui-border-width-sm);\n --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n width: var(--pantoken-toggle-w);\n height: var(--pantoken-toggle-h);\n border: 0;\n border-radius: var(--pantoken-toggle-h);\n box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n track uses the neutral muted background; the handle position and on-color signal the state. */\n background: var(--instui-color-background-muted);\n cursor: pointer;\n transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n content: \"\";\n position: absolute;\n top: 50%;\n inset-inline-start: var(--pantoken-toggle-inset);\n transform: translateY(-50%);\n box-sizing: border-box;\n width: var(--pantoken-toggle-handle);\n height: var(--pantoken-toggle-handle);\n border-radius: 50%;\n border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n background: var(--instui-component-radio-input-toggle-handle-text);\n transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n content: \"\";\n position: absolute;\n top: 50%;\n inset-inline-start: var(--pantoken-toggle-inset);\n transform: translateY(-50%);\n width: var(--pantoken-toggle-handle);\n height: var(--pantoken-toggle-handle);\n background: var(--instui-color-text-muted);\n -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n mask: var(--instui-icon-x) center / 58% no-repeat;\n transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n background: var(--instui-component-radio-input-toggle-background-success);\n -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
257
+ "canvas": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox instui-display-block instui-mb-sm\">\n * <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n * <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-checkbox-gap);\n color: var(--instui-component-checkbox-label-base-color);\n font-family: var(--instui-component-checkbox-font-family);\n font-size: var(--instui-component-checkbox-font-size-md);\n font-weight: var(--instui-component-checkbox-font-weight);\n line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-checkbox-control-size-md);\n height: var(--instui-component-checkbox-control-size-md);\n margin-block: var(--instui-component-checkbox-control-vertical-margin);\n border: var(--instui-component-checkbox-border-width) solid\n var(--instui-component-checkbox-border-color);\n border-radius: var(--instui-component-checkbox-border-radius);\n background: var(--instui-component-checkbox-background-color);\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n content: \"\";\n width: 0.75em;\n height: 0.75em;\n /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n background: oklch(\n from var(--instui-component-checkbox-background-checked-color)\n clamp(0, (0.62 - l) * infinity, 1) 0 0\n );\n -webkit-mask: var(--pantoken-cb-glyph);\n mask: var(--pantoken-cb-glyph);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-border-hover-color);\n background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n border-color: var(--instui-component-checkbox-border-checked-color);\n background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n border-color: var(--instui-component-checkbox-border-disabled-color);\n background: var(--instui-component-checkbox-background-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-sm);\n height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-lg);\n height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-border-readonly-color);\n background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n :scope.-required .asterisk {\n color: var(--instui-component-checkbox-asterisk-color);\n }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n border-width in from each edge and travels the difference (width - height). */\n --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n --pantoken-toggle-bw: var(--instui-border-width-sm);\n --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n width: var(--pantoken-toggle-w);\n height: var(--pantoken-toggle-h);\n border: 0;\n border-radius: var(--pantoken-toggle-h);\n box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n track uses the neutral muted background; the handle position and on-color signal the state. */\n background: var(--instui-color-background-muted);\n cursor: pointer;\n transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n content: \"\";\n position: absolute;\n top: 50%;\n inset-inline-start: var(--pantoken-toggle-inset);\n transform: translateY(-50%);\n box-sizing: border-box;\n width: var(--pantoken-toggle-handle);\n height: var(--pantoken-toggle-handle);\n border-radius: 50%;\n border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n background: var(--instui-component-radio-input-toggle-handle-text);\n transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n content: \"\";\n position: absolute;\n top: 50%;\n inset-inline-start: var(--pantoken-toggle-inset);\n transform: translateY(-50%);\n width: var(--pantoken-toggle-handle);\n height: var(--pantoken-toggle-handle);\n background: var(--instui-color-text-muted);\n -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n mask: var(--instui-icon-x) center / 58% no-repeat;\n transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n background: var(--instui-component-radio-input-toggle-background-success);\n -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
258
+ "canvasHighContrast": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox instui-display-block instui-mb-sm\">\n * <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n * <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--instui-component-checkbox-gap);\n color: var(--instui-component-checkbox-label-base-color);\n font-family: var(--instui-component-checkbox-font-family);\n font-size: var(--instui-component-checkbox-font-size-md);\n font-weight: var(--instui-component-checkbox-font-weight);\n line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n flex-direction: column-reverse;\n align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n appearance: none;\n -webkit-appearance: none;\n display: inline-grid;\n place-content: center;\n flex: none;\n width: var(--instui-component-checkbox-control-size-md);\n height: var(--instui-component-checkbox-control-size-md);\n margin-block: var(--instui-component-checkbox-control-vertical-margin);\n border: var(--instui-component-checkbox-border-width) solid\n var(--instui-component-checkbox-border-color);\n border-radius: var(--instui-component-checkbox-border-radius);\n background: var(--instui-component-checkbox-background-color);\n cursor: pointer;\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n content: \"\";\n width: 0.75em;\n height: 0.75em;\n /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n background: oklch(\n from var(--instui-component-checkbox-background-checked-color)\n clamp(0, (0.62 - l) * infinity, 1) 0 0\n );\n -webkit-mask: var(--pantoken-cb-glyph);\n mask: var(--pantoken-cb-glyph);\n transform: scale(0);\n transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-border-hover-color);\n background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n border-color: var(--instui-component-checkbox-border-checked-color);\n background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n border-color: var(--instui-component-checkbox-border-disabled-color);\n background: var(--instui-component-checkbox-background-disabled-color);\n cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-sm);\n height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n width: var(--instui-component-checkbox-control-size-lg);\n height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n input[type=\"checkbox\"]:hover {\n border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n border-color: var(--instui-component-checkbox-border-readonly-color);\n background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n :scope.-required .asterisk {\n color: var(--instui-component-checkbox-asterisk-color);\n }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n border-width in from each edge and travels the difference (width - height). */\n --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n --pantoken-toggle-bw: var(--instui-border-width-sm);\n --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n appearance: none;\n -webkit-appearance: none;\n position: relative;\n width: var(--pantoken-toggle-w);\n height: var(--pantoken-toggle-h);\n border: 0;\n border-radius: var(--pantoken-toggle-h);\n box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n track uses the neutral muted background; the handle position and on-color signal the state. */\n background: var(--instui-color-background-muted);\n cursor: pointer;\n transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n content: \"\";\n position: absolute;\n top: 50%;\n inset-inline-start: var(--pantoken-toggle-inset);\n transform: translateY(-50%);\n box-sizing: border-box;\n width: var(--pantoken-toggle-handle);\n height: var(--pantoken-toggle-handle);\n border-radius: 50%;\n border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n background: var(--instui-component-radio-input-toggle-handle-text);\n transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n content: \"\";\n position: absolute;\n top: 50%;\n inset-inline-start: var(--pantoken-toggle-inset);\n transform: translateY(-50%);\n width: var(--pantoken-toggle-handle);\n height: var(--pantoken-toggle-handle);\n background: var(--instui-color-text-muted);\n -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n mask: var(--instui-icon-x) center / 58% no-repeat;\n transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n background: var(--instui-component-radio-input-toggle-background-success);\n -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n"
258
259
  }.rebrand;
259
260
  const closeButton$1 = {
260
261
  "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",
@@ -307,9 +308,9 @@ const list$1 = {
307
308
  "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"
308
309
  }.rebrand;
309
310
  const menu$1 = {
310
- "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",
311
- "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",
312
- "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"
311
+ "rebrand": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-menu\">\n * <div class=\"group\">Actions</div>\n * <div class=\"item\">Edit</div>\n * <div class=\"item -active\">Duplicate</div>\n * <div class=\"separator\"></div>\n * <div class=\"item\">Delete</div>\n * </div>\n * ```\n * @structure\n * .pfx-menu {\n * .group {}\n * .item {}\n * .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n.pfx-menu {\n min-width: var(--instui-component-menu-min-width);\n max-width: var(--instui-component-menu-max-width);\n background: var(--instui-component-menu-item-background);\n border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-spacing-space-xs) 0;\n}\n\n@scope (.pfx-menu) {\n :scope > .item {\n display: block;\n padding: var(--instui-component-menu-item-padding-vertical)\n var(--instui-component-menu-item-padding-horizontal);\n color: var(--instui-component-menu-item-label-color);\n font-family: var(--instui-component-menu-item-font-family);\n font-size: var(--instui-component-menu-item-font-size);\n font-weight: var(--instui-component-menu-item-font-weight);\n line-height: var(--instui-component-menu-item-line-height);\n cursor: pointer;\n }\n\n /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n :scope > .item.-disabled {\n opacity: var(--instui-opacity-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n\n :scope > .item:hover,\n :scope > .item.-highlighted {\n background: var(--instui-component-menu-item-highlighted-background);\n color: var(--instui-component-menu-item-highlighted-label-color);\n }\n\n :scope > .item.-active,\n :scope > .item[aria-checked=\"true\"] {\n background: var(--instui-component-menu-item-active-background);\n color: var(--instui-component-menu-item-active-label-color);\n }\n\n :scope > .item.-active:hover,\n :scope > .item[aria-checked=\"true\"]:hover {\n background: var(--instui-component-menu-item-selected-highlighted-background);\n }\n\n /* Secondary line inside an item (a description or shortcut). */\n .item-info {\n color: var(--instui-component-menu-item-label-info-color);\n }\n\n :scope > .item:hover .item-info,\n :scope > .item.-highlighted .item-info {\n color: var(--instui-component-menu-item-highlighted-label-info-color);\n }\n\n /* A labelled group of items. */\n :scope > .group {\n padding: var(--instui-component-menu-group-padding-vertical)\n var(--instui-component-menu-group-padding-horizontal);\n background: var(--instui-component-menu-group-background);\n color: var(--instui-component-menu-group-color);\n font-family: var(--instui-component-menu-group-font-family);\n font-size: var(--instui-component-menu-group-font-size);\n font-weight: var(--instui-component-menu-group-font-weight);\n }\n\n :scope > .separator {\n height: var(--instui-component-menu-separator-height);\n background: var(--instui-component-menu-separator-background);\n margin: var(--instui-component-menu-separator-margin-vertical)\n var(--instui-component-menu-separator-margin-horizontal);\n }\n}\n",
312
+ "canvas": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-menu\">\n * <div class=\"group\">Actions</div>\n * <div class=\"item\">Edit</div>\n * <div class=\"item -active\">Duplicate</div>\n * <div class=\"separator\"></div>\n * <div class=\"item\">Delete</div>\n * </div>\n * ```\n * @structure\n * .pfx-menu {\n * .group {}\n * .item {}\n * .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n.pfx-menu {\n min-width: var(--instui-component-menu-min-width);\n max-width: var(--instui-component-menu-max-width);\n background: var(--instui-component-menu-item-background);\n border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-spacing-space-xs) 0;\n}\n\n@scope (.pfx-menu) {\n :scope > .item {\n display: block;\n padding: var(--instui-component-menu-item-padding-vertical)\n var(--instui-component-menu-item-padding-horizontal);\n color: var(--instui-component-menu-item-label-color);\n font-family: var(--instui-component-menu-item-font-family);\n font-size: var(--instui-component-menu-item-font-size);\n font-weight: var(--instui-component-menu-item-font-weight);\n line-height: var(--instui-component-menu-item-line-height);\n cursor: pointer;\n }\n\n /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n :scope > .item.-disabled {\n opacity: var(--instui-opacity-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n\n :scope > .item:hover,\n :scope > .item.-highlighted {\n background: var(--instui-component-menu-item-highlighted-background);\n color: var(--instui-component-menu-item-highlighted-label-color);\n }\n\n :scope > .item.-active,\n :scope > .item[aria-checked=\"true\"] {\n background: var(--instui-component-menu-item-active-background);\n color: var(--instui-component-menu-item-active-label-color);\n }\n\n :scope > .item.-active:hover,\n :scope > .item[aria-checked=\"true\"]:hover {\n background: var(--instui-component-menu-item-selected-highlighted-background);\n }\n\n /* Secondary line inside an item (a description or shortcut). */\n .item-info {\n color: var(--instui-component-menu-item-label-info-color);\n }\n\n :scope > .item:hover .item-info,\n :scope > .item.-highlighted .item-info {\n color: var(--instui-component-menu-item-highlighted-label-info-color);\n }\n\n /* A labelled group of items. */\n :scope > .group {\n padding: var(--instui-component-menu-group-padding-vertical)\n var(--instui-component-menu-group-padding-horizontal);\n background: var(--instui-component-menu-group-background);\n color: var(--instui-component-menu-group-color);\n font-family: var(--instui-component-menu-group-font-family);\n font-size: var(--instui-component-menu-group-font-size);\n font-weight: var(--instui-component-menu-group-font-weight);\n }\n\n :scope > .separator {\n height: var(--instui-component-menu-separator-height);\n background: var(--instui-component-menu-separator-background);\n margin: var(--instui-component-menu-separator-margin-vertical)\n var(--instui-component-menu-separator-margin-horizontal);\n }\n}\n",
313
+ "canvasHighContrast": "/**\n * @component menu\n * @summary A dropdown surface of items, groups, and separators.\n * @remarks Compose entries as `.item`, label a section with a `.group` heading, and divide sections with a `.separator`. A `.item-info` line adds secondary text inside an item.\n * @part .item — A menu entry; add -disabled, -highlighted, or -active/[aria-checked].\n * @part .group — A labelled group heading.\n * @part .separator — A divider rule between items.\n * @part .item-info — Secondary info text within a menu item.\n * @a11y Mark a checked item with `aria-checked=\"true\"` (same styling as `-active`).\n * @example -nocard\n * ```html\n * <div class=\"pfx-menu\">\n * <div class=\"group\">Actions</div>\n * <div class=\"item\">Edit</div>\n * <div class=\"item -active\">Duplicate</div>\n * <div class=\"separator\"></div>\n * <div class=\"item\">Delete</div>\n * </div>\n * ```\n * @structure\n * .pfx-menu {\n * .group {}\n * .item {}\n * .separator {}\n * }\n * @related tree-browser — Both present nested, selectable entries.\n * @related simple-select — A select's dropdown reuses this menu surface.\n */\n.pfx-menu {\n min-width: var(--instui-component-menu-min-width);\n max-width: var(--instui-component-menu-max-width);\n background: var(--instui-component-menu-item-background);\n border: var(--instui-border-width-sm) solid var(--instui-color-stroke-base);\n border-radius: var(--instui-border-radius-md);\n padding: var(--instui-spacing-space-xs) 0;\n}\n\n@scope (.pfx-menu) {\n :scope > .item {\n display: block;\n padding: var(--instui-component-menu-item-padding-vertical)\n var(--instui-component-menu-item-padding-horizontal);\n color: var(--instui-component-menu-item-label-color);\n font-family: var(--instui-component-menu-item-font-family);\n font-size: var(--instui-component-menu-item-font-size);\n font-weight: var(--instui-component-menu-item-font-weight);\n line-height: var(--instui-component-menu-item-line-height);\n cursor: pointer;\n }\n\n /* A disabled item (InstUI Menu.Item `disabled`): muted, non-interactive. */\n :scope > .item.-disabled {\n opacity: var(--instui-opacity-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n\n :scope > .item:hover,\n :scope > .item.-highlighted {\n background: var(--instui-component-menu-item-highlighted-background);\n color: var(--instui-component-menu-item-highlighted-label-color);\n }\n\n :scope > .item.-active,\n :scope > .item[aria-checked=\"true\"] {\n background: var(--instui-component-menu-item-active-background);\n color: var(--instui-component-menu-item-active-label-color);\n }\n\n :scope > .item.-active:hover,\n :scope > .item[aria-checked=\"true\"]:hover {\n background: var(--instui-component-menu-item-selected-highlighted-background);\n }\n\n /* Secondary line inside an item (a description or shortcut). */\n .item-info {\n color: var(--instui-component-menu-item-label-info-color);\n }\n\n :scope > .item:hover .item-info,\n :scope > .item.-highlighted .item-info {\n color: var(--instui-component-menu-item-highlighted-label-info-color);\n }\n\n /* A labelled group of items. */\n :scope > .group {\n padding: var(--instui-component-menu-group-padding-vertical)\n var(--instui-component-menu-group-padding-horizontal);\n background: var(--instui-component-menu-group-background);\n color: var(--instui-component-menu-group-color);\n font-family: var(--instui-component-menu-group-font-family);\n font-size: var(--instui-component-menu-group-font-size);\n font-weight: var(--instui-component-menu-group-font-weight);\n }\n\n :scope > .separator {\n height: var(--instui-component-menu-separator-height);\n background: var(--instui-component-menu-separator-background);\n margin: var(--instui-component-menu-separator-margin-vertical)\n var(--instui-component-menu-separator-margin-horizontal);\n }\n}\n"
313
314
  }.rebrand;
314
315
  const metric$1 = {
315
316
  "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",
@@ -327,9 +328,9 @@ const pagination$1 = {
327
328
  "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"
328
329
  }.rebrand;
329
330
  const pill$1 = {
330
- "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",
331
- "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",
332
- "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"
331
+ "rebrand": "/**\n * @component pill\n * @summary A compact status label; add a leading glyph with the shared `-icon-<name>` form.\n * @modifier -color-info — Informational status.\n * @modifier -color-success — Positive status.\n * @modifier -color-warning — Cautionary status.\n * @modifier -color-danger — Error status.\n * @modifier -icon-* — A leading glyph from the icon set (e.g. `-icon-check`), painted before the label.\n * @modifier -render-icon-<name> — @deprecated The former `renderIcon` prop; still works as an alias, but use `-icon-<name>` instead.\n * @pseudo ::before — The leading icon glyph, sized and spaced to the pill.\n * @example\n * ```html\n * <div class=\"instui-display-flex\" style=\"gap: 12px;\">\n * <span class=\"instui-pill -color-success -icon-check\">Published</span>\n * <span class=\"instui-pill\">Draft</span>\n * <span class=\"instui-pill -color-info\">In review</span>\n * <span class=\"instui-pill -color-warning\">Stale</span>\n * <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n.pfx-pill {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-pill-height);\n max-width: var(--instui-component-pill-max-width);\n padding: 0 var(--instui-component-pill-padding-horizontal);\n background: var(--instui-component-pill-background-color);\n color: var(--instui-component-pill-base-text-color);\n border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n var(--instui-component-pill-base-border-color);\n border-radius: var(--instui-component-pill-border-radius);\n font-family: var(--instui-component-pill-font-family);\n font-size: var(--instui-component-pill-text-font-size);\n font-weight: var(--instui-component-pill-text-font-weight);\n line-height: var(--instui-component-pill-line-height);\n}\n\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n inline-size: var(--instui-font-size-text-xs);\n block-size: var(--instui-font-size-text-xs);\n margin-inline-end: 0.375rem;\n}\n\n.pfx-pill.-color-info {\n color: var(--instui-component-pill-info-text-color);\n border-color: var(--instui-component-pill-info-border-color);\n}\n\n.pfx-pill.-color-success {\n color: var(--instui-component-pill-success-text-color);\n border-color: var(--instui-component-pill-success-border-color);\n}\n\n.pfx-pill.-color-warning {\n color: var(--instui-component-pill-warning-text-color);\n border-color: var(--instui-component-pill-warning-border-color);\n}\n\n.pfx-pill.-color-danger {\n color: var(--instui-component-pill-error-text-color);\n border-color: var(--instui-component-pill-error-border-color);\n}\n\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n",
332
+ "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 * ```html\n * <div class=\"instui-display-flex\" style=\"gap: 12px;\">\n * <span class=\"instui-pill -color-success -icon-check\">Published</span>\n * <span class=\"instui-pill\">Draft</span>\n * <span class=\"instui-pill -color-info\">In review</span>\n * <span class=\"instui-pill -color-warning\">Stale</span>\n * <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n.pfx-pill {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-pill-height);\n max-width: var(--instui-component-pill-max-width);\n padding: 0 var(--instui-component-pill-padding-horizontal);\n background: var(--instui-component-pill-background-color);\n color: var(--instui-component-pill-base-text-color);\n border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n var(--instui-component-pill-base-border-color);\n border-radius: var(--instui-component-pill-border-radius);\n font-family: var(--instui-component-pill-font-family);\n font-size: var(--instui-component-pill-text-font-size);\n font-weight: var(--instui-component-pill-text-font-weight);\n line-height: var(--instui-component-pill-line-height);\n}\n\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n inline-size: var(--instui-font-size-text-xs);\n block-size: var(--instui-font-size-text-xs);\n margin-inline-end: 0.375rem;\n}\n\n.pfx-pill.-color-info {\n color: var(--instui-component-pill-info-text-color);\n border-color: var(--instui-component-pill-info-border-color);\n}\n\n.pfx-pill.-color-success {\n color: var(--instui-component-pill-success-text-color);\n border-color: var(--instui-component-pill-success-border-color);\n}\n\n.pfx-pill.-color-warning {\n color: var(--instui-component-pill-warning-text-color);\n border-color: var(--instui-component-pill-warning-border-color);\n}\n\n.pfx-pill.-color-danger {\n color: var(--instui-component-pill-error-text-color);\n border-color: var(--instui-component-pill-error-border-color);\n}\n\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n",
333
+ "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 * ```html\n * <div class=\"instui-display-flex\" style=\"gap: 12px;\">\n * <span class=\"instui-pill -color-success -icon-check\">Published</span>\n * <span class=\"instui-pill\">Draft</span>\n * <span class=\"instui-pill -color-info\">In review</span>\n * <span class=\"instui-pill -color-warning\">Stale</span>\n * <span class=\"instui-pill -color-danger\">Blocked</span>\n * </div>\n * ```\n * @related badge — A badge is the count or notification counterpart.\n * @related tag — A tag is the removable, form-oriented counterpart.\n */\n.pfx-pill {\n display: inline-flex;\n align-items: center;\n height: var(--instui-component-pill-height);\n max-width: var(--instui-component-pill-max-width);\n padding: 0 var(--instui-component-pill-padding-horizontal);\n background: var(--instui-component-pill-background-color);\n color: var(--instui-component-pill-base-text-color);\n border: var(--instui-component-pill-border-width) var(--instui-component-pill-border-style)\n var(--instui-component-pill-base-border-color);\n border-radius: var(--instui-component-pill-border-radius);\n font-family: var(--instui-component-pill-font-family);\n font-size: var(--instui-component-pill-text-font-size);\n font-weight: var(--instui-component-pill-text-font-weight);\n line-height: var(--instui-component-pill-line-height);\n}\n\n/* A leading icon (InstUI `renderIcon`): a glyph class on the pill renders a masked ::before that\n inherits the pill's colour. It refines the shared icon ::before to the pill's size + spacing. */\n.pfx-pill[class*=\"-icon-\"]::before {\n inline-size: var(--instui-font-size-text-xs);\n block-size: var(--instui-font-size-text-xs);\n margin-inline-end: 0.375rem;\n}\n\n.pfx-pill.-color-info {\n color: var(--instui-component-pill-info-text-color);\n border-color: var(--instui-component-pill-info-border-color);\n}\n\n.pfx-pill.-color-success {\n color: var(--instui-component-pill-success-text-color);\n border-color: var(--instui-component-pill-success-border-color);\n}\n\n.pfx-pill.-color-warning {\n color: var(--instui-component-pill-warning-text-color);\n border-color: var(--instui-component-pill-warning-border-color);\n}\n\n.pfx-pill.-color-danger {\n color: var(--instui-component-pill-error-text-color);\n border-color: var(--instui-component-pill-error-border-color);\n}\n\n.pfx-pill.-color-info,\n.pfx-pill.-color-success,\n.pfx-pill.-color-warning,\n.pfx-pill.-color-danger {\n font-weight: var(--instui-component-pill-status-label-font-weight);\n}\n"
333
334
  }.rebrand;
334
335
  const popover$1 = {
335
336
  "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",
@@ -347,9 +348,9 @@ const progress$1 = {
347
348
  "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"
348
349
  }.rebrand;
349
350
  const radioInputGroup$1 = {
350
- "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",
351
- "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",
352
- "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"
351
+ "rebrand": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n",
352
+ "canvas": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n",
353
+ "canvasHighContrast": "/**\n * @component radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n * <legend>T-shirt size</legend>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n * <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n * legend {}\n * .pfx-radio.-variant-toggle {\n * input {}\n * }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n.pfx-radio-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--instui-component-form-field-layout-gap-inputs);\n min-inline-size: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.pfx-radio-input-group > legend {\n padding: 0;\n margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n color: var(--instui-component-form-field-layout-text-color);\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n}\n\n.pfx-radio-input-group.-required > legend::after {\n content: \"*\";\n margin-inline-start: 0.25rem;\n color: var(--instui-component-form-field-layout-asterisk-color);\n}\n\n/* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n.pfx-radio-input-group.-layout-columns,\n.pfx-radio-input-group.-layout-inline {\n flex-flow: row wrap;\n align-items: center;\n column-gap: var(--instui-spacing-space-md);\n}\n\n.pfx-radio-input-group.-layout-columns > legend,\n.pfx-radio-input-group.-layout-inline > legend {\n flex-basis: 100%;\n}\n\n/* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n isn't clipped by a neighbour. */\n.pfx-radio-input-group.-variant-toggle {\n flex-flow: row wrap;\n align-items: center;\n gap: 0;\n}\n\n.pfx-radio-input-group.-variant-toggle > legend {\n flex-basis: 100%;\n}\n\n.pfx-radio-input-group.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n z-index: 1;\n}\n"
353
354
  }.rebrand;
354
355
  const radio$1 = {
355
356
  "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",
@@ -377,9 +378,9 @@ const sideNavBar$1 = {
377
378
  "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"
378
379
  }.rebrand;
379
380
  const spinner$1 = {
380
- "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",
381
- "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",
382
- "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"
381
+ "rebrand": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n * <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n.pfx-spinner {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n\n.pfx-spinner.-size-xs {\n width: var(--instui-component-spinner-spinner-size-xs);\n height: var(--instui-component-spinner-spinner-size-xs);\n border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n width: var(--instui-component-spinner-spinner-size-sm);\n height: var(--instui-component-spinner-spinner-size-sm);\n border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n width: var(--instui-component-spinner-spinner-size-lg);\n height: var(--instui-component-spinner-spinner-size-lg);\n border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n\n.pfx-spinner.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n}\n",
382
+ "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 * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n * <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n.pfx-spinner {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n\n.pfx-spinner.-size-xs {\n width: var(--instui-component-spinner-spinner-size-xs);\n height: var(--instui-component-spinner-spinner-size-xs);\n border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n width: var(--instui-component-spinner-spinner-size-sm);\n height: var(--instui-component-spinner-spinner-size-sm);\n border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n width: var(--instui-component-spinner-spinner-size-lg);\n height: var(--instui-component-spinner-spinner-size-lg);\n border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n\n.pfx-spinner.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n}\n",
383
+ "canvasHighContrast": "/**\n * @component spinner\n * @summary An animated loading ring; give it role=\"status\" and an aria-label.\n * @modifier -size-xs — Extra-small.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @modifier -color-inverse — On a dark surface.\n * @a11y Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.\n * @example\n * ```html\n * <span class=\"pfx-spinner\" role=\"status\" aria-label=\"Loading\"></span>\n * ```\n * ### Inverse color -nocard\n * ```html\n * <div class=\"instui-view instui-card -background-primary-inverse\">\n * <span class=\"pfx-spinner -color-inverse\" role=\"status\" aria-label=\"Loading\"></span>\n * </div>\n * ```\n * @demo self:spinner\n */\n@keyframes pantoken-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n.pfx-spinner {\n display: inline-block;\n width: var(--instui-component-spinner-spinner-size-md);\n height: var(--instui-component-spinner-spinner-size-md);\n border: var(--instui-component-spinner-stroke-width-md) solid\n var(--instui-component-spinner-track-color);\n border-top-color: var(--instui-component-spinner-color);\n border-radius: 50%;\n animation: pantoken-spinner-rotate 0.8s linear infinite;\n}\n\n.pfx-spinner.-size-xs {\n width: var(--instui-component-spinner-spinner-size-xs);\n height: var(--instui-component-spinner-spinner-size-xs);\n border-width: var(--instui-component-spinner-stroke-width-xs);\n}\n\n.pfx-spinner.-size-sm {\n width: var(--instui-component-spinner-spinner-size-sm);\n height: var(--instui-component-spinner-spinner-size-sm);\n border-width: var(--instui-component-spinner-stroke-width-sm);\n}\n\n.pfx-spinner.-size-lg {\n width: var(--instui-component-spinner-spinner-size-lg);\n height: var(--instui-component-spinner-spinner-size-lg);\n border-width: var(--instui-component-spinner-stroke-width-lg);\n}\n\n.pfx-spinner.-color-inverse {\n border-top-color: var(--instui-component-spinner-inverse-color);\n}\n"
383
384
  }.rebrand;
384
385
  const table$1 = {
385
386
  "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",
@@ -387,9 +388,9 @@ const table$1 = {
387
388
  "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"
388
389
  }.rebrand;
389
390
  const tabs$1 = {
390
- "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",
391
- "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",
392
- "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"
391
+ "rebrand": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks Selected and disabled styling matches either the `-selected`/`-disabled` class or the `aria-selected`/`aria-disabled` attribute, so you can drive state from markup or from ARIA.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below.\n * @part .list — The row of tabs.\n * @part .tab — A single tab; `-selected` marks the active one.\n * @part .panel — The content panel for a tab.\n * @cssstate selected\n * @cssstate disabled\n * @cssstate hidden\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n * <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n * <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n * <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n * </div>\n * <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n * .list {\n * .tab {}\n * }\n * .panel {}\n * }\n */\n.pfx-tabs {\n display: flex;\n flex-direction: column;\n background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n :scope > .list {\n display: flex;\n width: 100%;\n flex-flow: row wrap;\n }\n\n :scope.-overflow-scroll > .list {\n flex-wrap: nowrap;\n overflow-x: auto;\n scrollbar-width: none;\n }\n\n :scope.-overflow-scroll > .list::-webkit-scrollbar {\n display: none;\n }\n\n .tab {\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n border: 0;\n color: var(--instui-component-tabs-tab-default-text-color);\n font-family: var(--instui-component-tabs-tab-font-family);\n font-size: var(--instui-component-tabs-tab-font-size);\n font-weight: var(--instui-component-tabs-tab-font-weight);\n line-height: 1;\n padding: 1rem 1.25rem;\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n position: relative;\n z-index: 1;\n /* Layout-stable underline: always 0.25rem, coloured only when hovered or selected. */\n border-bottom: 0.25rem solid transparent;\n margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n }\n\n .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n [aria-disabled=\"true\"]\n ) {\n border-bottom-color: var(--instui-component-tabs-tab-default-hover-border-color);\n }\n\n .tab.-selected,\n .tab[aria-selected=\"true\"] {\n border-bottom-color: var(--instui-component-tabs-tab-default-selected-border-color);\n }\n\n .tab.-disabled,\n .tab[aria-disabled=\"true\"],\n .tab:disabled {\n opacity: 0.5;\n font-weight: normal;\n cursor: default;\n }\n\n /* Secondary variant: rounded \"folder\" tabs; the selected tab's bottom border matches the panel\n background so it visually connects into the panel below. */\n :scope.-variant-secondary .tab {\n padding: 0.75rem 1rem;\n line-height: var(--instui-component-tabs-tab-line-height);\n color: var(--instui-component-tabs-tab-secondary-text-color);\n margin-inline-end: 0.2em;\n margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n border: var(--instui-component-tabs-panel-border-width) solid transparent;\n border-radius: 0.1875rem 0.1875rem 0 0;\n }\n\n :scope.-variant-secondary .tab:first-of-type {\n margin-inline-start: 0;\n }\n\n :scope.-variant-secondary\n .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n [aria-disabled=\"true\"]\n ) {\n background: var(--instui-component-tabs-tab-secondary-selected-background);\n border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n }\n\n :scope.-variant-secondary .tab.-selected,\n :scope.-variant-secondary .tab[aria-selected=\"true\"] {\n background: var(--instui-component-tabs-tab-secondary-selected-background);\n border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n border-bottom-color: var(--instui-component-tabs-tab-secondary-selected-background);\n color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n }\n\n :scope > .panel {\n box-sizing: border-box;\n border-top: var(--instui-component-tabs-panel-border-width) solid\n var(--instui-component-tabs-panel-border-color);\n background: var(--instui-component-tabs-panel-background);\n color: var(--instui-component-tabs-panel-text-color);\n font-family: var(--instui-component-tabs-panel-font-family);\n font-size: var(--instui-component-tabs-panel-font-size);\n font-weight: var(--instui-component-tabs-panel-font-weight);\n line-height: var(--instui-component-tabs-panel-line-height);\n padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n var(--instui-spacing-space-md);\n }\n\n :scope > .panel[hidden] {\n display: none;\n }\n}\n",
392
+ "canvas": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks Selected and disabled styling matches either the `-selected`/`-disabled` class or the `aria-selected`/`aria-disabled` attribute, so you can drive state from markup or from ARIA.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below.\n * @part .list — The row of tabs.\n * @part .tab — A single tab; `-selected` marks the active one.\n * @part .panel — The content panel for a tab.\n * @cssstate selected\n * @cssstate disabled\n * @cssstate hidden\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n * <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n * <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n * <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n * </div>\n * <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n * .list {\n * .tab {}\n * }\n * .panel {}\n * }\n */\n.pfx-tabs {\n display: flex;\n flex-direction: column;\n background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n :scope > .list {\n display: flex;\n width: 100%;\n flex-flow: row wrap;\n }\n\n :scope.-overflow-scroll > .list {\n flex-wrap: nowrap;\n overflow-x: auto;\n scrollbar-width: none;\n }\n\n :scope.-overflow-scroll > .list::-webkit-scrollbar {\n display: none;\n }\n\n .tab {\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n border: 0;\n color: var(--instui-component-tabs-tab-default-text-color);\n font-family: var(--instui-component-tabs-tab-font-family);\n font-size: var(--instui-component-tabs-tab-font-size);\n font-weight: var(--instui-component-tabs-tab-font-weight);\n line-height: 1;\n padding: 1rem 1.25rem;\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n position: relative;\n z-index: 1;\n /* Layout-stable underline: always 0.25rem, coloured only when hovered or selected. */\n border-bottom: 0.25rem solid transparent;\n margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n }\n\n .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n [aria-disabled=\"true\"]\n ) {\n border-bottom-color: var(--instui-component-tabs-tab-default-hover-border-color);\n }\n\n .tab.-selected,\n .tab[aria-selected=\"true\"] {\n border-bottom-color: var(--instui-component-tabs-tab-default-selected-border-color);\n }\n\n .tab.-disabled,\n .tab[aria-disabled=\"true\"],\n .tab:disabled {\n opacity: 0.5;\n font-weight: normal;\n cursor: default;\n }\n\n /* Secondary variant: rounded \"folder\" tabs; the selected tab's bottom border matches the panel\n background so it visually connects into the panel below. */\n :scope.-variant-secondary .tab {\n padding: 0.75rem 1rem;\n line-height: var(--instui-component-tabs-tab-line-height);\n color: var(--instui-component-tabs-tab-secondary-text-color);\n margin-inline-end: 0.2em;\n margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n border: var(--instui-component-tabs-panel-border-width) solid transparent;\n border-radius: 0.1875rem 0.1875rem 0 0;\n }\n\n :scope.-variant-secondary .tab:first-of-type {\n margin-inline-start: 0;\n }\n\n :scope.-variant-secondary\n .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n [aria-disabled=\"true\"]\n ) {\n background: var(--instui-component-tabs-tab-secondary-selected-background);\n border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n }\n\n :scope.-variant-secondary .tab.-selected,\n :scope.-variant-secondary .tab[aria-selected=\"true\"] {\n background: var(--instui-component-tabs-tab-secondary-selected-background);\n border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n border-bottom-color: var(--instui-component-tabs-tab-secondary-selected-background);\n color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n }\n\n :scope > .panel {\n box-sizing: border-box;\n border-top: var(--instui-component-tabs-panel-border-width) solid\n var(--instui-component-tabs-panel-border-color);\n background: var(--instui-component-tabs-panel-background);\n color: var(--instui-component-tabs-panel-text-color);\n font-family: var(--instui-component-tabs-panel-font-family);\n font-size: var(--instui-component-tabs-panel-font-size);\n font-weight: var(--instui-component-tabs-panel-font-weight);\n line-height: var(--instui-component-tabs-panel-line-height);\n padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n var(--instui-spacing-space-md);\n }\n\n :scope > .panel[hidden] {\n display: none;\n }\n}\n",
393
+ "canvasHighContrast": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks Selected and disabled styling matches either the `-selected`/`-disabled` class or the `aria-selected`/`aria-disabled` attribute, so you can drive state from markup or from ARIA.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below.\n * @part .list — The row of tabs.\n * @part .tab — A single tab; `-selected` marks the active one.\n * @part .panel — The content panel for a tab.\n * @cssstate selected\n * @cssstate disabled\n * @cssstate hidden\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n * <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n * <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n * <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n * <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n * </div>\n * <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n * .list {\n * .tab {}\n * }\n * .panel {}\n * }\n */\n.pfx-tabs {\n display: flex;\n flex-direction: column;\n background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n :scope > .list {\n display: flex;\n width: 100%;\n flex-flow: row wrap;\n }\n\n :scope.-overflow-scroll > .list {\n flex-wrap: nowrap;\n overflow-x: auto;\n scrollbar-width: none;\n }\n\n :scope.-overflow-scroll > .list::-webkit-scrollbar {\n display: none;\n }\n\n .tab {\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n border: 0;\n color: var(--instui-component-tabs-tab-default-text-color);\n font-family: var(--instui-component-tabs-tab-font-family);\n font-size: var(--instui-component-tabs-tab-font-size);\n font-weight: var(--instui-component-tabs-tab-font-weight);\n line-height: 1;\n padding: 1rem 1.25rem;\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n position: relative;\n z-index: 1;\n /* Layout-stable underline: always 0.25rem, coloured only when hovered or selected. */\n border-bottom: 0.25rem solid transparent;\n margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n }\n\n .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n [aria-disabled=\"true\"]\n ) {\n border-bottom-color: var(--instui-component-tabs-tab-default-hover-border-color);\n }\n\n .tab.-selected,\n .tab[aria-selected=\"true\"] {\n border-bottom-color: var(--instui-component-tabs-tab-default-selected-border-color);\n }\n\n .tab.-disabled,\n .tab[aria-disabled=\"true\"],\n .tab:disabled {\n opacity: 0.5;\n font-weight: normal;\n cursor: default;\n }\n\n /* Secondary variant: rounded \"folder\" tabs; the selected tab's bottom border matches the panel\n background so it visually connects into the panel below. */\n :scope.-variant-secondary .tab {\n padding: 0.75rem 1rem;\n line-height: var(--instui-component-tabs-tab-line-height);\n color: var(--instui-component-tabs-tab-secondary-text-color);\n margin-inline-end: 0.2em;\n margin-bottom: calc(-1 * var(--instui-component-tabs-panel-border-width));\n border: var(--instui-component-tabs-panel-border-width) solid transparent;\n border-radius: 0.1875rem 0.1875rem 0 0;\n }\n\n :scope.-variant-secondary .tab:first-of-type {\n margin-inline-start: 0;\n }\n\n :scope.-variant-secondary\n .tab:hover:not(.-selected):not(.-disabled):not([aria-selected=\"true\"]):not(\n [aria-disabled=\"true\"]\n ) {\n background: var(--instui-component-tabs-tab-secondary-selected-background);\n border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n }\n\n :scope.-variant-secondary .tab.-selected,\n :scope.-variant-secondary .tab[aria-selected=\"true\"] {\n background: var(--instui-component-tabs-tab-secondary-selected-background);\n border-color: var(--instui-component-tabs-tab-secondary-selected-border-color);\n border-bottom-color: var(--instui-component-tabs-tab-secondary-selected-background);\n color: var(--instui-component-tabs-tab-secondary-selected-text-color);\n }\n\n :scope > .panel {\n box-sizing: border-box;\n border-top: var(--instui-component-tabs-panel-border-width) solid\n var(--instui-component-tabs-panel-border-color);\n background: var(--instui-component-tabs-panel-background);\n color: var(--instui-component-tabs-panel-text-color);\n font-family: var(--instui-component-tabs-panel-font-family);\n font-size: var(--instui-component-tabs-panel-font-size);\n font-weight: var(--instui-component-tabs-panel-font-weight);\n line-height: var(--instui-component-tabs-panel-line-height);\n padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n var(--instui-spacing-space-md);\n }\n\n :scope > .panel[hidden] {\n display: none;\n }\n}\n"
393
394
  }.rebrand;
394
395
  const tag$1 = {
395
396
  "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",
@@ -432,9 +433,9 @@ const truncate$1 = {
432
433
  "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"
433
434
  }.rebrand;
434
435
  const icon$1 = {
435
- "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",
436
- "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",
437
- "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"
436
+ "rebrand": "/**\n * @utility icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @modifier -icon-* — Set the glyph token (`--pantoken-glyph`) and render it via the shared painter (for example `-icon-search`).\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n.pfx-icon {\n display: inline-flex;\n}\n\n[class*=\"-icon-\"]::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n flex: none;\n vertical-align: -0.125em;\n background: currentColor;\n -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n",
437
+ "canvas": "/**\n * @utility icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @modifier -icon-* — Set the glyph token (`--pantoken-glyph`) and render it via the shared painter (for example `-icon-search`).\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n.pfx-icon {\n display: inline-flex;\n}\n\n[class*=\"-icon-\"]::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n flex: none;\n vertical-align: -0.125em;\n background: currentColor;\n -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n",
438
+ "canvasHighContrast": "/**\n * @utility icon\n * @summary The icon system: `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph (in `currentColor`) before any element.\n * @modifier -icon-* — Set the glyph token (`--pantoken-glyph`) and render it via the shared painter (for example `-icon-search`).\n * @pseudo ::before — The glyph itself: a 1em box masked from `--pantoken-glyph` and filled with `currentColor`.\n * @accessibility The glyph is decorative, so mark it `aria-hidden=\"true\"`; give it a `role` or label only when the icon conveys meaning on its own.\n * @example\n * <span class=\"instui-icon -icon-megaphone\" aria-hidden=\"true\"></span>\n */\n.pfx-icon {\n display: inline-flex;\n}\n\n[class*=\"-icon-\"]::before {\n content: \"\";\n display: inline-block;\n inline-size: 1em;\n block-size: 1em;\n flex: none;\n vertical-align: -0.125em;\n background: currentColor;\n -webkit-mask: var(--pantoken-glyph) center / contain no-repeat;\n mask: var(--pantoken-glyph) center / contain no-repeat;\n}\n"
438
439
  }.rebrand;
439
440
  const mask$1 = {
440
441
  "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",
@@ -2111,11 +2112,20 @@ const viewCss = defineUtility({
2111
2112
  ${rules.join("\n")}`;
2112
2113
  }
2113
2114
  }).css;
2115
+ //#endregion
2116
+ //#region src/utilities/spacing.ts
2117
+ /**
2118
+ * The spacing utilities — margin/padding classes on the pantoken spacing scale, with logical sides.
2119
+ *
2120
+ * @module
2121
+ */
2122
+ const COMPONENT_CLASS_NAMES = COMPONENTS.filter((entry) => entry.kind === "component").map((entry) => entry.name);
2114
2123
  /** The spacing utilities as a standalone, header-wrapped stylesheet. */
2115
2124
  const spacingUtilitiesCss = defineUtility({
2116
2125
  name: "spacing",
2117
2126
  css: (p) => {
2118
2127
  const rules = [];
2128
+ const componentAliases = (modifier) => COMPONENT_CLASS_NAMES.map((name) => `.${p}${name}.${modifier}`);
2119
2129
  for (const [prop, letters, steps] of [[
2120
2130
  "margin",
2121
2131
  ["m", "margin"],
@@ -2127,11 +2137,15 @@ const spacingUtilitiesCss = defineUtility({
2127
2137
  "padding",
2128
2138
  ["p", "padding"],
2129
2139
  SPACING_STEPS
2130
- ]]) for (const letter of letters) for (const [side, suffix] of Object.entries(SPACING_SIDES)) for (const [step, value] of Object.entries(steps)) rules.push(`.${p}${letter}${side}-${step} { ${prop}${suffix}: ${value}; }`);
2140
+ ]]) for (const letter of letters) for (const [side, suffix] of Object.entries(SPACING_SIDES)) for (const [step, value] of Object.entries(steps)) {
2141
+ const modifier = `-${letter}${side}-${step}`;
2142
+ const selectors = [`.${p}${letter}${side}-${step}`, ...componentAliases(modifier)];
2143
+ rules.push(`${selectors.join(", ")} { ${prop}${suffix}: ${value}; }`);
2144
+ }
2131
2145
  return css`/**
2132
2146
  * @utility spacing
2133
2147
  * @class .instui-p-md
2134
- * @summary Margin and padding utilities — \`.instui-m<side>-<step>\` and \`.instui-p<side>-<step>\` on the spacing scale (sides \`t\`/\`b\`/\`s\`/\`e\`/\`x\`/\`y\` or none; margin also takes \`auto\`).
2148
+ * @summary Margin and padding utilities — \`.instui-m<side>-<step>\` and \`.instui-p<side>-<step>\` on the spacing scale (sides \`t\`/\`b\`/\`s\`/\`e\`/\`x\`/\`y\` or none; margin also takes \`auto\`). Every utility also has a component-attached alias modifier (for example \`-mb-sm\` on any \`.instui-<component>\`).
2135
2149
  * @example
2136
2150
  * <div class="instui-p-md instui-mt-lg">Padded box with a large top margin.</div>
2137
2151
  */